नई AJAX सामग्री के साथ अनंत स्क्रॉल रीसेट कैसे करें

Question

मेरे मुखपृष्ठ पर मेरे पास अनंत स्क्रॉल का उपयोग करने वाली पोस्ट्स का एक लूप है। उपयोगकर्ता अजाक्स खोज जैसे AJAX का उपयोग करके अन्य लूप के साथ उस लूप को प्रतिस्थापित कर सकता है। मेरा मुद्दा अनंत स्क्रॉल केवल पहली बार काम करता है जब यह मुख्य लूप के लिए ट्रिगर किया जाता है तो यह फिर से काम नहीं करेगा जब कोई नया लूप मुख्य स्थानांतरित करता है। प्रत्येक बार जब एक नया पाश पुराना बदलता है तो निम्न फ़ंक्शन पुनः लोड हो जाता है। तो मैं अनंत स्क्रॉल रीसेट कैसे कर सकता हूं और हर बार एक नया लूप कहलाता हूं?

var href = 'first'; 
$(document).ready(function() { 
    $('#boxes').infinitescroll({ 
     navSelector: '.infinitescroll', 
     nextSelector: '.infinitescroll a', 
     itemSelector: '#boxes .box', 
     loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif', 
     loadingText: 'Loading...', 
     donetext: 'No more pages to load.', 
     debug: false 
    }, function(arrayOfNewElems) { 
     $('#boxes').masonry('appended', $(arrayOfNewElems)); 
     if(href != $('.infinitescroll a').attr('href')) { 
      href = $('.infinitescroll a').attr('href'); 
     } 
    }); 
}); 

मैं एक WordPress साइट पर Pual Irish infinite scroll plugin के नवीनतम संस्करण 2.0b2.120519 उपयोग कर रहा हूँ।

Answer 1

मैं 100% सुनिश्चित नहीं हूं कि आप जिस प्लगइन का उपयोग कर रहे हैं, लेकिन मैंने नवीनतम वितरण में जांच की है और आपको यह काम करने के लिए दो विधियों को करने की आवश्यकता है।

सबसे पहले, अपने AJAX फ़ंक्शन में, आपको destroy the session on success की आवश्यकता है।

$.ajax({ 
    url: 'path/to/something.ext', 
    success: function(data){ 
    //call the method to destroy the current infinitescroll session. 
    $('#boxes').infinitescroll('destroy'); 

    //insert the new data into the container from the_loop() call 
    $('#boxes').html(data); 

    //reinstantiate the container 
    $('#boxes').infinitescroll({      
     state: {            
     isDestroyed: false, 
     isDone: false       
     } 
    }); 

    //call the methods you need on the container again. 
    $('#boxes').infinitescroll({ 
     navSelector: '.infinitescroll', 
     nextSelector: '.infinitescroll a', 
     itemSelector: '#boxes .box', 
     loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif', 
     loadingText: 'Loading...', 
     donetext: 'No more pages to load.', 
     debug: false 
    }, function(arrayOfNewElems) { 
     $('#boxes').masonry('appended', $(arrayOfNewElems)); 
     if(href != $('.infinitescroll a').attr('href')) { 
     href = $('.infinitescroll a').attr('href'); 
     } 
    }); 
    } 
}); 

आप भी इसे एक समारोह में यह करने के लिए बाँध कर सकता है, और अनबाइंड/बजाय कोड का बहुत दोहराने की rebind, लेकिन कोड मैं रेखांकित किया है एक प्रति + पेस्ट समाधान होना चाहिए।

Answer 2

मुझे लगता है कि ऐसा कर सकता है। मेरे पृष्ठ में , मैं अलग-अलग पेज लोड करने के लिए अलग-अलग तत्व क्लिक करना चाहता हूं। और ये पृष्ठ infinitescroll भी होंगे।

 // creation 
     case 'object': 

      this.each(function() { 

       var instance = $.data(this, 'infinitescroll'); 

      /* if (instance) { 

        // update options of current instance 
        instance.update(options); 

       } else { 
      */ 
       $(this).removeData("infinitescroll"); 

       // initialize new instance 
       $.data(this, 'infinitescroll', new $.infinitescroll(options, callback, this)); 

     // } 

      }); 

हर बार मैं तारीख को हटाने और एक नया infinitescroll बनाएँ: तो मैं नीचे स्रोत को संशोधित। तो हर बार और हर elment अच्छा है।

Answer 3

कॉल

$('#boxes').infinitescroll({      
       state: {            
        isDuringAjax: false, 
        isInvalidPage: false, 
      isDestroyed: false, 
      isDone: false, // For when it goes all the way through the archive. 
      isPaused: false, 
      currPage: 1 

       } 
      }); 
then 
$('#boxes').infinitescroll({ 
     navSelector: '.infinitescroll', 
     nextSelector: '.infinitescroll a', 
     itemSelector: '#boxes .box', 
     loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif', 
     loadingText: 'Loading...', 
     donetext: 'No more pages to load.', 
     debug: false 
    }, function(arrayOfNewElems) { 
     $('#boxes').masonry('appended', $(arrayOfNewElems)); 
     if(href != $('.infinitescroll a').attr('href')) { 
     href = $('.infinitescroll a').attr('href'); 
     } 
    }); 

यह काम करता है के लिए

Answer 4

वर्क्स आशा है कि v2.0b.120520

$('#boxes').infinitescroll('binding','unbind'); 
$('#boxes').data('infinitescroll', null); 

क्रेडिट: http://www.powerhour.at/devblog/reset-jquery-infinitescroll-after-ajax-call/