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

I know this is old now. However, Set your class to the jQuery UI built in ui-helper-hidden.

<div id="dialog" title="Membership Renewal" class="ui-helper-hidden"> 
    Your membership is going to expire. 
</div> 

This will resolve your div's unwanted cameo behaviour.

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);
}