could jquery live solve this problem? table links are bound to click, ajax refresh of rows ruins things

Question

I have a table, that I loop through using jquery and modify the href of each link.

IF someone pages through the table, the links are refreshed using ajax (page doesn't reload).

Now all my links are not modified since the table has refreshed.

Paging is done via a drop down list.

Can jquery live help in some way to re-apply the modifications to the urls that I do when the page initially loads up?

 $("#someTableID").each(function () {

   // modify href of links in each row, append ?user=342 to it.

 }

Answer 1

No, .live() can't help you. All that .live() and .delegate() do is help handle events from content that changes. It can't automatically fix things for you. The code that performs the ajax reload will have to apply all transformations to whatever is reloaded.

Answer 2

Try this:

 $("#someTableID > tr").each(function () {
   var $link  = $(this).find('a');
   $link.attr('href', $link.attr('href') + '?user=342');
 }

Answer 3

You aren't actually hooking an event up to each link, you're just modifying the text for each link, correct? Then no, jquery.live() is the incorrect tool; it is a way of monitoring user events on the page. You're just trying to decorate existing text.

What you want is to connect a callback to the ajax handler to do the decorations to the new content of the page after it has been received by the ajax handler.

You may even want to hook the callback in after the new content has been received, but before it has been placed into the page, to make sure there's no possible race condition where the link exists but the extra material hasn't been added.

I suspect you're using load. Look to the jquery.ajax.load() source code, and see how you can replace it with a more robust callback handler using jquery.ajax().

Answer 4

There's a couple ways to approach this. You could go in any of the following directions, but your only limitation is how creative you can be:

First option would be to delegate the paging event to fire a loop as described above. After the content is finished loading, you can loop through the links modifying each individually.

Alternatively, you can store your query string modification as data in the link markup itself:

<a href="" class="{ myData : { user : 342 } }">some link.</a>

Then, you can create a delegate function to wire up your new urls(as they are clicked or any delegated event you choose):

$("body").delegate("a", "click", function(e) {
    e.preventDefault();

    var $this = $(this);
    window.location = $.param.querystring($this.attr("href"), $this.metadata().myData);
});

For option 2, I'm using a couple of plugins, but those are not required for the idea. Plugins used are metadata and bbq. Metadata is built in to the edge version of jQuery and should be included in $.data() as soon as they make the next release(currently 1.4rc1). Custom attributes would also work in this scenario as opposed to metadata.

String appending is also an option, I'm just a fan of the jquery-bbq project as it provides a lot of power in url manipulation.

I've provided a jsFiddle sample here.