English 中文(简体)
jquery ui dialog opens only once
原标题:

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden

After I close the dialog by clicking the X icon, the dialog can t be opened again.

最佳回答

Scott Gonzalez (of the jQuery UI Team) talks about the reason alot of people have this problem when getting started with jQuery UI in a recent blog post: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

An excerpt:

The problem that users often encounter with dialogs is that they try to instantiate a new dialog every time the user performs some action (generally clicking a link or a button). This is an understandable mistake because at first glance it seems like calling .dialog() on an element is what causes the dialog to open. In reality what is happening is that a new dialog instance is being created and then that instance is being opened immediately after instantiation. The reason that the dialog opens is because dialogs have an autoOpen option, which defaults to true. So when a user calls .dialog() on an element twice, the second call is ignored because the dialog has already been instantiated on that element.

Solution:

The simple solution to this problem is to instantiate the dialog with autoOpen set to false and then call .dialog( open ) in the event handler.

$(document).ready(function() {
    var $dialog = $( <div></div> )
        .html( This dialog will show every time! )
        .dialog({
            autoOpen: false,
            title:  Basic Dialog 
        });

    $( #opener ).click(function() {
        $dialog.dialog( open );
    });
});
问题回答

Are you using the ui dialog? You should post some code so we can see what is causing your problem. But here iss a guess (because I made this same mistake recently). When using ui dialog you have to initialize the dialog only once.

 $(document).ready(function() {
   $( #dialog ).dialog({
     autoOpen:false,
     modal: true ,
     width:450,
     height:550
  });
 $( #MyButton ).click(openDialog);    

});

This code, initializes the dialog but does not show it. The openDialog function will then open the dialog box when MyButton is clicked.

   var openDialog = function(){

       $( #dialog ).load( loadurl.php );//load with AJAX

      //optionally change options each time it is clicked
       $( #dialog ).dialog( option ,  buttons ,{
          "Cancel":function(){
             $( #dialog ).dialog( close );
          }
      });

     //actually open the dialog
     $( #dialog ).dialog( open );

};

As an addition to the accepted answer i would like to add that you need to pay attention when using this in an asp.net updatepanel. If you click the button then a postback will happen, the popup will open but won t open a second time because of the postback that happened. So you should make sure that the button you use to open the popup does not postback. ie:

<asp:LinkButton ID="btn1" runat="server" OnClientClick="return false;">Click me</asp:LinkButton>




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签