2012-09-17 9 views
5

Estoy usando el plugin infinito (infinite-scroll) con el isótopo jQuery y me preguntaba si es posible modificar la ruta con parámetros de consulta personalizados a medida que el usuario se desplaza por la página para ver más elementos.Infinite scroll plugin modifica la ruta con la consulta personalizada

Hay una manera de acceder a la ruta y modificar uno de los parámetros de consulta. Está llegando al camino correcto por primera vez devolviendo el primer conjunto de elementos y después de eso está llegando a las siguientes páginas, 1,2 3 está bien pero usando los mismos parámetros de consulta que utilicé por primera vez, solo estoy actualizando el número de página.

quisiera modificar uno de los parámetros al golpear la página 3 o 4 con algo como esto:

var customPath = path + "?type=items&category=clothes&pageNumber="; 

¿estoy acercando a mal?

Aquí está mi código:

$container.infinitescroll({ 
    navSelector: '#page_nav', // selector for the paged navigation 
    nextSelector: '#page_nav a', // selector for the NEXT link (to page 2) 
    itemSelector: '.element', // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more categories to load.', 
     msgText: "<em>Loading the next set of categories...</em>", 
     img: 'http://i.imgur.com/qkKy8.gif' 
    }, 
    pathParse: function (path, nextPage) { 
     var customPath = path + "?type=items&category=all&pageNumber="; 
     path = [customPath, '#contaner']; 
     return path; 
    } 
}, 
// call Isotope as a callback 
function (newElements) { 
    $container.isotope('appended', $(newElements)); 
}); 
+0

su customPath es sintaxis js ilegal. no puedes tener "zapatos" dentro de comillas dobles como esa. simplemente elimine las comillas dobles y debería estar bien. ('& category = zapatos &') no creo que hayas dado suficiente información para que lo entienda. ¿Estás diciendo que quieres cambiar la categoría de "ropa" a "zapatos" cuando el usuario llega a la página 3? ¿Eso significa que quiere permanecer en la página 3 de la ropa en lugar de la página 3 de los zapatos? ¿Qué es exactamente lo que estás tratando de hacer? – Ringo

+0

Lo siento, fue un error de mi lado, eliminé las comillas. Inicialmente, cuando el usuario ve la página, hay 30 elementos en la página de diferentes categorías. Ahora hay un botón en la página y cuando el usuario hace clic en él, los elementos se filtran y solo se muestran los de la ropa de la categoría. Ahora, cuando el usuario se desplaza hacia abajo, necesito obtener los siguientes 30 elementos, pero necesito modificar la consulta de ruta, por lo que solo obtendré elementos de ropa de categoría en lugar de obtener todos los artículos. –

+1

no sé lo suficiente sobre infinite-scroll para responder, pero esta es una pregunta con una respuesta que podría ayudar. http: // stackoverflow.com/questions/11397648/infinite-scroll-pathparse-for-reverse-wordpress-comments – Ringo

Respuesta

7

Ok por lo que tenía que hacer un pequeño programa pero tengo trabajo para mis necesidades, gracias a Rich por dirigirme a la pregunta relacionada.

he añadido algunas propiedades adicionales a la jquery.infinitescroll.js prototipo aquí:

//line 67 
$.infinitescroll.prototype = { 
     //My custom parameters 
     pageType: "&type=items", 
     categoryParam: "&category=shoes", 
     /* 
      ---------------------------- 
      Private methods 
      ---------------------------- 
      */ 

A continuación, dentro de la función llamada:

retrieve: function infscr_retrieve(pageNum) {} 

hay una variable:

desturl = path.join(opts.state.currPage) 

Se ha cambiado a

desturl = path.join(opts.state.currPage + $.infinitescroll.prototype.pageType + $.infinitescroll.prototype.categoryParam); 

Esto agregará los parámetros de consulta adicionales al final de la desturl.

Luego de que la página donde se tiene JavaScript que puede hacer algo como esto:

$('#filters a').click(function() { 
    $.infinitescroll.prototype.pageType = "&type=products" ;     
    $.infinitescroll.prototype.pageType = "&category=clothes";       
    return false; 
}); 

Esto actualizará los parámetros de consulta de la página siguiente con ustedes consultas personalizadas.

Espero que esto ayude a alguien.

Cuestiones relacionadas