CODEWITHSUNDEEP
jqueryajax
Mateusz Winnicki
Mateusz Winnicki

Reputation: 151

rerun scripts after ajax load

I'm trying to load a content into a div with this:

 $(document).ready(function(){


    $(".produkty").click(function(){
        var post_id = $(this).attr("href");    
        $("#single_product_box").load(post_id + " #main" );
        return false;
     });
});

The other scripts I use are here: 

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/js/jcarousellite_1.0.1.min.js" type="text/javascript"></script>
   <script>


   $(function() {
       $(".anyClass").jCarouselLite({
         btnNext: ".next-any",
         btnPrev: ".prev-any"
       });
   });
   $(function() {
       $(".anyClass-2").jCarouselLite({
         btnNext: ".next-any2",
         btnPrev: ".prev-any2"

       });
   });

Everything is fine, but after first load it stopped working. I've tried to use something like this:

 $.ajax({
    url: '$post_id',
    cache: false,
    beforeSend: function (data) {
        $('#single_product_box').html("Loading...");
    },
    success: function (data) {
        if (data!='error'){
            $('#single_product_box').html(data);
        }else{
            $('#single_product_box').html("<span style='color:red;'>Error!</span>");
        }
    },
    error: function (data) {
        $('#single_product_box').html("<span class='error'>Error!</span>");
    }
});

but I cannot make it work again, I even tried to put the scripts into loaded content, but it disappears as well. I just had no more ideas.

Upvotes: 0

Views: 2932

Answers (2)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

The first step would be to have the same result as .load, but with AJAX. First, your url should be your variable, not a string with a PHP variable. Then on complete, you need to find the target :

$.ajax({
    url: post_id, //Your URL should be your variable
    cache: false,
    beforeSend: function (data) {
        $('#single_product_box').html("Loading...");
    },
    success: function (data) {
        if (data!='error'){
            //Have to target you element.
            $('#single_product_box').html($(data).find('#main')); //Here i'm not sure if you should add .html();
        }else{
            $('#single_product_box').html("<span style='color:red;'>Error!</span>");
        }
    },
    error: function (data) {
        $('#single_product_box').html("<span class='error'>Error!</span>");
    }
});

Now that you have the content, you have the same problem about the carrousel. Just retrigger the carousel!

To do that, you'll have to change the dataType to text, because your page is reloading jQuery. When you reload it, it remove the prototype method jCarouselLite and can't access it.

After appending the HTML, you can use the same line of code you are using on the DOM ready!

Here the final code

$.ajax({
    url: post_id, //Your URL should be your variable
    cache: false,
    dataType: 'text', //Passing text here will prevent the script from runnig. Script were overriding jCarousel and couldnt active it again
    beforeSend: function (data) {
        $('#single_product_box').html("Loading...");
    },
    success: function (data) {
        if (data!='error'){
            //Have to target you element.
            var html = $(data).find('#main');
            $('#single_product_box').html(html);
            
            //Retrigger the carousel!
            $(".anyClass-2").jCarouselLite({
                btnNext: ".next-any2",
                btnPrev: ".prev-any2"
                
            });
        }else{
            $('#single_product_box').html("<span style='color:red;'>Error!</span>");
        }
    },
    error: function (data) {
        $('#single_product_box').html("<span class='error'>Error!</span>");
    }
});

Upvotes: 1

Jack
Jack

Reputation: 9388

As I said in the comments, it looks like jQuery is being loaded multiple times (which is another issue - you need to look into cleaning up your mark up). All of the plugins that register prior are lost (because they use the loaded $.fn, which is overwritten when a later jQuery is loaded...)

I see the following your HTML

Line 32
<script type='text/javascript' src='http://usb-solutions.pl/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>    

Line 40
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Line 323
<script type="text/javascript"> 
    $.getScript("http://usb-solutions.pl/wp-content/themes/usb-solutions/js/jcarousellite_1.0.1.min.js");
    $.getScript("//code.jquery.com/jquery-1.11.0.min.js");
</script>

Upvotes: 0

Related Questions