Javascript en PHP dentro de Javascript

tld32 · #1 (**permalink**) 24/07/2011, 17:37

La consulta es un tanto complicada y seguramente sea debido a que me he enrollado como las persianas, pero a ver si me podéis echar una mano, que realmente me estoy volviendo loco...

La situación es la siguiente:

Tengo un script en JS que me muestra imágenes mediante un bucle, hasta que llega al límite y se para. Estas imágenes se encuentran en una carpeta en concreto, pero quiero que únicamente me muestre aquellas imágenes que he obtenido mediante PHP/MySQL en un array.

El código PHP es el siguiente:

Código PHP:

Ver original/*conexion base de datos*/
$database = "BASE DE DATOS";
$table = "TABLA";
$mysql_connect = mysql_connect("localhost","USUARIO","PASSWORD");
$mysql_selectdb = mysql_select_db($database, $mysql_connect);
 
/*consulta a la base de datos*/
$consulta_filtro = mysql_query("SELECT ID FROM ".$table." WHERE ojos='marrones'");
$cant_filtro = mysql_num_rows($consulta_filtro);
 
$i = 1;
while( $row = mysql_fetch_array($consulta_filtro)){
$photo_id[$i] = $row["ID"];
 
$i++;
}

De este modo he almacenado las imágenes que quiero en $photo_id, donde únicamente tengo que indicar el nº de la imagen que quiero mostrar.

El código JS es el siguiente:

Código Javascript:

Ver original<script src="assets/javascript/mootools-core-1.3.2.js" type="text/javascript" charset="utf-8"></script> 
    <script src="assets/javascript/mootools-more-1.3.2.1.js" type="text/javascript" charset="utf-8"></script> 
    <script src="assets/javascript/funciones.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" language="javascript">window.addEvent("domready", function(){
    
var maxLength    = <?PHP echo $cant_filtro;?>; // Max Number images
var contadorImagenes = 1
 
var mosaicoImagenes = new Wall("wall", {
                callOnUpdate: function(items){
                    items.each(function(e, i){
                      var a = new Element("img[src=/images/"+contadorImagenes+".jpg]");
    
                        counterFluid++;
                        
                        // Reiniciar contador
                        if( contadorImagenes > maxLength ) contadorImagenes = 1;
                    })
                }
            });
// Init Wall
mosaicoImagenes.initWall();
});</script>

De este modo, lo que quiero hacer es sustituir el contador normal, que muestra por orden numérico las imágenes y de tal modo que no se puede alterar dicho orden, por las imágenes que he obtenido de la base de datos, de tal modo que a nivel técnico lo que quiero es:

$photo_id[contadorImagenes] cosa que realmente no se como puedo hacerlo... He probado de insertar la variable "contadorImagenes" mediante etiquetas <script language="javascript"..., texto normal, etc... pero no ha habido forma.
¿Se os ocurre algún modo?

Muchas gracias, la verdad es que le doy muchas vueltas y no encuentro la solución.

abimaelrc · #2 (**permalink**) 24/07/2011, 18:07

Por si acaso, con PHP no tienes que obligatoriamente publicar etiquetas HTML, podrías crear un archivo PHP que contenga código de js y llamarlo directamente en las etiquetas script.

Es decir algo como esto

foo.php

Código PHP:

Ver original<?php
header('Content-Type: text/javascript;');
// todo lo demas que quieras hacer con PHP
$foo = 'foo';
?>
alert('<?php echo $foo; ?>');

index.html

Código HTML:

Ver original<html>
<head>
<script type="text/javascript" src="foo.php"></script>
</head>
<body>
</body>
</html>

No sé si es a lo que te refieres que quieres hacer.

tld32 · #3 (**permalink**) 25/07/2011, 01:08

Hola Abimaelrc,

Realmente lo que mencionas creo que no me sirve de mucho, ya que es lo mismo que intento hacer, solo que mediante un archivo externo.

Lo que necesito es saber qué puedo hacer para que un Array en PHP me lo cuente en un bucle de javascript, de tal modo que cada vez que se repita el bucle me muestre un valor del array.

¿Cómo se podría hacer?

abimaelrc · #4 (**permalink**) 25/07/2011, 07:12

Conviertelo a json y el resultado solo es cuestion de imprimirlo despues del = de la variable en javascript.

tld32 · #5 (**permalink**) 25/07/2011, 17:25

De acuerdo Abimaelrc, sería mucha molestia pedir un ejemplo? Ando escaso de conocimientos en JS y desconozco absolutamente JSON.

Gracias y disculpa.

abimaelrc · #6 (**permalink**) 25/07/2011, 17:37

Algo así

Código PHP:

Ver originalvar foo = <?php echo json_encode(array('foo', 'bar', 'baz')); ?>;
// luego trabajar con javascript el json

tld32 · #7 (**permalink**) 26/07/2011, 18:29

Gracias por tu respuesta Abimaelrc,

Entonces, aplicándolo a la situación...

Código Javascript:

Ver original<script src="assets/javascript/mootools-core-1.3.2.js" type="text/javascript" charset="utf-8"></script> 
    <script src="assets/javascript/mootools-more-1.3.2.1.js" type="text/javascript" charset="utf-8"></script> 
    <script src="assets/javascript/funciones.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" language="javascript">window.addEvent("domready", function(){
var foo = <?PHP echo json_encode($photo_id[¿?¿?¿Qué introduzco aquí?]);?>   
var maxLength    = <?PHP echo $cant_filtro;?>; // Max Number images
var contadorImagenes = 1
 
var mosaicoImagenes = new Wall("wall", {
                callOnUpdate: function(items){
                    items.each(function(e, i){
                      var a = new Element("img[src=/images/"+foo[contadorImagenes]+".jpg]");
    
                        contadorImagenes++;
                        
                        // Reiniciar contador
                        if( contadorImagenes > maxLength ) contadorImagenes = 1;
                    })
                }
            });
// Init Wall
mosaicoImagenes.initWall();
});</script>

Realmente no se como aplicarlo (como dije, no he trabajado nunca con JSON y prácticamente podría decir lo mismo con JS). ¿Me lo podrías indicar? Disculpa las molestias y gracias por el esfuerzo.

sam90 · #8 (**permalink**) 27/07/2011, 15:06

Fijate si algo asi te sirve. Sino no logro entender que es lo que quieres:

Código PHP:

Ver original<script src="assets/javascript/mootools-core-1.3.2.js" type="text/javascript" charset="utf-8"></script> 
    <script src="assets/javascript/mootools-more-1.3.2.1.js" type="text/javascript" charset="utf-8"></script> 
    <script src="assets/javascript/funciones.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" language="javascript">window.addEvent("domready", function(){
    
<?php 
echo "var photo = [ ";
for ($i = 0; $i <$cant_filtro; $i ++) {
    echo ($photo_id + " , ");
}    
echo "];";
?>
    
var maxLength    = <?PHP echo $cant_filtro;?>; // Max Number images
var contadorImagenes = 1
 
var mosaicoImagenes = new Wall("wall", {
                callOnUpdate: function(items){
                    items.each(function(e, i){
                      var a = new Element("img[src=/images/"+photo[contadorImagenes]+".jpg]");
    
                        counterFluid++;
                        
                        // Reiniciar contador
                        if( contadorImagenes > maxLength ) contadorImagenes = 1;
                    })
                }
            });
// Init Wall
mosaicoImagenes.initWall();
});</script>

Simplemente transforma el array PHP en un Array JS. Como lo hacemos? Recorriendo el array item por item e imprimiendolo en el formato que a JS le gusta!

hgp147 · #9 (**permalink**) 27/07/2011, 16:05

Hola, proba si te sirve:

Código PHP:

  <?

 
/*conexion base de datos*/

$database = "BASE DE DATOS";

$table = "TABLA";

$mysql_connect = mysql_connect("localhost","USUARIO","PASSWORD");

$mysql_selectdb = mysql_select_db($database, $mysql_connect); 

 
/*consulta a la base de datos*/

$consulta_filtro = mysql_query("SELECT ID FROM ".$table." WHERE ojos='marrones'");

 
$cant_filtro = mysql_num_rows($consulta_filtro);

 
while( $row = mysql_fetch_array($consulta_filtro))

$photo_id[] = $row["ID"];

 
?>

<script src="assets/javascript/mootools-core-1.3.2.js" type="text/javascript" charset="utf-8"></script> 

<script src="assets/javascript/mootools-more-1.3.2.1.js" type="text/javascript" charset="utf-8"></script> 

<script src="assets/javascript/funciones.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" language="javascript">window.addEvent("domready", function(){

var foo = <?PHP echo json_encode($photo_id); ?>

var maxLength = <?PHP echo $cant_filtro;?>; // Max Number images

var contadorImagenes = 1

var mosaicoImagenes = new Wall("wall", {

callOnUpdate: function(items){

items.each(function(e, i){

var a = new Element("img[src=/images/"+foo[contadorImagenes]+".jpg]");

contadorImagenes++;

// Reiniciar contador

if( contadorImagenes > maxLength ) contadorImagenes = 1;

})

}

});

// Init Wall

mosaicoImagenes.initWall();

});</script>

tld32 · #10 (**permalink**) 27/07/2011, 16:31

Gracias Sam90 y hgp147, pero la verdad es que ninguno de los dos códigos me ha funcionado.

En el tuyo Sam90, directamente se me queda la página en blanco, sin mostrar ningún resultado ni error.

Hgp147, en tu caso me pasa exactamente lo mismo, pero al menos carga toda la página (sin mostrar resultados, obviamente.)

hgp147 · #11 (**permalink**) 27/07/2011, 17:11

Corregido

, ya la porbe en mi pc y funciona bien ahora.
Los archivos que están en los scripts los obtuve de: http://mootools.net/forge/p/the_wall

Código PHP:

  <? 
 
/*conexion base de datos*/ 
$database = "BASE DE DATOS"; 
$table = "TABLA"; 
$mysql_connect = mysql_connect("localhost","USUARIO","PASSWORD"); 
$mysql_selectdb = mysql_select_db($database, $mysql_connect);  
 
/*consulta a la base de datos*/ 
$consulta_filtro = mysql_query("SELECT ID FROM ".$table." WHERE ojos='marrones'"); 
 
$photo_id = array(); 
 
while( $row = mysql_fetch_array($consulta_filtro)) 
$photo_id[] = $row["ID"]; 
 
?> 
<script src="mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>  
<script src="mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>  
<script src="wall.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" language="javascript">
 
window.addEvent("domready", function(){ 
var foo = <?PHP echo json_encode($photo_id); ?>;
var maxLength = foo.length; // Max Number images 
var contadorImagenes = 0;
var mosaicoImagenes = new Wall("wall", {
    "width":150,                
    "height":150,
    callOnUpdate: function(items){ 
        items.each(function(e, i){ 
            var a = new Element("img[src=images/"+foo[contadorImagenes]+".jpg]"); 
            a.inject(e.node).fade("hide").fade("in");
            contadorImagenes++; 
            // Reiniciar contador 
            if( contadorImagenes == maxLength ) contadorImagenes = 0; 
        }) 
    } 
}); 
// Init Wall 
mosaicoImagenes.initWall(); 
});</script> 
 
<div id="viewport">
<div id="wall"></div>
</div>

Cualquier duda me preguntas :).

tld32 · #12 (**permalink**) 27/07/2011, 17:25

¡Fantástico hgp147! Muchas gracias, la consulta ha quedado resuelta. Resolvemos por MP el resto ;)