CODEWITHSUNDEEP
jqueryasp.netcssupdatepaneljquery-ui-dialog
Joe Johnston
Joe Johnston

Reputation: 2936

CSS Styles not reapplied to jQuery dialog after postback

I have a stock jQuery dialog div with a data entry usercontrol wrapped in a updatepanel. It looks great until the first postback. After which there are no styles applied at all. (controls retain their values and events continue to operate as expected.) After closing the dialog subsequent .dialog("open") calls have no styles applied if there had been a postback. 

    $(function () {
        var dlg = jQuery("#EventMod").dialog({
            autoOpen: false
            , modal: true
        });
        dlg.parent().appendTo(jQuery("form:first"));  

        $(".NewEvent").click(function () {
            $("#EventMod").dialog("open");
            return false;
        });
    });

The dialog div is here:

<div id="EventMod" title="Event Modify" class="ui-helper-hidden">
    <asp:UpdatePanel ID="updNewEvent" runat="server">
        <ContentTemplate>
            <uc1:EventEdit ID="NewEvent" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

In the usercontrol Classes are NOT assigned dynamically they appear like this:

    <table class="NewEvent" >
        <tr>
            <td align="center">
                <table class="Event">
                    <tr class="Title">
                        <th width="55">
                            <strong>Event #</strong>
                        </th>
    ... snip ...

I have the stylesheet linked in the parent page. I tried adding it to the usercontrol as well with no visible results.

Upvotes: 2

Views: 1822

Answers (1)

rick schott
rick schott

Reputation: 20617

I had weirdness like this before and had to do this to get stable results within an UpdatePanel:

   $(function () {

        var titleText="This is the title"
        var key = "uniqueId";
        var newParentDiv= "#" + key;
        var div = $("<div title='" + titleText + "' id='" + key+ "'></div>");
        $('body').append(div);
        $(newParentDiv).html($("#EventMod").html());

        var dlg = jQuery(newParentDiv).dialog({
            autoOpen: false
            , modal: true
        });
        dlg.parent().appendTo(jQuery("form:first"));  

        $(".NewEvent").click(function () {
            $(newParentDiv).dialog("open");
            return false;
        });
   });

The problem for me was that jQuery dialog actually moves your content to a new location in the DOM. If a partial postback happens that doesn't update the DOM where jQuery UI put the dialog it becomes stale or hangs around.

Upvotes: 2

Related Questions