views:

330

answers:

1

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

+2  A: 

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.

Dave Anderson
@Dave Anderson: that's pretty much exactly what I'm doing. In FF, the dialog comes up just fine (now), but goes away after a second or so. In IE 8, I get a separate page - really really strange.....
marc_s
Your setup sounds almost the same as ours except we use an asp:ScriptManagerProxy to load the js files rather than the Ajax one and call jQuery.noConflict() to release the reference to $ and use jQuery object instead. We do have some MS Ajax controls on the page too which should load the same js as you. Maybe they have problems without it? See api.jquery.com/jQuery.noConflict/
Dave Anderson
Thanks for your comments, Dave! Between those and fiddling with CSS, removing the MS Ajax dependency, and some playing around, I finally got it to work as expected.
marc_s