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!
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!
Share Improve this question edited Apr 8, 2014 at 12:41 Kerieks asked Apr 4, 2014 at 12:21 KerieksKerieks 1,0647 gold badges27 silver badges54 bronze badges 3- Use only jquery or javascript, jquery syntex will $('#<%=btnSave.ClientID %>')).click(); – bitkot Commented Apr 4, 2014 at 12:28
- @user2042152: can you please confirm if you are okay to use a simple 'browser confirmation pop up' than using a 'jquery modal popup' to ask the confirmation for saving the file? In that case I have a suggestion. let me know. – user3240361 Commented Apr 8, 2014 at 9:28
- @user3240361, Yes I am... I was using ajax control toolkit before, but due to a lot of compatability issues I have to find something else, as long as it's compatabil with IE 8 as well... – Kerieks Commented Apr 8, 2014 at 9:42
9 Answers
Reset to default 5 +50 document.getElementById('<%=btnSave.ClientID %>').click();
Or
$('#<%=btnSave.ClientID %>').click();
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();
Try just using
$("#<%=btnSave.ClientID%>").click();
and remove the give inline style of the button.
$('#<%=btnSave.ClientID %>').trigger("click"); // Make sure you use '#' as part of your jQuery selector
provided $('<%=btnSave.ClientID %>') is referring to the button, you can check it by inspecting $('<%=btnSave.ClientID %>').length == 1.
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.
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"
Try this
$('<%=btnSave.ClientID %>').click();
Try just using
$("#btnSave").click();
If you are trying to achieve the below:
When the user click on Upload image button in the GridView (gvDeviceCalibration) the user is shown with a jquery modal (or a popup).
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