url - ajax loaded but no JS

Question

I have this url to call the taxonomy.php by pressing the button with the code beneath to show filtered posts:

http://myurl/?meta_key=post_views_count&orderby=meta_value&order=ASC

This is the JS I am using:

    $(document).ready(function(){
$.ajaxSetup({cache:false});
$("#hot a").click(function(){

    var post_id = $(this).attr("rel")
    $(".postbox_wrapper").html('<span class="filter_posts"><img src="<?php bloginfo ('template_directory'); ?>/images/287.gif"></span>');
    $(".postbox_wrapper").load(jQuery(this).attr("href") + " .postbox_wrapper")
    return false;
});

});

The call works perfectly - the content show up without pagereload - as I wish.

The problem is, that JS is not loaded on the ajaxloaded pages and I really don't get it to load. I tried out many versions, I found on stackexchange, but nothing worked out.

For example this needs to be loaded into the ajaxed call: http://myname.disqus.com/count.js?ver=3.4.1

Has anybody an idea?

Thanky you very much.

AD

Answer 1

Try this code in your complete callback of the load function:

$(".postbox_wrapper").load(
    jQuery(this).attr("href") + " .postbox_wrapper",
    function(response, status, xhr) { // complete callback

        // create a empty div
        var div = document.createElement('div');
        // fill div with response
        div.innerHTML = response;
        // take correct part of the response
        var ref = $($(div).find('.postbox_wrapper').html());
        // filter response for script tags
        ref.filter('script').each(function () {
            // execute the scripts
            $.globalEval(this.text || this.textContent || this.innerHTML || '');
        });
    }
});

I would also also recommend that you add a error message if the call fails. See example 2 on http://api.jquery.com/load/

I had a hard time to figure that out, I tried all the answers found on stackoverflow. Finally I found this german site. There you can see the full code: http://labor.99grad.de/flash/agentur/wiesbaden/jquery/script-tag-bei-ajax-response-ausfuhren/

Answer 2

I ended up with this code:

$.ajaxSetup({cache:false});
$("#fokus a").click(function(){

    var post_id = $(this).attr("rel");
    $(".postbox_wrapper").html('<span class="filter_posts"><img src="<?php bloginfo ('template_directory'); ?>/images/287.gif"></span>');
    $(".postbox_wrapper").load((jQuery(this).attr("href") + " .postbox_wrapper"), function() {
    //$.globalEval('http://check.disqus.com/count.js?ver=3.4.1');
        $.getScript("http://check.disqus.com/count.js?ver=3.4.1", function() {
            //alert('first Load was performed.');
        },false);
    });
    //alert('second Load was performed.');
    return false;
    });

This works so far. Thank you for your help!

AD