I have a really odd behavior here: I created a little popup dialog in jQuery UI, and in my test HTML page, it works flawlessly. When I click on the button, the popup comes up, covers the background, and remains on screen until I click on one of the two buttons (OK or Cancel) provided.
So now I wanted to add this into my ASP.NET 3.5 app. I wanted to add it to a GridView inside a user controls (ASCX), which is on a page (ASPX) contained inside a master page.
The jQuery 1.4.2 and jQuery UI 1.8.1 scripts are referenced on the master page:
<body>
<form id="XXXXXX" runat="server">
<Ajax:ScriptManager ID="masterScriptManager" runat="server" ScriptMode="Auto">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.2.min.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.1.custom.min.js" />
</Scripts>
</Ajax:ScriptManager>
I had to change this to use the Ajax script manager, since adding them to the as never worked.
So in my gridview, I have a column with image buttons, and when the user clicks on those, I am calling a little javascript function to show the jQuery UI dialog:
function showDialog()
{
$("#dlg-discount").dialog('open');
$("#txtAmount").focus();
}
When I run this page in MS IE 8, I get a separate page, and at the top of the page, I get the contents of my , with proper background color and all. In Firefox 3.5.6, I do get the dialog as a popup.
In both cases, the dialog page/popup disappears again after a second or less – without me clicking anything!
It seems similar to this question but the solution provided there doesn’t work in my case. This one here also seems similar but again: the solution presented doesn’t seem to work in my case…
Any ideas / hints / tips on what the h**** is going on here??
Thanks!
Update: OK, one problem is solved – it appears that for whatever reason, the default MS Ajax stuff is adding some kind of an “observer” to my popup dialog and closes it right away after it shows up 🙁
So I changed the OnClientClick="showDialog();" to OnClientClick="showDialog(); return false;" and how that doesn’t happen anymore – the dialog box pops up and stays there until I click on either of the two buttons (OK and Cancel).
Where are you creating the dialog? There should be some code like this which gets called when the DOM is ready;
And then you can call
$("#dlg-discount").dialog('open')in your onclick method.