jquery ajax problem

Question

Hi again everyone, thanks for every help that you guys have given me so far !! :D

and now, i encounter some problem on me using jquery and ajax

i am fetching all of my user's photos from my database, calling them out into a grid and then applying a jquery pagination plug-in 'pajinate' using this code

$(function(){
    $('#talent_paging').pajinate({
        num_page_links_to_display : 4,
        items_per_page : 15,
        nav_label_first : '«',
        nav_label_prev : '<',
        nav_label_next : '>',
        nav_label_last : '&raquo;'
    });
});

source: jquery.pajinate

the page is about searching using certain parameter such as: range of age, gender, and keywords and i am using ajaxform to process the form submission, using this code

$(function() { 
    var options = { 
        target:'#talent_paging',
    };
    $('#search_talent').ajaxForm(options); 
});

source: ajaxForm

like you would have guessed, the pagination is working well on the first page load, but as soon as i operate the search, it fails me. I actually had encountered similar problem regarding this when i was using jquery datatable and was trying to manipulate each row, it was working well on the first page, but it fails on the next page.

i solved my datatable's problem using .delegate(), and i figure that this one has the same issue, i have tried several ways on adding the delegate methods on my pagination-search problem but it was only trials without knowing what am i actually doing (copy this paste that :p) since i don't really understand how does .delegate() works

so, please help me on these questions

is delegate the best way to solve my current problem ??

if it is, please help me on understanding how does .delegate() works

thanks

Answer 1

$().delegate() only works on events, e.g. clicks, mouseovers, focuses, etc. There is a concept in Javascript called "bubbling". This means that, unless you explicitly say otherwise, every event will "bubble" its way up the DOM tree and will be triggered on every element in the tree. This means that you can use a common ancestor element to "trap" all events of a particular type on child elements.

This will not work, as I understand it, on the pajinate plugin, because it does not use events. I believe it modifies the document at the moment of the call.

You need to use a callback function to call $('#talent_paging').pajinate() each time the ajaxform has finished its work:

$(function() { 
    var options = {
        target:'#talent_paging',
        success: function() {
            $('#talent_paging').pajinate({
                num_page_links_to_display : 4,
                items_per_page : 15,
                nav_label_first : '«',
                nav_label_prev : '<',
                nav_label_next : '>',
                nav_label_last : '&raquo;'
            });
        }
    }

    $('#search_talent').ajaxForm(options); 
});

Note that this code is not excellent in terms of optimisation, but it's hard to do that without seeing your base HTML.