elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  filtrar contenido con jquery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: filtrar contenido con jquery  (Leído 4,551 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
filtrar contenido con jquery
« en: 16 Noviembre 2015, 06:11 am »

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:

Código
  1. if ($(this).is(':checkbox') {
  2.    //comprobar la clase del checkbox para saber que datos enviar
  3.    if ($(this).attr('class') == 'filter1') {
  4.        var filtro1 = $(this).val();
  5.    }
  6.    if ($(this).attr('class') == 'filter2') {
  7.        var filtro2 = $(this).val();
  8.    }
  9.    if ($(this).attr('class') == 'filter3') {
  10.        var filtro3 = $(this).val();
  11.    }
  12. }
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
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.463


I'm fourth.


Ver Perfil WWW
Re: filtrar contenido con jquery
« Respuesta #1 en: 16 Noviembre 2015, 06:33 am »

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 Desconectado

Mensajes: 731


Ver Perfil
Re: filtrar contenido con jquery
« Respuesta #2 en: 16 Noviembre 2015, 12:30 pm »

Pues entonces lo he estado haciendo mal, aunque funcionando:

Código
  1.    $('body').on('click', '.click, :checkbox, .pag_link', function() { // search, filters and change page buttons
  2.  
  3.        var self = this;
  4.  
  5.        if ($('#res_prop').is(':checked')) {
  6.            var use = $('#res_prop').val();
  7.        }
  8.        else if ($('#com_prop').is(':checked')) {
  9.            var use = $('#com_prop').val();
  10.        }
  11.        else {
  12.            $('p.error').show();
  13.            die();
  14.        }
  15.  
  16.        if ($(self).is(':checkbox')) {
  17.            $(self).on('change', function() {
  18.                if ($(self).attr('class') == 'filter1' || $('.filter1').is(':checked')) {
  19.                    if ($('.filter1').is(':checked'))
  20.                        var type = $(self).val(); // maybe should be an array
  21.                    else var type = null;
  22.                } else var type = null;
  23.                if ($(self).attr('class') == 'filter2' || $('.filter2').is(':checked')) {
  24.                    if ($('.filter2').is(':checked'))
  25.                        var status = $(self).val(); // maybe should be an array
  26.                    else var status = null;
  27.                } else var status = null;
  28.                if ($(self).attr('class') == 'filter3' || $('.filter3').is(':checked')) {
  29.                    if ($('.filter3').is(':checked'))
  30.                        var bhk = $(self).val(); // maybe should be an array
  31.                    else var bhk = null;
  32.                } else var bhk = null;
  33.            });
  34.        }
  35.        else {
  36.            var type = status = bhk = null;
  37.        }
  38.  
  39.        if ($(self).is('.pag_link')) {
  40.            if ($(self).text() == '«')
  41.                var page = (parseInt($('.active').text()) - 1);
  42.            else if ($(self).text() == '»')
  43.                var page = (parseInt($('.active').text()) + 1);
  44.            else
  45.                var page = parseInt($(self).text());
  46.        }
  47.        else {
  48.            var page = 1;
  49.        }
  50.  
  51.        $.ajax({
  52.            method: 'POST',
  53.            url: '/search',
  54.            data: {
  55.                'do': getUrlParameter('do'),
  56.                'use': use,
  57.                'type': type,
  58.                'status': status,
  59.                'bhk': bhk,
  60.                'city': $('select[name="city"]').val(),
  61.                'zone': $('select[name="zone"]').val(),
  62.                'page': page
  63.            }
  64.        }).done(function(data) {
  65.            if ($( '#search' ).is(':visible'))
  66.                $( '#search' ).hide();
  67.  
  68.            if ($(self).is(':checkbox')) {
  69.                var new_content = $(data).find( '#scroll-to-list' );
  70.                $( '#scroll-to-list' ).replaceWith( new_content );
  71.            }
  72.            else {
  73.                var new_content = $(data).find( '#search-filters, #scroll-to-list' );
  74.                $( '#results' ).html( new_content );
  75.                $( 'html, body' ).animate({
  76.                    scrollTop: $( '#scroll-to-list' ).offset().top
  77.                }, 1000);
  78.            }
  79.  
  80.        });
  81.    });

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
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.463


I'm fourth.


Ver Perfil WWW
Re: filtrar contenido con jquery
« Respuesta #3 en: 16 Noviembre 2015, 16:26 pm »

Código
  1. var data = $('input[class^="filter"]')
  2. .add('select[name="city"]')
  3. .add('select[name="zone"]').serializeArray();
  4.  
  5. //para agregar nuevos pares:
  6. //data.push({ name : 'nombre', value : 'valor'});
  7. $.ajax({
  8.    method: 'POST',
  9.    url: '/search',
  10.    data: $.param(data)
  11. }).done(function (data) {
  12.    if ($('#search').is(':visible')) $('#search').hide();
  13.    if ($(self).is(':checkbox')) {
  14.        var new_content = $(data).find('#scroll-to-list');
  15.        $('#scroll-to-list').replaceWith(new_content);
  16.    } else {
  17.        var new_content = $(data).find('#search-filters, #scroll-to-list');
  18.        $('#results').html(new_content);
  19.        $('html, body').animate({
  20.            scrollTop: $('#scroll-to-list').offset().top
  21.        }, 1000);
  22.    }
  23. });

Si "use" puede ser "#res_prop" o "#com_prop" entonces el control debería ser un radio button.

Código
  1. <input type="radio" name="use">
  2. <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 Desconectado

Mensajes: 731


Ver Perfil
Re: filtrar contenido con jquery
« Respuesta #4 en: 16 Noviembre 2015, 16:45 pm »

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:

Código
  1. $use            = isset( $_POST['use'] ) ? (int) $_POST['use'] : '';        // int AJAX
  2. $filter_type    = isset( $_POST['type'] ) ? (int) $_POST['type'] : '';      // int AJAX
  3. $filter_status  = isset( $_POST['status'] ) ? (int) $_POST['status'] : '';  // int AJAX
  4. $filter_bhk     = isset( $_POST['bhk'] ) ? (int) $_POST['bhk'] : '';        // int AJAX
  5. $filter_city    = isset( $_POST['city'] ) ? (int) $_POST['city'] : 0;       // int AJAX
  6. $filter_zone    = isset( $_POST['zone'] ) ? (int) $_POST['zone'] : 0;       // int AJAX
  7. $page_number    = isset( $_POST['page'] ) ? (int) $_POST['page'] : '';      // int AJAX

Lo siento, no me entero.
En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.463


I'm fourth.


Ver Perfil WWW
Re: filtrar contenido con jquery
« Respuesta #5 en: 16 Noviembre 2015, 19:00 pm »

Código:
'input[class^="filter"]'

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):

Código
  1. var data = $('input[class^="filter"]')
  2.                        .add('input[name="use"]')
  3. .add('select[name="city"]')
  4. .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 Desconectado

Mensajes: 731


Ver Perfil
Re: filtrar contenido con jquery
« Respuesta #6 en: 16 Noviembre 2015, 22:11 pm »

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?

Código
  1. $filter_type    = isset( $_POST['type'] ) ? (int) $_POST['type'] : NULL;
  2. if ($filter_type != NULL) {
  3.    $filter_type = 'AND t2.type = ' . $filter_type;
  4.    // si se marcaron dos checkboxes de nombre type, como hago la otra condición OR?
  5. }
  6. if ($stmt = $mysqli->prepare(' SELECT t1.id, t2.*
  7.                               FROM ' . $table . ' t1
  8.                               INNER JOIN property t2 ON t2.id = t1.id
  9.                               WHERE t2.use = ?
  10.                               ' . $filter_type
  11.                                 . $filter_status
  12.                                 . $filter_bhk
  13.                                 . $filter_city
  14.                                 . $filter_zone . '
  15.                               LIMIT ?, ?'))
  16.  

Para do y page usaré lo que me dijiste, el data.push.

Muchas gracias!

EDITO: Ya casi lo tengo:

Código
  1. $('body').on('click', '.click, :checkbox, .pag_link', function() {
  2.  
  3.    var self = this;
  4.  
  5.    if (!$(':radio').is(':checked')) {
  6.        $('p.error').show();
  7.        die();
  8.    }
  9.  
  10.    var data = $('input, select').serializeArray(),
  11.        mode = getUrlParameter('do'),
  12.        page = 1;
  13.  
  14.    if ($(self).is('.pag_link')) {
  15.        if ($(self).text() == '«')
  16.            page = (parseInt($('.active').text()) - 1);
  17.        else if ($(self).text() == '»')
  18.            page = (parseInt($('.active').text()) + 1);
  19.        else
  20.            page = parseInt($(self).text());
  21.    }
  22.  
  23.    data.push({ name : 'do',   value : mode});
  24.    data.push({ name : 'page', value : page});
  25.  
  26.    $.ajax({
  27.        method: 'POST',
  28.        url: '/search',
  29.        data: $.param(data)
  30.    }).done(function (data) {
  31.        if ($( '#search' ).is(':visible'))
  32.            $( '#search' ).hide();
  33.  
  34.        if ($(self).is(':checkbox')) {
  35.            var new_content = $(data).find( '#scroll-to-list' );
  36.            $( '#scroll-to-list' ).replaceWith( new_content );
  37.        }
  38.        else {
  39.            var new_content = $(data).find( '#search-filters, #scroll-to-list' );
  40.            $( '#results' ).html( new_content );
  41.            $( 'html, body' ).animate({
  42.                scrollTop: $( '#scroll-to-list' ).offset().top
  43.            }, 1000);
  44.        }
  45.  
  46.    });
  47. });
  48.  

¿Se podrá optimizar todavía más? : :)
« Última modificación: 17 Noviembre 2015, 03:01 am por gAb1 » En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.463


I'm fourth.


Ver Perfil WWW
Re: filtrar contenido con jquery
« Respuesta #7 en: 17 Noviembre 2015, 18:23 pm »

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:

Código
  1. <input type="checkbox" name="filtros[]">
  2. <input type="checkbox" name="filtros[]">

Y desde PHP:

Código
  1. $filtros = $_POST['filtros'];
  2. list($filtro1, $filtro2) = $filtros;
  3. //$filtro1 == $filtros[0];
  4. //$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 Desconectado

Mensajes: 731


Ver Perfil
Re: filtrar contenido con jquery
« Respuesta #8 en: 17 Noviembre 2015, 21:44 pm »

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:

Código
  1. if ($filter_type != NULL) {
  2.    foreach ($filter_type as $type=>$value) {
  3.        if ($type === 0) {
  4.            $type_cond = 'AND t2.type = ' . $value;
  5.        } else {
  6.            $type_cond .= $type_cond . "\n OR t2.type = " . $value;
  7.        }
  8.    }
  9. }
  10.  

Citar
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:

Código
  1. SELECT t1.id, t2.*
  2. FROM for_sale t1
  3. INNER JOIN property t2 ON t2.id = t1.id
  4. WHERE t2.USE = 1
  5. AND t2.TYPE = 2
  6. OR t2.TYPE = 1
  7. OR t2.TYPE = 3
  8. AND t2.STATUS = 0
  9. OR t2.STATUS = 1
  10. OR t2.STATUS = 2
  11. AND t2.bhk = 3
  12. OR t2.bhk = 1
  13. 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 Desconectado

Mensajes: 1.062



Ver Perfil WWW
Re: filtrar contenido con jquery
« Respuesta #9 en: 18 Noviembre 2015, 17:28 pm »

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

Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
jquery cambio dinamico contenido con PHP
PHP
Carlosnuel 4 6,270 Último mensaje 13 Diciembre 2009, 02:30 am
por Carlosnuel
[SOLUCIONADO] Cargar contenido + JQuery.Load()
Desarrollo Web
Shell Root 2 1,983 Último mensaje 16 Noviembre 2012, 22:28 pm
por Shell Root
ocultar un contenido en jquery
Desarrollo Web
landerzx 2 1,215 Último mensaje 10 Enero 2013, 18:23 pm
por landerzx
regex para filtrar caracteres especiales en jquery
Desarrollo Web
gAb1 2 2,665 Último mensaje 20 Abril 2016, 16:28 pm
por gAb1
Google afirma que es incapaz de filtrar todo el contenido pirata de manera ...
Noticias
wolfbcn 0 617 Último mensaje 4 Diciembre 2017, 01:14 am
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines