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?
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();
$('#<%=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.
Try this
$('<%=btnSave.ClientID %>').click();
You don't need to create jQuery object
Use
document.getElementById('<%=btnSave.ClientID %>').click();
instead of
$(document.getElementById('<%=btnSave.ClientID %>')).click();
Try just using
$("#btnSave").click();
Try just using
$("#<%=btnSave.ClientID%>").click();
and remove the give inline style of the button.
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?
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();
$('#<%=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.
Try this
$('<%=btnSave.ClientID %>').click();
You don't need to create jQuery object
Use
document.getElementById('<%=btnSave.ClientID %>').click();
instead of
$(document.getElementById('<%=btnSave.ClientID %>')).click();
Try just using
$("#btnSave").click();
Try just using
$("#<%=btnSave.ClientID%>").click();
and remove the give inline style of the button.
0 commentaires:
Enregistrer un commentaire