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.
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>
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....
I have a div <div id="masterdiv"> which has several child <div>s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="...
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. ...
<form><input type="file" name="first" onchange="jsFunction(2);"> <input type="file" name="second" onchange="jsFunction(3);"</form> Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
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 ...
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
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!