Click here to Skip to main content
15,942,710 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi Experts,
I have a Modal jQuery pop-up opens from c# code. My pop-up has an updatePanel, I had a problem with postback when clicking asp:Button or check a checkbox, but i solved it by moving the dialogue back into the form.
Now I have added a FileUpload control to the updatePanel. and the control loses its file once i check checkbox or clicking the button, so I had to add a trigger to my updatePanel. But with the trigger the pop-up returned to close again on button click.
Here is my javaScript for the modal Pop-up:
JavaScript
<!-- popup javascript and links -->
   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script type="text/javascript">
        function showmodalpopup() {
            var dlg = jQuery("#popupdiv").dialog({
                title: "Edit IC data",
                width: 1000,
                height: 500,
                modal: true
                //buttons: {
                //    Close: function () {
                //        $(this).dialog('close');
                //    }
                //}
            });
            dlg.parent().appendTo(jQuery("form:first")); //to include modal popup contents in the form to get their values and prevent closing on postback
        };
        </script>

Here is how I open it from code behind (calling it from ListView ItemCommand):
C#
if (e.CommandName == "editRow")
            {
                ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal Popup", "showmodalpopup();", true); //to show the iQuery popup with the required info.
            }

My pop-up div:
ASP.NET
<div id="popupdiv" title="Basic modal dialog" style="display: none">
        <div class="span12" style="text-align:left;margin-removed0px;"> 
                    <table class="table table-hover table-striped table-condensed" style="margin-removed 0px;">
                        <tr style="background-color: #10466E;">
                            <th>Function</th>
                            <th>Color</th>
                            <th>Polarity</th>
                            <th>Location</th>
                            <th>Files</th>
                            <th>Notes</th>
                        </tr>
                        <tr>
                            <td><asp:TextBox runat="server" ID="txtFunction" Enabled="false"></asp:TextBox></td>
                            <td><asp:TextBox runat="server" ID="txtColor"></asp:TextBox></td>
                            <td><asp:TextBox runat="server" ID="txtPolarity"></asp:TextBox></td>
                            <td><textarea runat="server" id="txtLocation"></textarea></td>
                            <td>
                                <asp:FileUpload runat="server" ID="picFile" /><br />
                                <asp:RegularExpressionValidator ID="fileValid" runat="server" ControlToValidate="picFile" ErrorMessage="Only .png or .jpg" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.jpeg|.png)$" Display="Dynamic" ForeColor="Red"></asp:RegularExpressionValidator>
                            </td>
                            <td><textarea runat="server" id="txtNotes"></textarea></td>
                        </tr>
                    </table>
                   
                    <div class="span6" style="text-align:left;">
	<!-- updatePanel to prevent closing on postback -->					
                <asp:UpdatePanel runat="server" ID="updatePanel1">
				<!-- trigger to retain FileUpload file when postback-->
                    <Triggers>
                        <asp:PostBackTrigger ControlID="btnUpdate" />
                    </Triggers>
                <ContentTemplate>                    
                        <asp:CheckBoxList runat="server" ID="chkVehicles" DataTextField="Vehicle" DataValueField="Id" AutoPostBack="true" OnSelectedIndexChanged="chkVehicles_SelectedIndexChanged">
                        </asp:CheckBoxList>

                   <asp:Button runat="server" ID="btnUpdate" Text="Update" CssClass="con-tbutton" OnClick="btnUpdate_Click" UseSubmitBehavior="false" /><br />
                <asp:Label runat="server" ID="lbl_Result"></asp:Label><br /><asp:Label runat="server" ID="lbl_UpdateMessage"></asp:Label>     
                </ContentTemplate>
            </asp:UpdatePanel>
            </div>
        </div>
    </div>


Everything works very well, except that the modal pop-up closes once I click the update Button.

Please advise
thanks in advance
Posted
Comments
F-ES Sitecore 13-Nov-15 9:15am    
This is effectively for security reasons and a side-effect of what the updatepanel is doing behind the scenes. You'll have to re-arrange your UI such that the file upload is done as a follow-up task rather than as part of the pop-up....or completely re-architect your solution to not use the updatepanel but your own ajax code.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900