jquery ajax problem

Question

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.

Answer 2

Are you using IE prior to IE8? If so, that could be the problem — you have what used to be a syntax error (or at least ambiguity), but AFAIK only IE will care about it:

$(function() { 
    var options = { 
        target:'#talent_paging', // <=== This comma is the error
    };
    $('#search_talent').ajaxForm(options); 
});

The grammar for object literals didn't until recently explicitly allow a trailing comma. SpiderMonkey (Firefox), V8 (Chrome), and whatever Safari and Opera use don't care, but prior to JScript 6 (IE8), JScript (IE) throws a parsing exception on the comma and your script dies. A similar but different thing happens if you do it with an array literal:

var a = [1, 2, 3, 4, 5, ];

IE (JScript) creates an array with six (yes, six) entries, the last of which is undefined. This isn't unreasonable, because we were always allowed to have blank entries (e.g., var a = [1, , 3];) and those entries defaulted to undefined, but everyone else went the other way and created an array with five entries.

The recent 5th edition specification clears this up (yay!). The trailing comma is explicitly allowed in object literals (Section 11.1.5) and array literals (Section 11.1.4), and in the case of array literals it doesn't add to the length of the array (a.length above is 5).

The latest released version of IE uses JScript 6, which now allows the trailing comma on object literals, but still has the issue with the extra entry at the end of the array. Hopefully now that ECMAScript 5 nailed that down, the next version of Microsoft's JScript will change that, although it has to be a harder sell for them...