DIV content shows on page instead of JQuery Dialog

Question

I have the following DIV markup:

<div id="dialog" title="Membership Renewal">
Your membership is going to expire.
</div>

I have the following javascript to execute the JQuery:

<script type="text/javascript">
function showjQueryDialog() {
    $("#dialog").dialog("open");
    //alert("Time to renew Membership!");
}

$(document).ready(function() {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: { "Renew Membership": function() { $(this).dialog("close"); } }
    });
});
</script>

I have an asp:Button which is inside a control and the control is on a master page. The first thing I notice is that when the page is loaded, the div is displayed and then disappears when the page is done loading. When I click the button it executes the following:

if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration",    
"showjQueryDialog()", true);
}

When I click the button, instead of a dialog popping up, the content of the div just becomes visible.

Answer 1

make sure you are specifying the correct doctype at the top of your page, this seems to be the cause of some issues that i've seen.

edit:

also, to keep it from flashing at the beginning you can have something like

#debug { display: none; }

somewhere before the element (most likely your stylesheet or in the head).

another thing that might help is if you put set:

OnClientClick="showjQueryDialog(); return false;";

in the page load or similar, that way you wont need a postback (asynchronous or otherwise).

Answer 2

I believe you have two related issues here.

The reason that the DIV is showing when you first load is because you haven't yet told it not to. The jQuery script that makes the DIV behave as a dialog doesn't run until the HTML DOM is loaded, and until then it will not hide the DIV. A simple solution is to hide the DIV by default using CSS.

<div id="dialog" title="Membership Renewal" style="display:none;">
Your membership is going to expire.
</div>

The button click problem is related: RegisterClientScriptBlock will output a script that runs as soon as it is encountered, so the jQuery code that turns it into a dialog hasn't had a chance to run yet. In order to give it a chance to do so, you can change the C# code to use RegisterStartupScript, which will delay execution of showjQueryDialog() until the page has finished loading and the jQuery code has had a chance to make the DIV into a dialog.

if (timeSpan.Days >= 30)
{
  //Show JQuery Dialog Here
    ScriptManager.RegisterStartupScript(this, typeof(Page), 
        "showExpiration", "showjQueryDialog()", true);
}

Answer 3

The reason its not showing is because the document probably hasn't loaded yet. and document.ready hasn't been called, so dialog("open") is getting called before dialog({options}); so to fix this just add the code to in a doc.ready call.

Also, your only loading the dialog once, so you don't really need to initialize it as autoOpen:false, use the display:none then show it as John Boker said

function showjQueryDialog() {
  $(document).ready(function() {
    $("#dialog").dialog({
        modal: true,
        buttons: { "Renew Membership": function() { $(this).dialog("close"); } });
    $("#dialog").show();  // sets display:block;
    //alert("Time to renew Membership!");
  });
}

<div id="dialog" style="display:none">
  <!--..-->
</div>