CODEWITHSUNDEEP
c#asp.netjquery-uipostbackjquery-ui-dialog
santosh s
santosh s

Reputation: 41

Jquery UI modal dialog issue with update panel button trigger

I am facing a silly issue but struggling hard to resolve..

I have a Checkbox control in update panel..

<asp:UpdatePanel ID="UpdateCheckEdit" runat="server"><ContentTemplate>
<asp:CheckBox ID="ChkEdit" Text="Edit" Enabled="true" onCheckedChanged="ChkEdit_CheckedChanged" Visible="false" AutoPostBack="true" runat="server" />
    <asp:TextBox ID="txtDbInterviewComments" CssClass="user_textarea" TextMode="MultiLine" Visible="false" runat="server" />
    <asp:Button ID="btnEdit" Visible="false" CssClass="create_btn" OnClientClick="javascript: $('#ConfirmDiv').dialog('open');return false;" OnClick="btnEdit_Click" Text="Edit" runat="server" />
</ContentTemplate></asp:UpdatePanel>

On check change the textbox and edit button both are visible and once the edit button is hit a modal dialog pops up asking for a confirmation and the div for the box is as follows..

<div id="ConfirmDiv" title="Confirm">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Do you want to save the changes?<br />These changes CANT be reversed.</p>
</div>

The script for the Jquery is written as

<script type="text/javascript">
        $().ready(function () {
            $("#ConfirmDiv").dialog(
            { autoOpen: false,
              modal: true,
              bgiframe: true,
              resizable: false, 
              height: 'auto', 
              open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide();},
              buttons: {'Yes': function () { <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnEdit))%>; },'Cancel': function () { $(this).dialog('close'); }}
            })
        });

    </script>

This script is written in BODY tag and the Yes button click calls the post back event of Edit button(btnEdit)

In the code behind everything runs fine but after execution the modal box still shows up. I need to close this dialog box after code behind execution..

If i remove the update panel, everything works absolutely fine but there exists a HTML radio button column in grid view on the same page which looses its check if a full post back occurs..

Please help me out with possible solutions..

Upvotes: 0

Views: 3120

Answers (2)

Gary.S
Gary.S

Reputation: 7121

the main problem you will face is that document.ready is not fired on a partial postback. To work around this issue you can update your jquery object in a javascript function called PageLoad:

<script type="text/javascript"> 
    $().ready(function () { 
         // Only happens on first page load, not on partial postbacks
         SetupDialog();
    }); 

    function pageLoad(){
        // Happens on every partial postback
        $("#ConfirmDiv").dialog("close")
    }

    function SetupDialog(){
        $("#ConfirmDiv").dialog( 
        { autoOpen: false, 
          modal: true, 
          bgiframe: true, 
          resizable: false,  
          height: 'auto',  
          open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide();}, 
          buttons: {'Yes': function () { <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnEdit))%>; },'Cancel': function () { $(this).dialog('close'); }} 
        })
    }

</script>

I believe it is case sensitive.

Upvotes: 1

Rauf
Rauf

Reputation: 12842

See, the update panel will wipe out all the jQuery code inside the page. Try to use the PageRequestManager.

Upvotes: 0

Related Questions