Question

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" colspan="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.

Answer 1

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.