Autor
|
Tema: filtrar contenido con jquery (Leído 6,451 veces)
|
gAb1
Desconectado
Mensajes: 731
|
Tengo una función con JQuery Ajax que recibe contenido de PHP enviado variables, depende de las variables y el contenido de estas se recibiran unas cosas u otras. Con la misma función (un on('click')) tengo que declarar y asignar valores a las variables que se envian, dandoles el valor del elemento que hizo click, mayormente checkboxes. Lo único que se me ocurre es hacer un if para cada checkbox: if ($(this).is(':checkbox') { //comprobar la clase del checkbox para saber que datos enviar if ($(this).attr('class') == 'filter1') { var filtro1 = $(this).val(); } if ($(this).attr('class') == 'filter2') { var filtro2 = $(this).val(); } if ($(this).attr('class') == 'filter3') { var filtro3 = $(this).val(); } }
Y asi sucesivamente... ¿Hay alguna manera más eficiente de hacer esto? Tambien tengo que comprobar que si se han checkeado dos checkboxes o mas de la misma clase se envien los valores como array o algo. Agradeceria cualquier ejemplo. PHP se encarga del resto, de crear los condicionales "AND" y agregarlos al "SELECT" de la consulta mysqli. Gracias!
|
|
« Última modificación: 16 Noviembre 2015, 06:24 am por gAb1 »
|
En línea
|
|
|
|
MinusFour
|
No es necesario que guardes los valores en variables, al final la información tiene que ser serializada y jQuery tiene un metodo para eso.
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
Pues entonces lo he estado haciendo mal, aunque funcionando: $('body').on('click', '.click, :checkbox, .pag_link', function() { // search, filters and change page buttons var self = this; if ($('#res_prop').is(':checked')) { var use = $('#res_prop').val(); } else if ($('#com_prop').is(':checked')) { var use = $('#com_prop').val(); } else { $('p.error').show(); die(); } if ($(self).is(':checkbox')) { $(self).on('change', function() { if ($(self).attr('class') == 'filter1' || $('.filter1').is(':checked')) { if ($('.filter1').is(':checked')) var type = $(self).val(); // maybe should be an array else var type = null; } else var type = null; if ($(self).attr('class') == 'filter2' || $('.filter2').is(':checked')) { if ($('.filter2').is(':checked')) var status = $(self).val(); // maybe should be an array else var status = null; } else var status = null; if ($(self).attr('class') == 'filter3' || $('.filter3').is(':checked')) { if ($('.filter3').is(':checked')) var bhk = $(self).val(); // maybe should be an array else var bhk = null; } else var bhk = null; }); } else { var type = status = bhk = null; } if ($(self).is('.pag_link')) { if ($(self).text() == '«') var page = (parseInt($('.active').text()) - 1); else if ($(self).text() == '»') var page = (parseInt($('.active').text()) + 1); else var page = parseInt($(self).text()); } else { var page = 1; } $.ajax({ method: 'POST', url: '/search', data: { 'do': getUrlParameter('do'), 'use': use, 'type': type, 'status': status, 'bhk': bhk, 'city': $('select[name="city"]').val(), 'zone': $('select[name="zone"]').val(), 'page': page } }).done(function(data) { if ($( '#search' ).is(':visible')) $( '#search' ).hide(); if ($(self).is(':checkbox')) { var new_content = $(data).find( '#scroll-to-list' ); $( '#scroll-to-list' ).replaceWith( new_content ); } else { var new_content = $(data).find( '#search-filters, #scroll-to-list' ); $( '#results' ).html( new_content ); $( 'html, body' ).animate({ scrollTop: $( '#scroll-to-list' ).offset().top }, 1000); } }); });
No entiendo bien para que es necesario codificar estos datos, ¿es necesario hacerlo? Realmente necesito aprender a reducir el código...
|
|
« Última modificación: 16 Noviembre 2015, 14:35 pm por gAb1 »
|
En línea
|
|
|
|
MinusFour
|
var data = $('input[class^="filter"]') .add('select[name="city"]') .add('select[name="zone"]').serializeArray(); //para agregar nuevos pares: //data.push({ name : 'nombre', value : 'valor'}); $.ajax({ method: 'POST', url: '/search', data: $.param(data) }).done(function (data) { if ($('#search').is(':visible')) $('#search').hide(); if ($(self).is(':checkbox')) { var new_content = $(data).find('#scroll-to-list'); $('#scroll-to-list').replaceWith(new_content); } else { var new_content = $(data).find('#search-filters, #scroll-to-list'); $('#results').html(new_content); $('html, body').animate({ scrollTop: $('#scroll-to-list').offset().top }, 1000); } });
Si "use" puede ser "#res_prop" o "#com_prop" entonces el control debería ser un radio button. <input type="radio" name="use"> <input type="radio" name="use">
Los filtros tambien deberían tener los nombres(el atributo name) de tus variables (bhk, type, status). Es muy probable que necesites agregar page y do manualmente. (Lee el comentario que puse).
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
Si, estoy usando radio button para esos dos id. ¿Te refieres a cada checkbox ponerle el atributo name? $('input[class^="filter"]') Esto añade solo los checkboxes que estén marcados no? Entonces los ifs que tengo creados no sirven? Como sé que número de página pasar o que valor de los radio button pasar? Para todo en general, como hago eso?? Y luego en php como cojo los datos del post? Actualmente lo estaba haciendo asi: $use = isset( $_POST['use'] ) ? (int ) $_POST['use'] : ''; // int AJAX $filter_type = isset( $_POST['type'] ) ? (int ) $_POST['type'] : ''; // int AJAX $filter_status = isset( $_POST['status'] ) ? (int ) $_POST['status'] : ''; // int AJAX $filter_bhk = isset( $_POST['bhk'] ) ? (int ) $_POST['bhk'] : ''; // int AJAX $filter_city = isset( $_POST['city'] ) ? (int ) $_POST['city'] : 0; // int AJAX $filter_zone = isset( $_POST['zone'] ) ? (int ) $_POST['zone'] : 0; // int AJAX $page_number = isset( $_POST['page'] ) ? (int ) $_POST['page'] : ''; // int AJAX
Lo siento, no me entero.
|
|
|
En línea
|
|
|
|
MinusFour
|
Selecciona todos los inputs con clase que empieze como 'filter' (filter1, filter2, filter3). No te tienes que preocupar si están vacios o no. "serializeArray" debería seleccionar solo los que no esten marcados. De igual forma, necesitas agregar los radios (se serializa el que esta marcado): var data = $('input[class^="filter"]') .add('input[name="use"]') .add('select[name="city"]') .add('select[name="zone"]').serializeArray();
Mira como trabaja ".serializeArray" con "$.param": https://jsfiddle.net/19avm4rb/Para "do" y page puedes hacer lo que ya haces...
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
Ah vale ya lo entiendo mejor. Pero si tengo más de un checkbox con el mismo nombre luego en php como hago? Por ejemplo name type, un checkbox tiene el valor 1 y otro 2, ¿como manejo eso en php? Luego con IFs compruebo si se ha recibido el filtro y incluyo una condición AND al prepare, pero si son dos como hago? $filter_type = isset( $_POST['type'] ) ? (int ) $_POST['type'] : NULL; if ($filter_type != NULL) { $filter_type = 'AND t2.type = ' . $filter_type; // si se marcaron dos checkboxes de nombre type, como hago la otra condición OR? } if ($stmt = $mysqli->prepare(' SELECT t1.id, t2.* FROM ' . $table . ' t1 INNER JOIN property t2 ON t2.id = t1.id WHERE t2.use = ? ' . $filter_type . $filter_status . $filter_bhk . $filter_city . $filter_zone . ' LIMIT ?, ?'))
Para do y page usaré lo que me dijiste, el data.push. Muchas gracias! EDITO: Ya casi lo tengo: $('body').on('click', '.click, :checkbox, .pag_link', function() { var self = this; if (!$(':radio').is(':checked')) { $('p.error').show(); die(); } var data = $('input, select').serializeArray(), mode = getUrlParameter('do'), page = 1; if ($(self).is('.pag_link')) { if ($(self).text() == '«') page = (parseInt($('.active').text()) - 1); else if ($(self).text() == '»') page = (parseInt($('.active').text()) + 1); else page = parseInt($(self).text()); } data.push({ name : 'do', value : mode}); data.push({ name : 'page', value : page}); $.ajax({ method: 'POST', url: '/search', data: $.param(data) }).done(function (data) { if ($( '#search' ).is(':visible')) $( '#search' ).hide(); if ($(self).is(':checkbox')) { var new_content = $(data).find( '#scroll-to-list' ); $( '#scroll-to-list' ).replaceWith( new_content ); } else { var new_content = $(data).find( '#search-filters, #scroll-to-list' ); $( '#results' ).html( new_content ); $( 'html, body' ).animate({ scrollTop: $( '#scroll-to-list' ).offset().top }, 1000); } }); });
¿Se podrá optimizar todavía más? :
|
|
« Última modificación: 17 Noviembre 2015, 03:01 am por gAb1 »
|
En línea
|
|
|
|
MinusFour
|
Ah vale ya lo entiendo mejor. Pero si tengo más de un checkbox con el mismo nombre luego en php como hago? Por ejemplo name type, un checkbox tiene el valor 1 y otro 2, ¿como manejo eso en php? Luego con IFs compruebo si se ha recibido el filtro y incluyo una condición AND al prepare, pero si son dos como hago?
Suena a que debería ser otro filtro o si es una opción entre 1 y 2 entonces un radio. También puedes tratar los filtros como si fuera un arreglo: <input type="checkbox" name="filtros[]"> <input type="checkbox" name="filtros[]">
Y desde PHP: $filtros = $_POST['filtros']; list($filtro1, $filtro2) = $filtros; //$filtro1 == $filtros[0]; //$filtro2 == $filtros[1];
Aunque $.param transforma los "[]" en el query string, no se si PHP trabaje ese caso.
|
|
« Última modificación: 18 Noviembre 2015, 07:28 am por MinusFour »
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
Pues podría ponerlos como radio, pero me gustaría dar la opción de que elijan más de un tipo a la vez. EDITO: Si que funciona lo de meter arrays en el serializeArray() con el $.param: https://jsfiddle.net/19avm4rb/1/ En PHP se cogen como si fuera un post normal, pero tengo un problema para crear las condiciones OR. La primera (AND) funciona bien, pero ya las demás da error: if ($filter_type != NULL) { foreach ($filter_type as $type=>$value) { if ($type === 0) { $type_cond = 'AND t2.type = ' . $value; } else { $type_cond .= $type_cond . "\n OR t2.type = " . $value; } } }
MySQLi failed: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 't2.type = 2 OR t2.type = 3
LIMIT ?,' at line 5<br><br /> Debe ser un error al crear las variables o al imprimirlas dentro del prepare(), ya que están bien: SELECT t1.id, t2.* FROM for_sale t1 INNER JOIN property t2 ON t2.id = t1.id WHERE t2.USE = 1 AND t2.TYPE = 2 OR t2.TYPE = 1 OR t2.TYPE = 3 AND t2.STATUS = 0 OR t2.STATUS = 1 OR t2.STATUS = 2 AND t2.bhk = 3 OR t2.bhk = 1 OR t2.bhk = 2
Algo así es lo que quiero que haga. Lo he ejecutado y funciona perfectamente. ¿Abro mejor una pregunta en el subforo PHP?
|
|
« Última modificación: 18 Noviembre 2015, 06:55 am por gAb1 »
|
En línea
|
|
|
|
eLank0
eLhAcKeR r00Lz
Desconectado
Mensajes: 1.062
|
Buenas,
Una consulta sobre tu código, porqué pones \n dentro de una consulta SQL? No será por ahí que te tira un error?
S2
|
|
|
En línea
|
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
jquery cambio dinamico contenido con PHP
PHP
|
Carlosnuel
|
4
|
6,992
|
13 Diciembre 2009, 02:30 am
por Carlosnuel
|
|
|
[SOLUCIONADO] Cargar contenido + JQuery.Load()
Desarrollo Web
|
Shell Root
|
2
|
2,753
|
16 Noviembre 2012, 22:28 pm
por Shell Root
|
|
|
ocultar un contenido en jquery
Desarrollo Web
|
landerzx
|
2
|
1,962
|
10 Enero 2013, 18:23 pm
por landerzx
|
|
|
regex para filtrar caracteres especiales en jquery
Desarrollo Web
|
gAb1
|
2
|
3,821
|
20 Abril 2016, 16:28 pm
por gAb1
|
|
|
Google afirma que es incapaz de filtrar todo el contenido pirata de manera ...
Noticias
|
wolfbcn
|
0
|
1,873
|
4 Diciembre 2017, 01:14 am
por wolfbcn
|
|