jQuery, Arrays dinámicos y envíos por PHP

Posted on 19 Julio, 2014

jQuery, arrays dinámicos y PHP

Para aquellos que han utilizado anteriormente jQuery, ya saben las grandes ventajas que esta librería tiene por sobre javascript simple, no solo puedes hacer mucho más escribiendo menos, si no que además trae una serie de mejoras tanto en efectos, toma de datos y el mismo manejo de los arrays. Por esas mismas razones es probablemente la librería de javascript más popular actualmente, y la que yo personalmente más utilizo, y consta con una increíble cantidad de documentación, no solo en su sitio oficial “http://api.jquery.com/“.

 

Bien pues, hace unos días dentro de una de las aplicaciones que tuve que crear en mi trabajo había esta pequeña funcionalidad donde tenía que generar una tabla en html con varias columnas con información pero con una X cantidad de filas, y necesitaba recorrer esta tabla para generar un array multidinamico para poder capturar y almacenar toda esta información, así que decidí compartir una pequeña parte del código especificamente la función en jQuery que recibe el id de la tabla y busca fila por fila la información que necesita y la almacena en un array de jQuery para finalmente enviarla a PHP por medio de ajax.

la tabla para este ejemplo será bastante simple, esta tabla se genera en otro lugar por lo que yo no tengo mayor control sobre ella, solo tengo que obtener los resultados que se encuentran allí, esta tabla se utiliza para listar una X cantidad de datos que pueden ser editados, por eso es tan importante recoger cada fila y clasificarla de forma independiente, para así poder actualizar cada registro de forma exitosa.

tabla_jquery

Imagen Tabla original

Es una tabla en HTML sin mayor ciencia, quizás denotar el hecho de que por ejemplo cada fila TR tiene su propio id, que corresponde al ID del registro que está mostrando, esto lo usaré eventualmente para rescatar y catalogar cada dato con jQuery.

Ahora el botón para registrar todos estos datos, en el ejemplo y en la aplicación original hay 2 formas de grabar los datos una actualización individual, con los botones al final de cada fila o una masiva que voy a mostrar ahora, la individual a decir verdad no tiene mucha ciencia por lo que no la mencionaré mas durante este ejemplo.

La idea principal de esta botón era ejecutar una función a la cual como parámetro se le paso el ID de la tabla que hay que recorrer, esto se hizo con la idea de tener muchas tablas con el mismo formato pero diferentes ID y contenidos para usar siempre la misma función jQuery para tomar la info y almacenarla.

Finalmente llegamos a la función jQuery que voy a crear para poder recorrer los datos dentro de la tabla HTML y guardarlos en un ARRAY de jQuery.

Muy bien, una vez hecho esto la parte “dificil” está hecha, lo que hacemos primero es declarar nuestras 2 variables principales, una es el ARRAY en jQuery que usaremos para almacenar todos nuestros otros Arrays con información y la otra es el objeto TABLA, una vez que creamos el objeto tabla podemos acceder a casi cualquier información procedente de este de forma relativamente fácil.

Una vez creadas estas variables lo que hacemos es usando el método .each() de jQuery para recorrer cada fila o TR y por cada una de estás no solo obtener los datos sino almaceneralos en un Array y este guardarlo en el Array que ya tenemos guardado.

Una ves hecho esto tenemos un array, con el resto de la info dentro si miramos el console.log (y si tenemos firebug instalado) podremos ver algo así:

Nuevamente crear este array en jQuery no toma mucho tiempo y es bastante simple, luego es cosa de jugar con los elementos que necesitas dentro de la tabla, en este caso yo necesitaba solo esos 3, pero podrían ser más como podrían ser mucho más complejos, pero con jQuery es bastante más simple tomar y manejar estos datos tal como se ve arriba.

Como ya vimos la creación de estos datos en jQuery y sabemos como manejarlos y tratarlos haré un pequeño ejemplo de lo que se puede hacer y como por ejemplo crear las queries necesarias para pasar del array de jQuery, a PHP y finalmente ejecutar un update en la base de datos por cada uno de estos registros.

Como se ve no tiene mayor ciencia, pero en unas pocas lineas de jQuery se crea todo el array necesario para trabajar los datos variables de la tabla, que podría haber tomado una enorme cantidad de lineas para construir.

Puntos a Recordar

 

solo como extras cabe recordar que para poder ejecutar códigos de jQuery y en especial para poder utilizar todo lo que esta gran librería tiene para ofrecer primero tenemos que adjuntarla a nuestros html, ya sea de forma local descargando la versión de jQuery que necesitemos ya sea desde el sitio oficial

Sígueme!

Enzopiero Valdivia O.

Desarrollador Web at Pandamonios
Desarrollador web de profesión, Amante de la fotografía y los videojuegos, actualmente trabajando como desarrollador en PHP. trato de escribir de tecnología, fotografía y otros teman que me interesan.
  • PS3: Eddie--MW
  • Origin: Edd1eMW
  • Steam: EddieMW
Sígueme!

Descargas del Post


  • Zimplemente Alex

    Excelente tu codigo, gracias por compartirla, me sirvio para adaptar a mi tabla dinamica que tengo. Mi pregunta es que tengo a parte varios input que almacenan diferentes datos y quiero mandarlos a php y este a la vez a mysql obviamente. Como puedo enviar los valores de los input junto con el array para guardarlo en distintas tablas de la bd??

    • eso depende un poco, son input dinámicos?, o son siempre los mismos?, tienes los ID?, si son dinámicos yo personalmente los añadiría al mismo array “item” con un nombre especifico, por ejemplo
      $item[‘inputx’] = $(“#inputx”).val(); o con un .find() si es que está en una linea.

      ahora si son fijos es bastante más simple, solo declaralos en una variable y los envías como el ejemplo que mostré ahí.

      p.d. si no quedo claro solo vuelve a comentar 🙂

      • Zimplemente Alex

        Lo que estoy tratando de hacer es esto. al ver tu codigo trate de adaptar en algo con el mio. Es una tabla dinamica en la cual agrego datos, es como una FACTURA en si. mediante una busqueda de otro input voy agregando datos a la tabla dinamica, ahora cuando los quiero guardar lo hago mediante este codigo:

        $(‘#guardar’).click(function()
        {
        //VALORES DE INPUT QUE DESEO INGRESAR A OTRA TABLA SOLO UNA VEZ.
        var c = $(‘#id_cliente’).val();
        var f = $(‘#fecha’).val();
        var s = $(‘#subtotal’).val();
        var i = $(‘#igv’).val();
        var t = $(‘#total’).val();
        //++++++++++++++++++++++++++++++++++++++++++
        var DATA = [];

        $(‘#detalle tbody tr’).each(function()
        {
        var co = $(this).find(‘td’).eq(0).html(),
        pr = $(this).find(‘td’).eq(2).html(),
        ca = $(this).find(‘td’).eq(3).html(),
        su = $(this).find(‘td’).eq(4).html();

        item = {};

        item[“id”] = co;
        item[“pre”] = pr;
        item[“can”] = ca;
        item[“imp”] = su;

        DATA.push(item);

        INFO = new FormData(); //No entiendo esta parte solo son celdas de tabla no input.
        cadena = JSON.stringify(DATA);
        INFO.append(‘data’, cadena);
        });

        $.ajax({
        data: INFO,
        type: ‘POST’,
        url : ‘guardar.php’,
        processData: false,
        contentType: false,
        success: function(data)
        {
        alert(data);
        }
        });
        })
        };

        Ahora en php lo hice de esta manera, mi pregunta en si como mando los valores de mis input junto con el array, NO son input dinamicos. En conclusion quiero enviar los datos de mis input y el array al php y mysql. EN SI ES MI MODELO DE FACTURA.

        $array = json_decode($_POST[‘data’]);
        foreach ($array as $key => $value)
        {
        $id = trim($value->id);
        $pre = trim($value->pre);
        $can = trim($value->can);
        $imp = trim($value->imp);

        $q = “INSERT INTO mitabla(codigo, precio, cantidad, total) VALUES(‘$id’,’$pre’,’$can’,’$imp’)”;
        mysql_query($q);
        }

        • Primero el objeto formdata es básicamente para poder enviar formularios o la información en esta por medio de un request.
          ahora si lo que entiendo es correcto y solo quieres enviar más info pues es bastante fácil, crea un nuevo array, y en cada posición agregas la info fija que necesitas en este caso creo que sería:

          var ARRAY2 = {
          ‘c’ : $(‘#id_cliente’).val(),
          ‘f’ : $(‘#fecha’).val(),
          ‘s’ : $(‘#subtotal’).val(),
          ‘i’ : $(‘#igv’).val(),
          ‘t’ : $(‘#total’).val()
          }
          y cuando haces el append a INFO para enviar también haces un append para el nuevo array
          INFO.append(‘arraay2’, ARRAY2);

          y en PHP tienes que tomar el elemento $_POST[‘array2’]
          y sería.

  • Jefferson

    buenas noches, me interesa mucho usar este codigo, de casualidad usted tendra alguna vista de como se arma definitivo, no se como incluir las librerias jquery

    • a decir verdad es más que nada una guía de paso a paso de como armar la
      tuya. Si no tienes experiencia realmente con jQuery te va a resultar
      medio difícil implementar la misma en tu código

  • Luis Sanoja

    Hola, disculpa, vi tu post y me surgio una duda con respecto a algo que estoy haciendo; Yo genero dinamicamente dos input, en uno muestro una imagen, y el otro es uno de tipo hidden que contiene el id de dicha imagen, estos inputs son dinamicos pss los consulto en mysql con php; lo que me gustaria saber es como hacer para obtener el id de x inputs para asi por medio de otra funcion enviarlos a un archivo php a que realizen x tarea. Vi tu ejemplo e intento aplicarlo a lo que te comente, pero no lo he podido lograr; Ojala me pudieras orientar. Gracias

    • para obtener los id de un imput debería ser tan simple como:
      $(“#ID-INPUT”).val();
      si esos id son dínamicos puedes tomar por ejemplo desde la clase, o derechamente buscar por tipo, entrar al formulario o div o lo que sea donde lo tienes y hacer .find() por un input hidden

      • Luis Sanoja

        Hola buenas noches, logre solventar lo que te escribi; Ahora una pregunta, si quisiera editar los datos que por ejemplo tu muestras en esa tabla, en donde cada fila posee un id diferente, y obviamentelos datos de cada fila es diferente, como se haria? es decir si cada uno tiene un boton para modificar como harias para saber que boton presionas si cada uno de ellos se genera dinamicamente? me entiendes?

        • Mira no estoy completamente seguro de que quieres hacer pero si entendí de manera correcta quieres en cada fila agregar un botón y que ese botón grabe la info de esa fila?
          si es así la forma más fácil sería por ejemplo, cuando creas los elementos de manera dinamica a todos les asígnas un id con un identificador por ejemplo id=”nombre_23″; donde el número es el id del elemento que estás listando ejemplo si por ejemplo estás listando la info que corresponde al id 12 quedaría en id=”nombre_12″ | id=”apellido_12″ etc
          entonces luego lo más fácil sería agregar un botón a la fila con un onclick
          ejemplo onclick=”NombreFuncion(12);” y luego en la función llamas ese id, total ya sabes que que tienes que llamar a “nombre_” y le agregas el id

          si te quedan dudas me avisas 🙂

  • omar zarare

    hola disculpa al correr tu ejemplo me sale un error en la consola que dice grabaTodoTabla is not defined???

    • revisa que la función “grabaTodoTabla” esté creada en el JS y que este esté añadido de manera correcta en el código

  • Leandro Antonucci

    Enzo, antes que nada muchas gracias. Del lado del php que levanta el array de objetos JSON que pasaste con AJAX no entiendo porque lo que decodificas es $_POST[‘data’]???
    En definitiva, no se como manejar del lado del php el objeto json q envio.
    Gracias.

    • Leandro, correjí unos errores que habían en la parte del PHP y además agregué un zip con los elementos para mostrar como debería funcionar, son un index y un php dentro está todo funcionando, me cuentas como te va! 🙂

  • Luis Raúl García Cuevas

    hola amigo muchas gracias por tu codigo, solo tengo una duda como le tengo que hacer para poner lo que obtuve de mi tabla y colocarlo en unos inputs ocultos, ya que necesito poner la descripcion del articulo en un input y el precio en otro (lo quiero poner en el formulario de paypal) me serviria de mucha ayuda

    • Es bien fácil en realidad buscas el input que quieres asociar $(“#Id-INPUT”).val( VARIABLE_CON_INFO); si es dinámico entonces necesitas recorrer o decidir como quieres hacer que sea dinámico.

  • Wewita Mosha Peshoshita Eunice

    Hola Enzopiero muchas gracias por el aporte oye quisiera consultarte una dudita a lo mejor es muy básica para ti pero tengo un código que hace selects dinámicos, después de pelear como leona logré que hicieran lo que tienen que hacer, pero ahora quiero que los datos que obtiene del combo dinámico los tome para hacer la consulta mysql y me permita editar el contenido
    El tema es que no entiendo muy bien donde se almacenaron los valores finales de los selects y cómo mandarlos a llamar desde el nuevo php que se ejecuta al dar un sumbit
    Podrías ayudarme por favor????

    Quise adjuntar los archivos 🙁

    • Hola, como sabes que funcionó si no sabes donde quedaron los valores?
      como los envías?, post?, get?, un array?

      • Wewita Mosha Peshoshita Eunice

        Oooo no esperaba respuesta tan rápida, muchas gracias por la atención

        Por que cuando carga el primer combo muestra el listado que necesito que muestre del cual no tengo ninguna duda como accede a la bd
        y del segundo también carga discriminando la entrada del primero del cual tampoco tengo duda como accedde a la bd
        el tema es que al final no entiendo cómo mandar a llamar a esas opciones
        se mandan por get y se usa un array

        http://www.formatoweb.com.ar/ajax/select_dependientes.php

        Esta es la página de donde lo tomé, a lo mejor como el burro que toca la flauta supe cómo hacer los cambios para que funcionara pero me pierdo para recuperar los valores finales de los selects

        Gracias XD

        • me llegan los comentarios al Mail y puedo responder de ahí 🙂

          con respecto a lo que mencionas, entiendo que traes información de la base de datos para crear un select, cuando elijes una acción un segundo select cambia o carga un nuevo set de datos.
          hasta ahí entiendo pero no tengo idea que quieres hacer o que estás intentando hacer después de eso.
          o quieres tomar esos 2 select y enviarlos a otro lugar?

          • Wewita Mosha Peshoshita Eunice

            si, quiero que tome los dos valores del select y los compare con los valores en una tabla mysql para que tome justo el elemento de la tabla y lo muestre para editarlo al pulsar el submit editar

            Se me ocurre enviarte las imagenes o.o

          • en realidad entendí la mitad de tu código, mi consejo es que lo envíes por POST tienes más control y las URL y forma de manejar es más limpia, en este mismo articulo hay formas de enviar los datos.

          • Wewita Mosha Peshoshita Eunice

            ok muchas gracias n.n

          • sabes donde tienes los datos?, en que variables? antes de enviar a validar

          • Wewita Mosha Peshoshita Eunice

            Ay perdón ya había salido de la chamba, pues está en

            $selectDestino=$_GET[“select”]; $opcionSeleccionada=$_GET[“opcion”];

            esto es en el php que se ejecuta después del script en el script están aquí

            ajax.open(“GET”, “select_dependientes_proceso.php?select=”+idSelectDestino+”&opcion=”+opcionSeleccionada, true);

            saluditos 😛

          • Wewita Mosha Peshoshita Eunice

            gracias

  • Tania Arriagada Reyes

    Super bien explicado, lo probaré y te cuento como me va.
    Gracias
    Saludos
    Valdivia-Chile