Question

I have a page which displays multiple blocks with results details. Inside each block I have some <a> tags with thickbox jQuery plugin attached: class="thickbox"

Here is an example of one kind of ampersant tag:

<a class="thickbox" title="Please Sign In" href="userloginredir.php?height=220&width=350&deal=3">

Problem comes when I added a jQuery pagination to the page because of too many results displaying on the page. The div component with the results inside is updated through ajax load() event.

Below is the pagination script:

$(document).ready(function(){
    //References
    var pages = $("#menu_deals li");
    var loading = $("#loading_deals");
    var content = $("#content_deals");

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };


    //Manage click events
    pages.live( click ,function(){
        //show the loading bar
        showLoading();

        //Highlight current page number
        pages.css({ background-color  :   });
        $(this).css({ background-color  :  yellow });

        //Load content
        var pageNum = this.id;
        var targetUrl = "ajax_search_results.php?page=" + pageNum + "&" + $("#dealsForm").serialize() + " #content_d";
        content.load(targetUrl, hideLoading);
    });

    //default - 1st page
    $("#1").css({ background-color  :  yellow });
    var targetUrl = "ajax_search_results.php?page=1&" + $("#dealsForm").serialize() + " #content_d";
    showLoading();
    content.load(targetUrl, hideLoading);
});

When I added pagination (code above), the thickbox events are not recognized anymore and instead of poping out a window with the login form inside it opens the results in new page (is acting like clicking on a normal link) From my jQuery knowledge this means that the components are not defined in the DOM because the content is updated after document ready triggered.

I m trying to bind the load event with something like this:

content.bind( load , ???);

But I don t know how to pass the load params, targetUrl and the callback function hideLoading, when binding the load event.

Please help me out in this matter, it already took me more time than possible allowed.

Answer 1

tb_init( a.thickbox, area.thickbox, input.thickbox );//pass where to apply thickbox

call that in the callback of the ajax.

Answer 2

You have used the hideLoading function as the callback, instead replace it with this where you intialise the thickbox and also hide the loading.

content.load(targetURL, function(){ tb_init( a.thickbox ); hideLoading(); });

友情链接