[SOLUCIONADO] Ejecutar código php desde jquery

[mblascog]

Buenas,
Me explico. Tengo varias imágenes en una página. Al hacer click en una de ellas, quiero que aparezca una pantalla encima, con un pase de fotos.

Lo que hago es lo siguiente:

Código HTML:

<img class="wowFoto" id="wowFoto1" src="foto1.jpg" alt="aa" title="aa"/>
 

En jquery controlo el click a la imagen, y quiero llamar al fichero php, indicándole las fotos para el pase:

Código Javascript:

$(".wowFoto").click(function() {
            var foto1 = $("#wowFoto1").attr("src");
            var foto2 = '#' + $("#wowFoto2").attr("src");
            var foto3 = '#' + $("#wowFoto3").attr("src");
            var foto4 = '#' + $("#wowFoto4").attr("src");
            var foto5 = '#' + $("#wowFoto5").attr("src");
            var foto6 = '#' + $("#wowFoto6").attr("src");
            $.post('includes/inc_passe.php',{prmFotos:foto1+foto2+foto3+foto4+foto5+foto6},function(data){$(".wowFoto").html(data);})
        })
 

Y en inc_passe.php, pongo mensajes de alerta, pero creo que no llega a ejecutarse.

Código PHP:

<?php 
        $param = $_REQUEST["prmFotos"];
        $arrPrm = explode('#', $param);
        $foto1 = $arrPrm[0];
        $foto2 = $arrPrm[1]; 
        $foto3 = $arrPrm[2]; 
        $foto4 = $arrPrm[3];
        $foto5 = $arrPrm[4]; 
        $foto6 = $arrPrm[5]; 
        echo "<br>foto1: ".$foto1."<br>";
        echo "<br>foto2: ".$foto2."<br>";
        echo "<br>foto3: ".$foto3."<br>";
        echo "<br>foto4: ".$foto4."<br>";
        echo "<br>foto5: ".$foto5."<br>";
        echo "<br>foto6: ".$foto6."<br>";
    ?>
 

Estoy empezando jquery, y no sé si realmente esta es la mejor manera de ejecutar el código php una vez echo el click a la imagen.
Gracias

[Alexis88]

No llegan los valores como esperas ya que no estás enviando una query string correcta. Por otra parte, es tan ineficiente lo que haces, pues, imaginemos que tuvieras 50 imágenes, ¿vas a declarar 50 variables? Definitivamente eso no tendría sentido.

Como lo que buscas obtener es un slider de imágenes, basta con que tengas a todas tus imágenes ya sea en el documento y ocultas exceptuando a la primera y con cada clic en alguna flecha o botón que hayas dispuesto para realizar el cambio de imágenes, o bien teniendo las rutas en un array y tomándolas una por una con cada clic en la flecha o botón. Así es como se suelen hacer los slider de imágenes y, además, evitas hacer constante en innecesarias consultas al lado del servidor para realizar algo que puedes hacer fácilmente en el lado del cliente.

Saludos

[mblascog]

Gracias Alexis88, es correcto lo que dices en cuanto al planteamiento. Pero sigo sin intender porqué el query string es incorrecto. Serías tan amable de decirme por qué?
Gracias.

[Alexis88]

Por esto:

Código Javascript:

prmFotos:foto1+foto2+foto3+foto4+foto5+foto6
 

Lo más probable es que esté llegando algo similar a esto:

Código PHP:

$_POST['prmFotos']; //foto1.jpgfoto2.jpgfoto3.jpgfoto4.jpgfoto5.jpgfoto6.jpg
 

Fíjate en la manera en la que estás concatenando los valores, unos seguidos de otros, sin algo que los separe, llegando así una sola cadena al lado del servidor.

Si quieres enviar todos los valores, podrías hacerlo mediante un array:

Código Javascript:

var data = [];
 
$.each($("[id^=wowFoto]"), function(){
    data.push($(this).prop("src"));
});
 
$.post('includes/inc_passe.php', { 
    prmFotos: {
        fotos: data
    }
}, function(data){
    $(".wowFoto").html(data);
});
 

Y, en tu archivo PHP, recibes al array de valores así:

Código PHP:

$_POST['prmFotos']['fotos'];
 

Al enviar al array a través de un objeto literal, este puede ser tratado en su forma original de array en el archivo PHP.

Saludos

[mblascog]

Gracias Alexis88, pero finalmente he podido comprobar que sí que envio bien los valores. De hecho, están separados por el carácter '#'
Pero he de reconecer que es más elegante tu solución, por lo que lo estoy implementando. He tenido que cambiar algo, pues no me iba bien.

Ha quedado así:

Código Javascript:

$(".wowFoto").click(function() {
            var data = [];
            $.each($('.wowFoto'), function () {
                data.push(this.src);
            });
            $.post("inc_passe.php",{prmFotos:{fotos: data}}, function(data){$('.wowFoto').html(data);});
        })
 

Y en inc_passe.php, lo siguiente:

Código PHP:

$fotos = $_POST["prmFotos"]['fotos'];
 

Pero pasa una cosa muy curiosa. Si en inc_fotos.php pongo un script para lanzar un mensaje con un literal fijo, sale a la primera, en cambio, si en vez del litoral, pongo un elemento del array fotos, sale al segundo click.
Es decir, partiendo de este script:

Código Javascript:

<script type="text/javascript">
        alert ("hola");
        alert("<?php echo 'fotos: '.$fotos[0]?>");
    </script>
 

Al primer click a la foto inicial, sale:
- un mensaje con "hola"
- un mensaje con "fotos: [
Al segundo click:
- un mensaje con "hola"
- un mensaje con "fotos: y la ruta

Alguien sabe por qué me va bien al segundo click y no al primero?

Gracias de nuevo.

[Alexis88]

Pues, no sé qué representa $fotos, pero, al parecer, lo que estás obteniendo es una cadena y no al array, la cual tendría una forma como esta: ["foto1.jpg", "foto2.jpg", "foto3.jpg"]. Cuando probé este código, en el archivo PHP, hice lo siguiente para imprimir los datos del array uno debajo de otro:

Código PHP:

echo implode("\r\n", $_POST['prmFotos']['fotos']);
 

Y el resultado en consola, era similar a este:

Código HTML:

http://localhost/foto1.jpg
http://localhost/foto2.jpg
http://localhost/foto3.jpg
http://localhost/foto4.jpg
 

No sé si lo que recibes del archivo PHP es un array, un objeto JSON o uno de los elementos, de modo que es complicado saber por qué ocurre lo que te sucede. Podrías hacer un $_POST['prmFotos']['fotos'] en tu archivo PHP para saber qué información es la que llega.

Saludos