Javascript on AJAX with jquery

Question

-

how can I handle it, to get Javascript is working after the Ajax call?

On my page (wordpress) - I have all posts on startpage. I have built in a filtersystem with which the user can filter the posts after specific stuff - like "newest, most viewed, highlighted"

I use this function beneath to make this filter work:

 <script type="text/javascript">
    $(document).ready(function(){
    $.ajaxSetup({cache:false});
    $("#new").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 visitior clicks on the button "new" and the posts are filtered - only the newest posts show up. But I use Javascript to have the post count of disqus, lazy image loader, etc. these JS Files are not loaded on the filtered posts. (taxonomy.php)

this here is e.g. an JS File, which would be neccessary to make lazy loader available to the filtered posts:

http://myurl/../plugins/bj-lazy-load/js/bjll.min.js?ver=0.4.0

The question is: How can I tell in the function above, to also use the JS script on the new loaded "filtered" page.

It's a bit like this: Use Ajax() function in Jquery to load PART of an external page into div

but I didn't get it to work....

thanks a lot!

Can you rephrase your question(be more precise)? I don't get what you want to achieve. — Grzegorz Kaczan
– Grzegorz Kaczan, Commented Jul 21, 2012 at 13:28

Jorge Loureiro · Accepted Answer · 2012-07-21 13:36:11Z

0

I'm not sure I understand your question. Are you trying to load a script after loading a particular content in a div?

If it is try this:

$(function(){
    $.ajaxSetup({cache:false});

    $("#new").click(function(){
        var $this = $(this);
        var $PostboxWrapper = $(".postbox_wrapper");

        var post_id = $this.attr("rel")

        //I think you want load something like a loading .gif in taht point. Right?
        $PostboxWrapper.html(
            "<span class='filter_posts'>" + 
            "   <img src='<?php bloginfo ('template_directory'); ?>/images/287.gif'>" +
            "</span>"
        );

        $(".postbox_wrapper").load(jQuery(this).attr("href"), function()
        {
            $.getScript(
                "http://yourUrl/../plugins/bj-lazy-load/js/bjll.min.js?ver=0.4.0",
                function(data, textStatus, jqxhr) {
                    console.log('Load was performed.');
                }
            );
        })
        return false;
    });
});

answered Jul 21, 2012 at 13:36

Jorge Loureiro

4583 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ad2003 Over a year ago

hi Jorge - thanks for the reply! Yes - exactly. I try to load the js into the ajax loaded page. I am trying your code - but it's loading the complete page into the div

ad2003 Over a year ago

the js should just be passed to the new loaded page...I guess this getScript stuff is the right way. But it doesn's work

Collectives™ on Stack Overflow

Javascript on AJAX with jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related