CODEWITHSUNDEEP
asp.netjquery
Hitz
Hitz

Reputation: 1071

LinkButton does not invoke on click()

Why doesn't this work?

    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.myButton').click();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinkButton id="ttt" runat="server" PostBackUrl="~/Default.aspx" CssClass="myButton">Click</asp:LinkButton>
    </div>
    </form>

Upvotes: 16

Views: 21432

Answers (8)

JoeS
JoeS

Reputation: 1425

trigger('click') fires jQuery's click event listener which .NET isn't hooked up to. You can just fire the javascript click event which will go to (or run in this case) what is in the href attribute:

 $('.myButton')[0].click();

or 

 ($('.myButton').length ? $('.myButton') : $('<a/>'))[0].click();

If your not sure that the button is going to be present on the page.

Joe

Upvotes: 13

Splash
Splash

Reputation: 1341

If you need the linkbutton's OnClick server-side event to fire, you need to use __doPostback(eventTarget, eventArgument).

ex:

<asp:LinkButton ID="btnMyButton" runat="Server" OnClick="Button_Click" />

<script type="text/javascript">

function onMyClientClick(){ 
  //do some client side stuff

  //'click' the link button, form will post, Button_Click will fire on back-end
  //that's two underscores
  __doPostBack('<%=btnMyButton.UniqueID%>', ''); //the second parameter is required and superfluous, just use blank
}

</script>

Upvotes: 3

Jordan Rieger
Jordan Rieger

Reputation: 2683

Just to clarify, only FireFox suffers from this issue. See http://www.devtoolshed.com/content/fix-firefox-click-event-issue. In FireFox, anchor (a) tags have no click() function to allow JavaScript code to directly simulate click events on them. They do allow you to map the click event of the anchor tag, just not to simulate it with the click() function.

Fortunately, ASP.NET puts the JavaScript postback code into the href attribute, where you can get it and run eval on it. (Or just call window.location.href = document.GetElementById('LinkButton1').href;).

Alternatively, you could just call __doPostBack('LinkButton1'); note that 'LinkButton1' should be replaced by the ClientID/UniqueID of the LinkButton to handle naming containers, e.g. UserControls, MasterPages, etc.

Jordan Rieger

Upvotes: 0

Philippe Leybaert
Philippe Leybaert

Reputation: 171914

That's a tough one. As I understand it, you want to mimic the behavior of clicking the button in javascript code. The problem is that ASP.NET adds some fancy javascript code to the onclick handler.

When manually firing an event in jQuery, only the event code added by jQuery will be executed, not the javascript in the onclick attribute or the href attribute. So the idea is to create a new event handler that will execute the original javascript defined in attributes.

What I'm going to propose hasn't been tested, but I'll give it a shot:

$(document).ready(function() {

// redefine the event
$(".myButton").click(function() {
   var href = $(this).attr("href");

   if (href.substr(0,10) == "javascript:") {
      new Function(href.substr(10)).call(this);
      // this will make sure that "this" is
      // correctly set when evaluating the javascript
      // code
   } else {
      window.location = href;
   }

   return false;
});

// this will fire the click:

$(".myButton").click();

});

Upvotes: 0

Russ Cam
Russ Cam

Reputation: 125538

you need to assign an event handler to fire for when the click event is raised

    $(document).ready(function() {
        $('.myButton', '#form1')
            .click(function() {  
                /* 
                   Your code to run when Click event is raised.
                   In this case, something like window.location = "http://..."                      
                   This can be an anonymous or named function
                */
                return false; // This is required as you have set a PostbackUrl
                              // on the LinkButton which will post the form
                              // to the specified URL
            }); 
    });

I have tested the above with ASP.NET 3.5 and it works as expected.

There is also the OnClientClick attribute on the Linkbutton, which specifies client side script to run when the click event is raised.

Can I ask what you are trying to achieve?

Upvotes: 1

Kobi
Kobi

Reputation: 138147

Do you want to submit the form, or add a Click event? Your link button translates to

<a id="ttt" class="myButton" href="javascript:WebForm_DoPos[...]">Click</a>

, so it has no on-click javascript. Therefore, .click(); does nothing.
I haven't test it, but maybe this will work:

eval($('.myButton').attr('href'));

Upvotes: 41

Ryan Rohrer
Ryan Rohrer

Reputation: 599

you need to give the linkButton a CssClass="myButton" then use this in the top

$(document).ready(function() {
        $('.myButton').click(function(){
             alert("hello thar");
        });
    });

Upvotes: 0

Andrew Noyes
Andrew Noyes

Reputation: 5298

The click event handler has to actually perform an action. Try this:

$(function () {
    $('.myButton').click(function () { alert('Hello!'); });
});

Upvotes: 0

Related Questions