CODEWITHSUNDEEP
asp.netjquery-ui
marc_s
marc_s

Reputation: 754268

jQuery UI dialog on ASP.NET page (inside user control)

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).

Upvotes: 0

Views: 3182

Answers (1)

Dave Anderson
Dave Anderson

Reputation: 12274

Where are you creating the dialog? There should be some code like this which gets called when the DOM is ready;

$(document).ready(function(){

  var dialogOpts = {
    autoOpen: false,
    modal: true,
    width: 620,
    height: 660
  };

  $("#dlg-discount").dialog(dialogOpts);

}

And then you can call $("#dlg-discount").dialog('open') in your onclick method.

Upvotes: 2

Related Questions