[Résolu] Icrustar filtros en un boton modal de bootstrap

[Auteur]

Publications

[Rafael Corts]

Hola Nigel, quiero en los filtro de una taxonomía aplicar un boto flotante de bootstrap. En la versión mobil aparecen todas las actividades y es un listado muy largo, entonces lo que estoy intentando hacer es poner las taxonomías en un boton flotante para que el usuario si quiere aplicar un filtro active el boton flotante y seleccione la taxonomía que quiera.
En principio me funciona bien, el problema que me encuentro es que cuando selecciono una de las opciones de las taxonomía debería cerrar la ventana flotante, ¿como puedo aplicar la función en cada undo de las taxonomías para que cuando seleccione una también me cierre la ventana Modal y aplique el filtro?.
Saludos.
Rafa Corts

[Nigel]

Hola Rafa

Tendrás que añadir un poco de JS al View para cerrar el modal al pinchar el filtro.

En este ejemplo tengo una taxonomía "status" y el modal tiene id="#myModal" que debes editar:

( function( $ ) {
	$( document ).ready( function(){
		$('input[name="wpv-status[]"],input[name="wpv-status[]"]+label').on('click', function(){
        $("#myModal").modal('hide');});
    });
})( jQuery );

[Rafael Corts]

Hola Nigel no me funciona, cuando se encuentra la taxonomía activa muestra este codigo:

<input type="radio" id="activitat-bijuteria-i-complements" class="autor_1 js-wpv-filter-trigger form-check-input" name="wpv-activitat" value="bijuteria-i-complements" checked="checked">

El que diferencia si esta activo o no es el (checked="checked") como lo podría integrar en la función que me has pasado?
El ejemplo esta en esta url:
lien caché
Saludos.
Rafa Corts

[Nigel]

OK, pensaba que mostraba el filtro como checkboxes, el HTML para radios es distinto.

Entonces requiere poco cambio:

 function( $ ) {
    $( document ).ready( function(){
        $('input[name="wpv-activitat"],input[name="wpv-activitat"]+label').on('click', function(){
        $("#exampleModal").modal('hide');});
    });
})( jQuery );

[Rafael Corts]

Hola Nigel, no se por que motivo no me llega a entrar dentro de la función que me indicas,
aquí puedes ver un ejemplo. lien caché
Saludos.
Rafa Corts

[Nigel]

Disculpe Rafa

Veo un error en la página, por que falta un '(' al principio del código:

( function( $ ) {
    $( document ).ready( function(){
        $('input[name="wpv-activitat"],input[name="wpv-activitat"]+label').on('click', function(){
        $("#exampleModal").modal('hide');});
    });
})( jQuery );

Al copiar y pegar la muestra se pierdó.

[Rafael Corts]

Hola Nigel, muchas gracias ahora si que funciona, pero he observado que cuando lo utilizo dos veces, la segunda vez deja de funcionar, no se si es por los parámetros de búsqueda que se quedan en la URL?
Saludos.
Rafa Corts

[Nigel]

Hola Rafa

Todavía no has arreglado el código como te dije...

[Rafael Corts]

Hola Nigel si lo he cambiado, prueba de borrar la cache por que he dejado fuera el botón de reset y en la imagen tuya no se be.

Saludos.
Rafa Corts

[Nigel]

Ahora lo veo. Creo que habra falta re-iniciar el código con el evento personalizado de Views que ocure después de actualizar los resultados ("js_event_wpv_parametric_search_results_updated"):

( function( $ ) {
	$( document ).on( 'ready js_event_wpv_parametric_search_results_updated', function(){
        $('input[name="wpv-activitat"],input[name="wpv-activitat"]+label').on('click', function(){
        $("#exampleModal").modal('hide');});
    });
})( jQuery );