jQuery desplazamiento infinito "reset"

Question

estoy usando el plug-in de desplazamiento infinita jQuery para un sitio web()

Todo está bien, excepto que mi página es una búsqueda así que ... lo que sucede es:

1) vas a la página, el buscador te localiza automáticamente y te devuelve una lista de elementos (por ejemplo, barras) a tu alrededor ... Se necesita desplazamiento infinito para evitar la paginación de esta lista. Todo funciona hasta aquí ... excepto el hecho de que pude alcanzar la "página de fin de infinito" y el plugin "se desvincula" del rollo.

2) Ahora ... cuando desee insertar manualmente una dirección en el texto de entrada, puede hacerlo ... escriba su dirección, y presione enter ... y con ajax (no actualización de página) ... buscaré lat/lon, ubicaré la dirección, cambiaré el enlace de navegación para el desplazamiento infinito ... y me siento tonto, PERO no puedo encontrar la forma de "reactivar" "o" volver a vincular "el complemento al evento .... Por lo tanto, mis" nuevos resultados de búsqueda "no tienen una nueva instancia de" desplazamiento infinito "...

(la página" dividir "devuelve correctamente una json tratando de cambiar "página = NÚMERO")

Esto es lo que sucede en la consola:

["math:", 0, 468] 
jquery.infinitescroll.min.js:20["heading into ajax", 
Array[2] 
    0 : "/ajax/getCoworkings/?page=" 
    1 : "&latitude=52.5234051&longitude=13.4113999&distance=12" 
    length : 2 
    __proto__ : Array[0] 
] 
jquery.infinitescroll.min.js:20["Using JSON via $.ajax() method"] 
jquery.infinitescroll.min.js:20["Error", "end"] 
jquery.infinitescroll.min.js:20["Binding", "unbind"] 

Después de la "desvinculación" No soy capaz de unirse de nuevo y por lo tanto tienen el rollo Infinit en mis próximos resultados de búsqueda ........

Answer 1

Resuelto.

He añadido:

if (xhr == 'destroy') { 
    $.removeData(this.element[0]); 
} 

en función

_error: function infscr_error(xhr) { 

en la línea 228.

Probablemente no es la mejor forma de hacer esto, pero es exactamente lo que necesitaba.

y lo que hago -now- es básicamente lo que usted sugiere:

1.

$("#myelement").infinitescroll("destroy"); 

2.

$("#myelement").infinitescroll(WHATEVER_SETTINGS); 

... sin la necesidad de modificar el "pathParse "valores
pero eso es porque estoy modificando los selectores (next/nav)
antes, con jQuery.

Answer 2

que Presumiendo creado desplazamiento infinito como :

//This will initiate with default values for example purpose 
$("#myelement").infinitescroll(); 

Podría entonces simplemente no destruir por completo la instancia:

$("#myelement").infinitescroll("destroy"); 
//Reset anything else that may cause the page to blow up here 
//And then create a new instance with different path variables: 
//Note, obviously you'll be initializing it with custom selectors/settings etc so include those as well 
$("#myelement").infinitescroll({pathParse:["/ajax/getCoworkings/?page=","&latitude=52.5234051&longitude=13.4113999&distance=12"]}); 

Essentia Si no define pathParse, el script intenta resolverlo por sí mismo. Si lo haces, entonces usa lo que proporcionas. No es muy elegante, más de un truco que cualquier otra cosa que no sea el cambio de ruta. En este momento, Pular no es estrictamente compatible con el desplazamiento infinito.

Answer 3

No se menciona aquí, pero (en mi versión de Infinite Scroll de todos modos) también tiene que establecer dos variables para que la recreación de InfiniteScroll funcione. También debes volver a vincularlo. Aquí está el código:

$('#cardContainer').infinitescroll('destroy'); // Destroy 

// Undestroy 
$('#myContainer').infinitescroll({      
    state: {            
     isDestroyed: false, 
     isDone: false       
} 
}); 

InitInfiniteScroll(); // This is a wrapper for the standard initialization you need 

// Re-initialize 
$('#myContainer').infinitescroll('bind'); 

Answer 4

El ítem 3)

if (xhr == 'destroy') { 
    $.removeData(this.element[0]); 

}

no funcionó tan bien. Al menos con la última versión. La mampostería se queja de 'no puede llamar a métodos en mampostería antes de la inicialización; intentado llamar al método 'recarga''

$container.css('display','none'); 
$container.html(htmlOutput).imagesLoaded(function(){ 
      $container.css('display','block'); 
      $container.masonry('reload'); 
}); 

// I have to do this in order to "reset" the stage 
$container.infinitescroll('destroy'); // Destroy 

// Undestroy 
$container.infinitescroll({      
    state: { 
     isDestroyed: false, 
     isDone: false 
    } 
}); 

// Init. 
$container.infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
    nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.tile',  // selector for all items you'll retrieve 
    loading: { 
    finishedMsg: '', 
    msgText: '', 
    img: url + 'img/ajax-loader.gif' 
    } 
}, 
// trigger Masonry as a callback 
function(newElements) { 
    // hide new items while they are loading 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    // ensure that images load before adding to masonry layout 
    $newElems.imagesLoaded(function(){ 
     // show elems now they're ready 
     $newElems.animate({ opacity: 1 }); 
     $container.append($newElems).masonry('appended', $newElems, true); 
    }); 
} 
); 

// Re-initialize 
$container.infinitescroll('bind'); 

Answer 5

que he tenido que hacer algo similar ya que mi código actualiza la URL de destino en función de la acción del usuario en lugar de depender de un contador.

Terminé implementando el siguiente método de reinicio que puedo llamar usando $ container ('reset');

reset: function infrscr_reset() { 
     this.options.state.isDone = false; 
     this.options.state.isDuringAjax = false; // I needed this, others may not 
     this._resetmsg(); 
     this._binding('bind'); 
    }, 

También implementé un método privado para restablecer el mensaje emergente ya que de lo contrario continuaría dando una notificación de "no más páginas".

_resetmsg: function infscr_resetmsg() { 
     var opts = this.options; 
     opts.loading.msg = $('<div id="infscr-loading"><img alt="Loading..." src="' + opts.loading.img + '" /><div>' + opts.loading.msgText + '</div></div>'); 
     this._debug('Reset loading message'); 
    }, 

Answer 6

infinitescroll almacena todos sus datos de instancia en el propio elemento a través de$.data, por lo que la eliminación de datos de instancia que es la única manera segura de que infinitescroll totalmente reinicio.

Estas dos líneas deberían hacer el truco de destruir limpiamente infinitescroll.

$elem.infinitescroll('destroy'); 
$elem.data('infinitescroll', null); 

// ahora el desplazamiento infinito puede reiniciarse normalmente sin ningún conflicto o desperfecto de la instancia anterior.

NOTA de que a partir de junio de 2012, ninguna de las respuestas anteriores trabajó para mí con la última versión del jquery.infinitescroll (v2.0)

Answer 7

se puede hacer esto con sólo añadir el siguiente código en su desplazamiento infinito declaración.

errorCallback : function() { 
    isc.getContainer().infinitescroll('destroy'); 
    $.removeData(this); 
}, 

Nota no en el archivo infinitescroll.js, debe ser personalizada en su declaración de desplazamiento infinito.

Answer 8

Después de probar las otras soluciones en vano, esto funcionó para mí:

$(window).unbind('.infscr'); 

Referencia 1/4 abajo los documentos: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/