Trying to click an asp:LinkButton with jQuery

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.

Joe · Accepted Answer · 2011-05-25 16:06:00Z

2

Why don't you just call SaveAssociation() ?

answered May 25, 2011 at 16:06

Joe

82.9k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Mein · Accepted Answer · 2011-05-25 16:15:05Z

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.

answered May 25, 2011 at 16:15

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

1 Comment

Jean-François Beaulieu Over a year ago

To get the correct ID, I ended up doing this: $('a[id$="butSaveAssociation"]').attr("ID");

Naftali · Accepted Answer · 2011-05-25 16:08:01Z

0

Try this:

function ClickSaveButton() {
    $('#butSaveAssociation').trigger('click');
    alert('save button clicked.');
}

answered May 25, 2011 at 16:08

Naftali

147k41 gold badges247 silver badges304 bronze badges

2 Comments

Josh Mein Over a year ago

Since he was trying to get the clientId of the button, I believe he is using master pages which mangles the id. Therefore, that selector would not work.

Jean-François Beaulieu Over a year ago

True, the actual ID of the button is 'ctl05_butSaveAssociation' and depends on the total number of controls.

Gordon Thompson · Accepted Answer · 2013-12-09 16:06:35Z

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.. ;-)

Collectives™ on Stack Overflow

Trying to click an asp:LinkButton with jQuery

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related