Trying to click an asp:LinkButton with jQuery
I am looking for a way to click an <asp:LinkButton>
using jQuery. I am also using a <asp:ModalPopupExtender>
, with a Yes/No option, so if the user clicks 'yes', it triggers a javascript function, OnOk()
, which will have to click the save button on the page, but it is not doing anything at the moment, just showing the alert box:
ASP.NET AJAX
<asp:LinkButton ID="butSaveAssociation" runat="server" OnClientClick="SaveAssociation();" Text="btnSave" />
<asp:ModalPopupExtender BehaviorID="confirmPopup" ID="confirmPopup" runat="server" TargetControlID="butTest"
PopupControlID="ConfirmView" OnOkScript="OnOk();" OnCancelScript="$find('confirmPopup').hide(); return false;" OkControlID="yesButton" CancelControlID="noButton" />
<asp:Panel ID="ConfirmView" runat="server" CssClass="modalPopup" Style="display:none; height:150px; width:250px;">
<center><div>
<table style="margin-left:auto; margin-right:auto;">
<tr>
<td colspan="4" align="left" style="padding-left: 75px; padding-top: 10px;">
Are you sure you want to save the changes?
</td>
</tr>
<br /><br />
<tr>
<td align="left" colspan="1">
<asp:LinkButton ID="yesButton" runat="server" CausesValidation="false" CssClass="YesNoButton" BorderStyle="none" Text="YES">
</asp:LinkButton>
</td>
<td align="right" colspa开发者_如何学运维n="1">
<asp:LinkButton ID="noButton" runat="server" CausesValidation="false" CssClass="YesNoButton" BorderStyle="none" Text="NO">
</asp:LinkButton>
</td>
</tr>
</table>
</div></center>
</asp:Panel>
JAVASCRIPT W/ JQUERY
<script src="~/Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function OnOk() {
ClickSaveButton();
}
function ClickSaveButton() {
$('#<%=butSaveAssociation.ClientID %>').click() // not working...
alert('save button clicked.');
}
</script>
EDIT
The 'SaveAssociation()' function is simply to change a flag, so it does not perform the actual save:
<script type="text/javascript">
function SaveAssociation() {
setDirty(false);
}
function setDirty(changeVal) {
$("#IsDirty").val(changeVal);
}
</script>
<input type="hidden" id="IsDirty" value="" />
This feature is simply to check if there has been changes on the page, if there has been changes, the 'IsDirty' hidden field will be set to true. I need to invoke the VB handler that handles 'butSaveAssociation.Click' if the user clicks 'OK' to save the changes, like a postback.
Why don't you just call SaveAssociation() ?
In this case, I would just call Save Association as Joe mentioned. However, for future reference the following selector should give you better results.
$('[id$=butSaveAssociation]').click();
Neals select will also work if you are not using a master page, but I assume you are since you were trying to get the ClientID.
Try this:
function ClickSaveButton() {
$('#butSaveAssociation').trigger('click');
alert('save button clicked.');
}
I've had a similar problem which I've worked around by the following:
function clickButton(element)
{
if (element !=null)
{
if (element.click)
{
//IE only
element.click();
}
else
{
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
}
else
{
//oops..
}
}
Called like this:
clickButton(document.getElementById('<%=butSaveAssociation.ClientID%>'));
I've got no idea why the jquery doesn't work though.
This looks like it should be fine but doesn't work for me either:
$('#<%=butSaveAssociation.ClientID %>').click();
It's probably something to do with cosmic radiation or the tides.. ;-)
精彩评论