Foros del Web » Programando para Internet » Jquery »

jQuery $.ajax y PHP con un CSV

Estas en el tema de jQuery $.ajax y PHP con un CSV en el foro de Jquery en Foros del Web. Buenos días y Feliz año: Estoy intentando devolver por ajax con jQuery el contenido de un CSV que quiero mostrar en una ventana modal. La ...
  #1 (permalink)  
Antiguo 04/01/2011, 05:45
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
jQuery $.ajax y PHP con un CSV

Buenos días y Feliz año:

Estoy intentando devolver por ajax con jQuery el contenido de un CSV que quiero mostrar en una ventana modal.

La ventana la he hecho oculta, de manera que sólo se muestra al hacer click en ciertos sitios y así no tener problemas con la carga de css, clases, etc.

El problema que tengo es al volcar el contenido del csv y mostrarlo, ya que mediante post envío a un fichero PHP qué debe leer, pero no tengo claro cómo devolverlo a la página para que lo muestre.

El firebug, en la respuesta sí muestra lo que debería salir, pero la página no lo pinta, con lo que no tengo claro si necesitaría algún tipo de refresh.

La estructura de archivos, la verdad es un poco confusa, lo que puede ser el origen del problema, ya que tengo una home, que carga contenidos mediante includes. En uno de ellos tengo un listado con enlaces, que son los que abren la ventana modal. En el evento 'onclick' de los elementos de este listado, se hace la llamada a la función que muestra la ventana y en teoría debería hacer todo el proceso.

Por post, llamo a una página enviándole unas variables que ejecutan otra función php, que es la que debería mostrar los datos en la ventana, pero que no lo hace.

El orden es generar la visualización con PHP y después mostrar la ventana.

La función PHP es:
Código PHP:
function productsCatalog($clave$fichero) {
    
    
$fileCSV RUTA_CSV.$fichero.'.csv';
    
    foreach(
CsvToArray::open($fileCSV) as $product) {
        
$categoria $product[1];
        
        if(
$categoria == $clave) {
            echo 
'Entra hasta el fondo';
        }else{
            echo 
'No debería entrar';
        }
        
        echo 
$categoria;
    }    

Que se llama desde:
Código PHP:
if(isset($_POST['pag']) && ($_POST['pag'] == 'products') && isset($_POST['clave'])) {
    
$clave $_POST['clave'];
    
    
productsCatalog($clave'products');
    

Con los datos enviados por ajax desde:
Código Javascript:
Ver original
  1. $.post('index.php', {pag:'products', clave: popID});


Lo dicho, creo que lo estoy haciendo demasiado enrevesado, pero el miedo que tengo es que al devolver desde la función php el array de datos, se vuelva todo loco y sea incapaz de discriminar los campos.

Espero que alguien pueda echarme una mano u orientarme.

Muchas gracias.

Saludos.

Última edición por jesusjj; 04/01/2011 a las 05:59
  #2 (permalink)  
Antiguo 04/01/2011, 06:27
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 3 meses
Puntos: 845
Respuesta: jQuery $.ajax y PHP con un CSV

Que tal jesusjj, la función productsCatalog deberia retornar la estructura

Código PHP:
Ver original
  1. function productsCatalog($clave, $fichero)
  2. {
  3.     ....
  4.     return $categorias;    
  5. }

luego deberias devolverlo en formato json o bien html (mi ej es con json)

Código PHP:
Ver original
  1. if(isset($_POST['pag'])
  2.      && ($_POST['pag'] == 'products')
  3.           && isset($_POST['clave'])) {
  4.     $clave = $_POST['clave'];    
  5.     echo json_encode(productsCatalog($clave, 'products'));    
  6. }

y por ultimo manipularlo en el callback

Código Javascript:
Ver original
  1. $.post('index.php', { pag:'products',  clave: popID }, function(data){
  2.        //aqui deberias manipular la respuesta
  3. });

Saludos.
  #3 (permalink)  
Antiguo 04/01/2011, 06:30
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

Muchas gracias por tan rápida respuesta.

En cuanto lo pruebe comento, a ver si lo he entendido bien.

Muchas gracias.

Saludos.
  #4 (permalink)  
Antiguo 04/01/2011, 07:59
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

Buenas tardes de nuevo:

Me ha surgido una duda antes incluso de hacerlo. El tema es que debería 'retornar' desde la función php el array de datos obtenidos del CSV.

No sé si lo que tendría que hacer entonces es:

Código PHP:
$data = Array();

$data fgetcsv($fileCSV2000";");

return 
$data
Creo que esto podría devolver el array de datos completo a la función js y es el que debería ser capaz de descomponer, para crear el html a imprimir en la ventana modal.

Saludos.

Última edición por jesusjj; 04/01/2011 a las 08:10
  #5 (permalink)  
Antiguo 04/01/2011, 09:18
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 3 meses
Puntos: 845
Respuesta: jQuery $.ajax y PHP con un CSV

Si con fgetcsv te es suficiente, utilizalo de esa forma.
El html lo podes generar en php y retornarlo o utilizar json_encode y desde js crear el html, eso depende de como te quede mas comodo trabajarlo,
le ventaja de retornar el html es que podes hacer algo como esto:

Código Javascript:
Ver original
  1. $.post('index.php', { pag:'products',  clave: popID }, function(data){
  2.     $('#identifier').html(data);
  3. });
  #6 (permalink)  
Antiguo 04/01/2011, 10:26
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

Buenas,

tras hacer unos cambios me devuelve el siguiente error en FireBug:

XML filter is applied to non-XML value (function (a, b) {return new (c.fn.init)(a, b);})
[Interrumpir en este error] $.('#' + popID).html(data);


Los cambios han sido:
Código PHP:
if(isset($_POST['pag']) && ($_POST['pag'] == 'products') && isset($_POST['clave'])) {
    
$clave $_POST['clave'];
    
    echo 
json_encode(productsCatalog($clave'products'));
    
}

########

function productsCatalog($clave$fichero) {
    
    
$fileCSV RUTA_CSV.$fichero.'.csv';
   
    
$data = Array();
    
    
$data fgetcsv($fileCSV1000";") or die ("Error al abrir fichero CSV");
      
    return 
$data;



Y en JS:
Código Javascript:
Ver original
  1. $.post('index.php', {pag:'products', clave: popID},
  2.             function(data) {            
  3.                 $.('#' + popID).html(data);            
  4.         });
  #7 (permalink)  
Antiguo 04/01/2011, 10:42
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 3 meses
Puntos: 845
Respuesta: jQuery $.ajax y PHP con un CSV

Si devolves el json, en el callback tenes que crear el html:

con json:

Código PHP:
Ver original
  1. if(isset($_POST['pag']) && ($_POST['pag'] == 'products') && isset($_POST['clave'])) {
  2.     $clave = $_POST['clave'];
  3.     echo json_encode(productsCatalog($clave, 'products'));
  4. }

Código Javascript:
Ver original
  1. $.post('index.php', {pag:'products', clave: popID},
  2.       function(data) {            
  3.            var html = '';
  4.            $.each(map, function(key, value) {
  5.                   html += '<div class="row">' + key + ': ' + value + '</div>';
  6.              });
  7.           $.('#' + popID).html(html);            
  8.         }
  9. );

con html


Código PHP:
Ver original
  1. if(isset($_POST['pag']) && ($_POST['pag'] == 'products') && isset($_POST['clave'])) {
  2.     $clave = $_POST['clave'];
  3.     $data = productsCatalog($clave, 'products');
  4.    
  5.     $html = '';
  6.     foreach($data as $key => $value){
  7.             html .= '<div class="row">' . $key . ': ' . $value . '</div>';
  8.     }
  9.     echo $html;
  10. }


Código Javascript:
Ver original
  1. $.post('index.php', {pag:'products', clave: popID},
  2.     function(data) {            
  3.        $.('#' + popID).html(data);            
  4.     }
  5. );
  #8 (permalink)  
Antiguo 04/01/2011, 10:45
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

OK, muchas gracias!!!

Ahora lo veo muchísimo más claro. Creo que me decanto por la segunda parte, que me va a ser mucho más cómoda. De todas maneras, me has facilitado unas herramientas importantísimas.

En cuanto me pegue con ello un poco, comento.

Saludos,
  #9 (permalink)  
Antiguo 04/01/2011, 18:09
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

Buenas tardes de nuevo:

Acabo de hacer una prueba y he corregisdo un gazapo que se me había colado, en:
Código Javascript:
Ver original
  1. $.('#' + popID).html(data);  por -> $('#' + popID).html(data);

ya me muestra contenido en la modal, pero me carga toda la página, no lo recibido desde el csv. No está recuperando correctamente $data.

No sé qué puede estar pasando. A ver si mañana le puedo dedicar algo más de tiempo.

Saludos
  #10 (permalink)  
Antiguo 04/01/2011, 18:24
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 3 meses
Puntos: 845
Respuesta: jQuery $.ajax y PHP con un CSV

Como estas cargando el lightbox ? y cual estas utilizando ?
  #11 (permalink)  
Antiguo 05/01/2011, 01:25
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

Buenas, realmente no estoy utilizando ningún plugin, estoy utilizando uno que vi que era una capa oculta y luego con jQuery y CSS la mostraba y hacía el efecto.

Otras veces que intenté utilizar plugins, me dio problemas el tema de CSS y carga de funciones PHP, así que 'para asegurar' utilicé este.

El código es:

Código Javascript:
Ver original
  1. // Ventana Modal    
  2.    
  3.     //When you click on a link with class of poplight and the href starts with a #
  4.     $('a.poplight[href^=#]').click(function() {
  5.         var popID = $(this).attr('rel'); //Get Popup Name
  6.         var popURL = $(this).attr('href'); //Get Popup href to define size
  7.    
  8.         //Pull Query & Variables from href URL
  9.         var query= popURL.split('?');
  10.         var dim= query[1].split('&');
  11.         var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  12.        
  13.         // Modifico script para asignar dinámicamente el id al div
  14.         $(".popup-block").attr('id', popID);
  15.        
  16.         // Envío por ajax el atributo id para indicar el contenido a cargar
  17.         $.post('index.php', {pag:'products', clave: popID},
  18.             function(data) {
  19.                 //Fade in the Popup and add close button
  20.                 $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="content/images/theme/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
  21.                    
  22.                 //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
  23.                 var popMargTop = ($('#' + popID).height() + 80) / 2;
  24.                 var popMargLeft = ($('#' + popID).width() + 80) / 2;
  25.            
  26.                 //Apply Margin to Popup
  27.                 $('#' + popID).css({
  28.                     'margin-top' : -popMargTop,
  29.                     'margin-left' : -popMargLeft
  30.                 });
  31.            
  32.                 //Fade in Background
  33.                 $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  34.                 //$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  35.                
  36.                 // modifico el filtro alpha por el fade del diaplay
  37.                 $('#fade').css({'display' : 'block'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  38.                
  39.                 //Generamos el listado de productos
  40.                 $('#' + popID).html(data);            
  41.         });
  42.                                    
  43.         return false;
  44.     });
  45.  
  46.     //Close Popups and Fade Layer
  47.     $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  48.         $('#fade , .popup-block').fadeOut(function() {
  49.             $('#fade, a.close').remove();  //fade them both out
  50.         });
  51.         return false;
  52.     });

Código CSS:
Ver original
  1. /* **************** jQuery ModalWindow ********************************************************* */
  2.  
  3. #fade { /*--Transparent background layer--*/
  4.     display: none; /*--hidden by default--*/
  5.     /*background: #000;*/
  6.     background: url('../../images/theme/modalBackground.png') repeat;
  7.     position: fixed; left: 0; top: 0;
  8.     width: 100&#37;; height: 100%;
  9.     /*opacity: .80;*/
  10.     z-index: 9999;
  11. }
  12.  
  13. .popup-block{
  14.     display: none; /*--hidden by default--*/
  15.     background: #fff;
  16.     padding: 20px;
  17.     border: 20px solid #ddd;
  18.     float: left;
  19.     font-size: 1.2em;
  20.     position: fixed;
  21.     top: 50%; left: 50%;
  22.     z-index: 99999;
  23.     /*--CSS3 Box Shadows--*/
  24.     -webkit-box-shadow: 0px 0px 20px #000;
  25.     -moz-box-shadow: 0px 0px 20px #000;
  26.     box-shadow: 0px 0px 20px #000;
  27.     /*--CSS3 Rounded Corners--*/
  28.     -webkit-border-radius: 10px;
  29.     -moz-border-radius: 10px;
  30.     border-radius: 10px;
  31. }
  32.  
  33. img.btn_close { float: right; margin: -55px -55px 0 0; }
  34.  
  35. /*--Making IE6 Understand Fixed Positioning--*/
  36. *html #fade { position: absolute; }
  37. *html .popup_block { position: absolute; }
  38.  
  39. /* **************** jQuery ModalWindow ********************************************************* */

Gracias
  #12 (permalink)  
Antiguo 05/01/2011, 05:48
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 3 meses
Puntos: 845
Respuesta: jQuery $.ajax y PHP con un CSV

Lo he probado y funciona bien, hace un console.log de data, debería retornar unicamente el contenido del ligthbox, igualmente te comento que deberias eliminar la linea 40 y actualizar la 20 a:

Código Javascript:
Ver original
  1. $('#' + popID).fadeIn()
  2.               .css({ 'width': Number( popWidth ) })
  3.               .html(data).prepend('<a href="#" class="close"><img src="content/images/theme/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
  #13 (permalink)  
Antiguo 05/01/2011, 09:29
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

Buenas:

He modificado las líneas que me comentabas y he hecho en la consola de firebug 'console.log(data)' (¿se hace así?). Éste me ha devuelto:
ReferenceError: data is not defined

He probado depurando la función jQuery también desde Firebug y cuando va a entrar en:
Código Javascript:
Ver original
  1. function(data) { ...}

Se sale directamente a 'return false;'. Supongo que es problema de cómo he podido depurar, pero bueno.

El tema es que en la modal, me está cargando la página de inicio y no sé si puede estar sucediendo porque el contenido lo estoy volcando desde un 'index.php?pag=productos' y quizá tendría que enviarlo directamente a la página productos (products.php) y que ésta devolviera los datos a mostrar.

Voy a probar a meter un alert en la respuesta de nuevo, para recoger el valor de 'data'.

Muchas gracias y comentaré las siguientes pruebas que vaya haciendo.

Saludos.
  #14 (permalink)  
Antiguo 05/01/2011, 09:54
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 3 meses
Puntos: 845
Respuesta: jQuery $.ajax y PHP con un CSV

Simpre te va devolver el false primero, recuerda que es asincronico, donde debugeaste el data?, deberia ir enseguida de:

Código Javascript:
Ver original
  1. $.post('index.php', {pag:'products', clave: popID},
  2.             function(data) {
  3.             console.log(data);
  4.             ...
  5. });

y ten en cuenta que la respuesta del request debe ser únicamente el html generado para el CSV sino te va a devolver la pagina completa.
  #15 (permalink)  
Antiguo 05/01/2011, 10:28
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

Buenas,

parece que estoy haciendo progresos y que todo el problema viene de la parte PHP.
Estoy reorganizando y parece que algo va haciendo, aunque al hacer una impresión del array $data, sólo me muestra la línea de la cabecera. Ésta realmente no me preocupa, porque cuando consiga que haga el bucle correctamente, condicionaré a que sólo imprima los valores en función de una clave.

Muchas gracias de nuevo y cuando tenga todo OK, aviso
  #16 (permalink)  
Antiguo 10/01/2011, 18:17
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: jQuery $.ajax y PHP con un CSV

Se me olvidó postear lo que hice:

Código PHP:
if(isset($_POST['pag']) && ($_POST['pag'] == 'products') && isset($_POST['clave'])) {
    
$clave $_POST['clave'];
    
$fichero $_POST['pag'];
    
    
$fileCSV '../csv/'.$fichero.'.csv';
    
$ruta_img 'content/images/products/';
    
    
//echo $fileCSV;
    
    
$csv fopen($fileCSV"r") or die ("Error al abrir archivo CSV");
    
    
    echo 
"<table id='tb_products'>";
           
    while((
$data fgetcsv($csv1000";")) != FALSE ) {
    
        if(
$data['1'] == $clave) {
            echo 
"<tr>";
            echo 
"<td class='td_img'><img src='$ruta_img$data[4]' title='".utf8_encode($data[5])."' alt='".utf8_encode($data[5])."' /></td>"// impresión de imagens
            
echo "<td class='td_desc'><h3>".utf8_encode($data[2])."</h3>".utf8_encode($data[3])."</td>"// impresión en dos líneas de producto yu descripción
            
echo "</tr>";            
        }
    }
    
    echo 
"</table>";

Código Javascript:
Ver original
  1. // Ventana Modal      
  2.     //When you click on a link with class of poplight and the href starts with a #
  3.     $('a.poplight[href^=#]').click(function() {
  4.         var popID = $(this).attr('rel'); //Get Popup Name
  5.         var popURL = $(this).attr('href'); //Get Popup href to define size
  6.    
  7.         //Pull Query & Variables from href URL
  8.         var query= popURL.split('?');
  9.         var dim= query[1].split('&');
  10.         var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  11.        
  12.         // Modifico script para asignar dinámicamente el id al div
  13.         $(".popup-block").attr('id', popID);
  14.        
  15.         // Envío por ajax el atributo id para indicar el contenido a cargar
  16.         //$.post('index.php', {pag:'products', clave: popID},
  17.         $.post('content/includes/php/products.php', {pag:'products', clave: popID},
  18.             function(data) {
  19.                  console.log(data);
  20.                
  21.                 //Fade in the Popup and add close button
  22.                 //Generamos el listado de productos
  23.                 $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="content/images/theme/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
  24.                 $('#' + popID).fadeIn()
  25.                   .css({ 'width': Number( popWidth ) })
  26.                   .html(data).prepend('<a href="#" class="close"><img src="content/images/theme/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
  27.                    
  28.                 //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
  29.                 var popMargTop = ($('#' + popID).height() + 80) / 2;
  30.                 var popMargLeft = ($('#' + popID).width() + 80) / 2;
  31.            
  32.                 //Apply Margin to Popup
  33.                 $('#' + popID).css({
  34.                     'margin-top' : -popMargTop,
  35.                     'margin-left' : -popMargLeft
  36.                 });
  37.            
  38.                 //Fade in Background
  39.                 $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  40.                 //$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  41.                
  42.                 // modifico el filtro alpha por el fade del diaplay
  43.                 $('#fade').css({'display' : 'block'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies          
  44.         });
  45.    
  46.         return false;
  47.     });
  48.  
  49.     //Close Popups and Fade Layer
  50.     $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  51.         $('#fade , .popup-block').fadeOut(function() {
  52.             $('#fade, a.close').remove();  //fade them both out
  53.         });
  54.         return false;
  55.     });
  56.    
  57. });

Código HTML:
Ver original
  1. <a href='#?w=870' rel='prod1' class='poplight'></a>

Saludos

Etiquetas: ajax, csv, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:00.