Click event from button inside a modal dialog box is not working

Question

User-707990935 posted

I am creating a popup window using jquery in my ASP.Net application. The popup is opening on button click. I have written following code to open the popup.

html code:

        <%-- Popup --%>
        <div id="modal_dialog" class="PopupStyle" style="display: none;">
            <table>
                <tr>
                    <td style="width: 100px">
                        <label class="control-label">Photo</label>
                    </td>
                    <td>
                        <asp:FileUpload ID="FileUpload1" runat="server" />
                        <asp:RegularExpressionValidator
                            ID="regexValidateImageFil" runat="server" ControlToValidate="FileUpload1"
                            ErrorMessage="Only file types with jpg, png, gif are allowed."
                            ValidationExpression="^([0-9a-zA-Z_\-~ :\\])+(.jpg|.JPG|.jpeg|.JPEG|.bmp|.BMP|.gif|.GIF|.png|.PNG|.pdf)$"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <label class="control-label">File Type</label>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlUpFileType" runat="server" class="form-control" Width="400px">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <label class="control-label">Note</label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtNotes" runat="server" class="form-control" MaxLength="150" Width="400px"></asp:TextBox>
                    </td>
                </tr>
            </table>
            <div style="padding: 10px">
            </div>
            <asp:Button ID="btnSaveUpoad" runat="server" class="btn btn-primary" Text=" Upload File " OnClick="btnSaveUpoad_Click" />
        </div>
    </form>
</div>

And the jquey code:

<script type="text/javascript">
    $(document).ready(function () {
        $("[id*=btnUpoad]").on("click", function () {
            debugger;
            $("#modal_dialog").dialog({ width: 520 });

            $("#modal_dialog").dialog({
                title: "Upload Files",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            return false;
        });
    });
</script>

As you can see there is a button in my the html, i.e.,

<asp:Button ID="btnSaveUpoad" runat="server" class="btn btn-primary" Text=" Upload File " OnClick="btnSaveUpoad_Click" />

But the click event (from button inside popup i.e., btnSaveUpoad) is not calling the corresponding function written in the .cs file like:

protected void btnSaveUpoad_Click(object sender, EventArgs e)
{

----------
}

Any idea.

Thanks in advance.

Partha

Answer 1

User-474980206 posted

if you use the browser tools, you will see after the dialog is shown, the div that is the dialog content is moved to the end of the body. this give the dialog its own context, and allow positioning. but now, your asp: form fields are no longer in the form, so a form post will not include them.

there are two common approaches to this issue.

1) have a separate form in the dialog. this is the best approach, and the dialog should be defined outside any other forms. its been years since I have used webforms, but I believe unlike MVC, it only allows one form per page. you can do a second form, but it will not have view state. 

2) do not use form fields in the dialog, but copy the values to the form. of course this will not work with a <input type=file>. though if you don't want them to type the filename, you can just use a dialog button to click the real file control (usually hidden) the file, and display the name in the dialog.

2) after the dialog is hidden, move it back to the form. use the "hidden.bs.modal" event. 

Answer 2

User61956409 posted

Hi Partha,

e click event (from button inside popup i.e., btnSaveUpoad) is not calling the corresponding function written in the .cs file

Firstly, as bruce mentioned, if you check the html source rendered in your browser, you can find the button “btnSaveUpoad” in modal_dialog is outside of <form> element after you open the modal_dialog.

To make the button “btnSaveUpoad” work, you can try to append the dialog to the <form> element by specifying the appendTo option when you initiate the jQuery dialog.

$("#modal_dialog").dialog({
    appendTo: $("#form1"),
    title: "Upload Files",
    buttons: {
        Close: function () {
            $(this).dialog('close');
        }
    },
    modal: true
});

With Regards,

Fei Han

Answer 3

User-474980206 posted

is better to do the move in the close rather than the open, this will keep the CSS working.