Using jQuery to trigger click event on linkbutton

I ran into a little problem with jQuery today which I thought I´d share with you.
I had an asp.net list view with an item template and an edit template.

Source code can be downloaded from my github repo.

What I wanted to accomplish was to be able to use either the edit button or to click on the table row (tr) to set the asp.net list view into edit mode.
Below is an example of how it may look when moving the mouse over the tr:

And when in edit mode:

Part of the html for this looks like:

As you can see I have set some css classes on both the tr and first td. My plan here was to use some jQuery to actually trigger that linkbutton´s click event.

I made an extension to jQuery that is triggered through this piece of code:

var prm = Sys.WebForms.PageRequestManager.getInstance()
prm.add_pageLoaded(function (sender, args) {
  jQuery(".command").Command();
});

The actual extension initially looked like:

$.fn.Command = function (options) {
  $.extend({}, options);
  this.click(function () {
    jQuery(this).find('td.command > a').click();
  });
}

What I´m doing here is to trigger on the click event on the TR. Then I search though the DOM looking for the next TD with a class attribute of command. Then finding the first A-tag and trying to fire off the click event.
This didn´t work though, why??

The linkbutton in this example translates to:

<a id="…" href="javascript:WebForm_DoPostBack[...]">Edit</a>

So it has not OnClick method to trigger.
Note: Found this example on stackoverflow

As the example suggests if I write the extension like this instead:

$.fn.Command = function (options) {
  $.extend({}, options);
  this.click(function () {
    eval(jQuery(this).find('td.command > a').attr('href'));
  });
}

…it will work!

  1. #1 by JayGee on June 8, 2011 - 08:07

    Thank you very much. Finally someone how has real answer to this problem🙂

  2. #2 by Mac Milan on July 19, 2011 - 12:49

    I think all you need is this.
    http://stackoverflow.com/questions/3581369/set-linkbutton-as-default-button-for-asppanel-in-asp-net

    jQuery(document).ready(function() {
    jQuery(‘#’).keypress(function(event) {
    if (event.keyCode == 13) {
    eval($(‘#’).attr(‘href’));
    }
    });
    });

  3. #3 by prakash karuppiah on April 21, 2016 - 07:50

    very nice.. its working for me thank u very much

  1. 2010 in review « Johan Leino

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: