Button event not firing in javascript

Question

I've added a jquery modal popup to save upload files for a specific device. The modal pops up, the cancel button works, but I cant figure out how to get the Save button to fire the onclick event...

This is what I've done:

     $(function () {
        $("#dialogCustUploads").dialog("destroy");
        $("#dialogCustUploads").dialog({
            title: "Upload Files",
            autoOpen: false,
            modal: true,
            resizable: false,
            width: 'auto',
            buttons: {
                Save: function () {
                    $(document.getElementById('<%=btnSave.ClientID %>')).click();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });

    function showCustUploads() {
        $(function () {
            $("#dialogCustUploads").dialog("open");
                    });
        $(".dialogCustUploads").parent().appendTo($("form:first"));  
    }


    <div id="dialogCustUploads" style="display: none">     
    <table style="width:100%;">
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label16" runat="server" Text="Client"></asp:Label>

                    </td>
                    <td>
                        <asp:Label ID="lblClientUploadName" runat="server"></asp:Label>
                    </td>
                </tr>
                    <tr>
                <td>
                    <asp:Label ID="Label19" runat="server" Text="Certificate no" ></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtCertificateNo" runat="server" Width="410px"></asp:TextBox>
                </td>
            </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label14" runat="server" Text="Upload Option"></asp:Label>
                    </td>
                    <td>
                        <asp:DropDownList ID="lstUploadOption" runat="server" AppendDataBoundItems="True" Width="410px"></asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label18" runat="server" Text="File"></asp:Label>
                    </td>
                    <td>
                        <asp:FileUpload ID="fuPath" runat="server" Width="408px" />
                        <br />
                        <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style1"></td>
                    <td>
                        <asp:Button ID="btnSave" style="display: none;" runat="server" Text="Save" OnClientClick="btnSave_Click"  BackColor="White" />                          
                    </td>
                </tr>
            </table>
</div>

I'm not sure what I'm missing or doing wrong... This is my first time on javascript... Any help will be greatly appreciated!!!! The savebutton does nothing....

EDIT

Thanks for everyone's help! I have updated my button to remove the inline styling:

    <asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="btnSave_Click" ClientIDMode="Static" /> 

And I've tried using the following which you have supplied to me:

    1. $("#<%=btnSave.ClientID%>").click();
    2. document.getElementById('<%=btnSave.ClientID %>').click();
    3. <asp:Button ID="btnSave" style="display: none;" runat="server" Text="Save" OnClientClick="btnSave_Click" ClientIDMode="Static"  BackColor="White" /> 
     document.getElementById('btnSave').click();
    4. $('<%=btnSave.ClientID %>').trigger("click");

but they all give me an error message which reads:

    Microsoft JScript runtime error: 'btnSave_Click' is undefined

When the form breaks the button reads as follows:

    <input type="submit" name="ctl00$MainContent$btnSave" value="Save" onclick="btnSave_Click;" id="btnSave" /> 

Is there anything else wrong with what I'm doing?

EDIT

This is my source code:

    <script type="text/javascript">
    $(function () {
        $("#dialog").dialog("destroy");
        $("#dialog").dialog({
            title: "Message",
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
    function showMessage() {
        $(function () {
            $("#dialog").dialog("open");
        });
        return false;
    }

    $(function () {
        $("#dialogCustUploads").dialog("destroy");
        $("#dialogCustUploads").dialog({
            title: "Upload Files",
            autoOpen: false,
            modal: true,
            resizable: false,
            width: 'auto',
            buttons: {
                Save: function () {
                    document.getElementById('<%=btnSave.ClientID %>').click();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });

    function showCustUploads() {
        $(function () {
            $("#dialogCustUploads").dialog("open");
                    });
        $(".dialogCustUploads").parent().appendTo($("form:first"));  
    }

</script>

My div where the for the button click event:

    <div id="dialogCustUploads" style="display: none">     
    <table style="width:100%;">
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label16" runat="server" Text="Client"></asp:Label>

                    </td>
                    <td>
                        <asp:Label ID="lblClientUploadName" runat="server"></asp:Label>
                    </td>
                </tr>
                    <tr>
                <td>
                    <asp:Label ID="Label19" runat="server" Text="Certificate no" ></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtCertificateNo" runat="server" Width="410px"></asp:TextBox>
                </td>
            </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label14" runat="server" Text="Upload Option"></asp:Label>
                    </td>
                    <td>
                        <asp:DropDownList ID="lstUploadOption" runat="server" AppendDataBoundItems="True" Width="410px"></asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label18" runat="server" Text="File"></asp:Label>
                    </td>
                    <td>
                        <asp:FileUpload ID="fuPath" runat="server" Width="408px" />
                        <br />
                        <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style1"></td>
                    <td>
                        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" /> 

                    </td>
                </tr>
            </table>
</div>

I call the modal popup from a click in a gridview:

    <asp:GridView ID="gvDeviceCalibration" runat="server" CellPadding="10" Width="90%" AutoGenerateColumns="False"  BorderWidth="1px">
                            <HeaderStyle BackColor="#3A4F63" BorderWidth="1px" Font-Size="7pt" Wrap="False" ForeColor="White" />
                            <RowStyle BackColor="White" Wrap="True" />
                                <AlternatingRowStyle BackColor="#FFCC99" Wrap="True" />
                            <Columns>
                                <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" ></asp:BoundField>
                                <asp:BoundField DataField="InstrumentType" HeaderText="Instrument Type" ReadOnly="True" SortExpression="InstrumentType"> <HeaderStyle Wrap="True" /></asp:BoundField>

                                <asp:BoundField DataField="Make" HeaderText="Make" ReadOnly="True" SortExpression="Make"> 
                                    <HeaderStyle Wrap="True" />
                                </asp:BoundField>
                                <asp:BoundField DataField="Location" HeaderText="Location" ReadOnly="True" SortExpression="Location"></asp:BoundField>
                                <asp:BoundField DataField="SubLocation" HeaderText="Sub Location" ReadOnly="True" SortExpression="Sub Location"> <HeaderStyle Wrap="True" /></asp:BoundField>
                                <asp:BoundField DataField="CalibrationIntervals" HeaderText="Calibration Intervals" ReadOnly="True" SortExpression="CalibrationIntervals"> <HeaderStyle Wrap="True" /></asp:BoundField>
                                <asp:BoundField DataField="SerialNo" HeaderText="Serial No" ReadOnly="True" SortExpression="SerialNo"> <HeaderStyle Wrap="True" /></asp:BoundField>
                                <asp:BoundField DataField="WorkingRange" HeaderText="Working Range" ReadOnly="True" SortExpression="WorkingRange"> <HeaderStyle Wrap="True" /></asp:BoundField>
                                <asp:BoundField DataField="Classification" HeaderText="Classification" ReadOnly="True" SortExpression="Classification"></asp:BoundField>
                                <asp:BoundField DataField="CalibrationDate" HeaderText="Calibration Date" DataFormatString="{0:yyyy/MM/dd}" ReadOnly="True" SortExpression="CalibrationDate">                                        
                                 <HeaderStyle Wrap="True" />
                                </asp:BoundField>
                                <asp:BoundField DataField="CalibrationHouse" HeaderText="Calibration House" ReadOnly="True" SortExpression="CalibrationHouse"><HeaderStyle Wrap="True" /></asp:BoundField>
                                <asp:BoundField DataField="Owner1s" HeaderText="Owner 1" ReadOnly="True" SortExpression="Owner1s"></asp:BoundField>
                                <asp:BoundField DataField="Owners2" HeaderText="Owner 2" ReadOnly="True" SortExpression="Owners2"></asp:BoundField>
                                <asp:BoundField DataField="CreatedBy" HeaderText="Created By" ReadOnly="True" SortExpression="CreatedBy"></asp:BoundField>
                                <asp:TemplateField HeaderText="Select">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="UpdateStatus" runat="server" Height="22" BorderStyle="None" BackColor="Transparent"
                                            ImageUrl="~/Images/Sign-Select-icon.png" OnClick="SelectCalDevice_Click"  Width="22"  /><%-- --%>

                                    </ItemTemplate>
                                </asp:TemplateField>                                   
                                <asp:TemplateField HeaderText="Upload">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="CustUploadFiles" runat="server" Height="22" BorderStyle="None" BackColor="Transparent"
                                            ImageUrl="~/Images/UploadFilesTrans.png" OnClick="SelectCustFiles_Click" Width="22"  /> 
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="View ">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="CustViewFiles" runat="server" Height="25" BorderStyle="None" BackColor="Transparent"
                                            ImageUrl="~/Images/msgicon.png" ForeColor="Transparent"  Width="25" OnClick="ViewCustFiles_Click"  />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <EmptyDataTemplate>                                
                                <HeaderTemplate>There are no leads listed.</HeaderTemplate>
                            </EmptyDataTemplate> 
                        </asp:GridView>

And this is the SelectCustFiles_Click where I show the popup:

    protected void SelectCustFiles_Click(object sender, EventArgs e)
    {
        ImageButton lb = sender as ImageButton;
        GridViewRow row = (GridViewRow)lb.NamingContainer;
        txtRowID.Text = row.Cells[0].Text;
        lblClientUploadName.Text = row.Cells[1].Text;

        PopulateUploadOptions();
        //modalCustUploads.Show();
        this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popUpMessage", "showCustUploads();", true);
    }

And this is the click event I'm trying to call from script:

    protected void btnSave_Click(object sender, EventArgs e)
    {
        // Before attempting to save the file, verify
        // that the FileUpload control contains a file.
        if (fuPath.HasFile)
        {
            // Get the size in bytes of the file to upload.
            int fileSize = fuPath.PostedFile.ContentLength;

            // Allow only files less than 2,100,000 bytes (approximately 2 MB) to be uploaded.
            if (fileSize < 45497717)
            {
                // Call a helper method routine to save the file.
                //SaveFile(fuPath.PostedFile);
                SaveFile();
                fuPath.Dispose();

                lbljQMessage.Text = "Update successful";
                this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popUpMessage", "showCustUploads();", true);
                //modalCustUploads.Show();
            }
            else
                lblMessage.Text = "You did not specify a file to upload.";
        }
    }

I'm getting an error of 'btnSave' is undefined...

this is the scripts I'm using:

    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
   <script src="../Scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>

SOLVED

I found the problem... I appended the dialog in the wrong place.. Instead of this:

     function showCustUploads() {
        $(function () {
            $("#dialogCustUploads").dialog("open");
                    });
        $(".dialogCustUploads").parent().appendTo($("form:first"));  
    }

it should be:

     function showCustUploads() {
        $(function () {
            $("#dialogCustUploads").dialog("open");
                    }); 
    }

And instead of this:

     $(function () {
        $("#dialogCustUploads").dialog("destroy");
         $("#dialogCustUploads").dialog({
            title: "Upload Files",
            autoOpen: false,
            modal: true,
            resizable: false,
            width: 'auto',
            buttons: {
                Save: function () {
                  //  __doPostBack("<%=btnSave.UniqueID %>", "");
                    $($get("<%=btnSave.UniqueID %>")).click();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });

it should be:

     $(function () {
        $("#dialogCustUploads").dialog("destroy");
        var dlgUploads = $("#dialogCustUploads").dialog({
            title: "Upload Files",
            autoOpen: false,
            modal: true,
            resizable: false,
            width: 'auto',
            buttons: {
                Save: function () {
                  //  __doPostBack("<%=btnSave.UniqueID %>", "");
                    $($get("<%=btnSave.UniqueID %>")).click();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        dlgUploads.parent().appendTo(jQuery("form:first"));
    });

Thanks for everyone's help!!! Appreciate it!

Answer 1

 document.getElementById('<%=btnSave.ClientID %>').click();

 Or

 $('#<%=btnSave.ClientID %>').click();

Answer 2

you are doing this wrong:

$(document.getElementById('<%=btnSave.ClientID %>')).click();

you are mixing and confusing jquery and javascript selector, you should do like this with jquery:

$('#<%=btnSave.ClientID %>').click();

or like this with native javascript:

document.getElementById('<%=btnSave.ClientID %>').click();

Note: you can set buttton ClientIDMode to Static , then you can do like this as well:

<asp:Button ID="btnSave" style="display: none;" runat="server" Text="Save" OnClientClick="btnSave_Click" ClientIDMode="Static"  BackColor="White" /> 

and in jquery:

$('#btnSave').click();

or in javascript:

document.getElementById('btnSave').click();

Answer 3

$('#<%=btnSave.ClientID %>').trigger("click"); // Make sure you use '#' as part of your jQuery selector

如果$('<%=btnSave.ClientID %>')指的是按钮，你可以通过检查$('<%=btnSave.ClientID %>').length == 1来检查它$('<%=btnSave.ClientID %>').length == 1 。

Answer 4

Try just using

$("#<%=btnSave.ClientID%>").click();

and remove the give inline style of the button.

Answer 5

IT should be

document.getElementById('<%=btnSave.ClientID %>').click();

instead

$(document.getElementById('<%=btnSave.ClientID %>')).click();

Because you're using javascript, BTW jQuery is javascript but wrapping inside $() will create jQuery object, you were combining both.

Answer 6

OnClientClick specifies a client-side javascript function to execute, but it looks like you're trying to use it to execute a server-side method. OnClick will execute a server-side method:

OnClick="btnSave_Click"

Answer 7

尝试这个

$('<%=btnSave.ClientID %>').click();

Answer 8

尝试使用

   $("#btnSave").click();

Answer 9

If you are trying to achieve the below:

1. When the user click on Upload image button in the GridView (gvDeviceCalibration) the user is shown with a jquery modal (or a popup).

2. If the user clicks on Cancel you do nothing , else if the user clicks on the Save button then go to the Code behind event handler 'btnSave_Click'

Possible Solution (change your 'Upload' template field in 'gvDeviceCalibration' GridView with below):

<asp:TemplateField HeaderText="Upload">
<ItemTemplate>
    <asp:ImageButton ID="CustUploadFiles" runat="server" Height="22" BorderStyle="None" BackColor="Transparent" ImageUrl="~/Images/UploadFilesTrans.png" OnClick="btnSave_Click" Width="22" OnClientClick="return confirm('Are you sure you want to Save?')"  /> 
</ItemTemplate>
</asp:TemplateField>

In the above code we are making the Image button to do both the confirmation through 'OnClientClik' event and do the code behind call for the save method through 'OnClick' event.

In this case you need not use 'SelectCustFiles_Click' method or 'jquery modal.

Let me know in case of any issues