Jquery UI modal dialog issue with update panel button trigger

Question

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

Gary.S · Accepted Answer · 2011-10-11 15:53:47Z

1

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.

edited Oct 11, 2011 at 15:53

answered Oct 11, 2011 at 5:52

Gary.S

7,1411 gold badge28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

santosh s Over a year ago

Am not understanding how to format this comment to look proper :( Sorry if it seems bad.. I wrote the Javascript in the page load using a string builder, sb. Called it as follows in the button click event, now the pop up itself is not shown....... if (!ClientScript.IsStartupScriptRegistered("JSScript")) ScriptManager.RegisterStartupScript(btnEdit, this.GetType(), "JSCR", sb.ToString(), false);

Gary.S Over a year ago

im sorry if i wasnt clear. the pageLoad function is actually a javascript function that asp.net ajax fires on partial postback (this is wired up automatically so all you need to do if define the function and put code in it). The code you have in $().ready({...}); should be moved to function pageLoad(){...}. You should not need to load the javascript in the code-behind.

Rauf · Accepted Answer · 2011-10-11 10:44:05Z

0

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

answered Oct 11, 2011 at 10:44

Rauf

12.9k23 gold badges80 silver badges129 bronze badges

Collectives™ on Stack Overflow

Jquery UI modal dialog issue with update panel button trigger

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related