1

mi codigo es el siguiente:

<?php
$r= rand(0,9);
echo"
<html>
<head>
<title>Alertas</title>
<script src='web/view/js/jquery-2.0.3.min.js'></script>
<script src='web/view/js/main.js'></script>      
</head>
<body>
<div id='contenedor'>
<div id='alerta'>alerta aleatoria: 
$r<script>alert('esto es una alerta')</script>
</div></div>
<script>RefrescarAlerta()</script>
</body>
</html>";
?>

y la funcion de javascript dentro del main.js es:

function RefrescarAlerta()
{
     $(this).ready(function() {
      setInterval( function(){       
    $('#contenedor').load('index.php #alerta');  
   }, 7000 );
});
}

el div se actualiza, como veran generando los numeros aletorios sin necesidad de recargar la pagina, pero ya no me muestra el script alert('esto es una alerta'); que esta dentro del div, de manera que el script solo se ejecuta al momento de cargar la pagina por primera vez, como le hago para que siga ejecutandose ese script despues de que se refresque el div que suecede cada 8 seg.

3
  • 1
    Éste es el comportamiento esperado, como se explica en la documentación de .load() (traducción mía): "Si .load() se llama con una expresión de selector junto a la URL, entonces los scripts serán removidos antes de actualizar el DOM, y por ello no serán ejecutados." En teoría, si pudieras cambiar el PHP para limitarlo a #alerta podrías ahorrarte el selector y el script funcionaría (por ejemplo poniendo la parte de ese div en un fichero PHP por separado que se incluiría en index y que se llamaría con el load sin necesidad del selector).
    – Alvaro Montoro
    Commented el 26 dic. 2017 a las 23:41
  • 1
    El selector después de la URL. Quizás podrías copiar la parte del <div id="alerta"> a un fichero PHP aparte (p.e. alerta.php) y en el JavaScript, en lugar de hacer $('#contenedor').load('index.php #alerta'); harías $('#contenedor').load('alerta.php');, ya no habría selector detrás de la URL y los scripts se ejecutarían. Voy a hacer pruebas para ver si funciona (aún no lo he probado :P) y te lo pongo con más detalle si va.
    – Alvaro Montoro
    Commented el 26 dic. 2017 a las 23:47
  • 1
    Probé y conseguí que funcionase como comentaba arriba, pero moviendo la definición de $r al fichero secundario. Si eso te vale, te lo escribo como respuesta. Otra opción sería mover el contenido de ese script a una función en main.js y llamarla cuando se complete el .load()
    – Alvaro Montoro
    Commented el 27 dic. 2017 a las 0:07

1 respuesta 1

0

El problema es cómo se está haciendo la llamada .load(), como se explica en la documentación de jQuery (traducción mía):

Cuando se llama a .load() usando una URL sin una expresión de selector sufija, el contenido se pasa a .html() antes de remover los scripts. Esto hace que se ejecuten los bloques de script antes de que sean descartados. Si .load() se llama con una expresión de selector junto a la URL, entonces los scripts serán removidos antes de actualizar el DOM, y por ello no serán ejecutados.

Aquí, cualquier JavaScript que se cargue en #a como parte del documento se ejecutará satisfactoriamente.

$( "#a" ).load( "article.html" );

En cambio, en el siguiente caso, los bloques de script del documento que se carguen en #b serán eliminados y no se ejecutarán:

$( "#b" ).load( "article.html #target" ); 

El código que compartes cae dentro del segundo caso (hay un selector justo detrás de la URL a cargar) y por eso no se ejecutan los scripts.

Para resolver este problema puedes optar por varias opciones. Aquí te dejo un par de ellas que se me ocurren:

1) Romper el fichero PHP en dos

Si cambias el PHP para romper index.php en dos ficheros: index.php y alerta.php (que contendría tan sólo la parte del <div id="alerta">), entonces en el JavaScript, en lugar de hacer:

$('#contenedor').load('index.php #alerta');

tan sólo tendrías que hacer eso:

$('#contenedor').load('alerta.php');

que ya no tendría selector detrás de la URL y por eso los scripts se ejecutarían. Los ficheros quedarían así:

index.php

<?php
echo"
<html>
<head>
<title>Alertas</title>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='main.js'></script>      
</head>
<body>
<div id='contenedor'>";

include("alert.php");

echo"
</div>
<script>RefrescarAlerta()</script>
</body>
</html>";
?>

alert.php

<?php
$r= rand(0,9);
echo "<div id='alerta'>alerta aleatoria: 
$r<script>alert('esto es una alerta $r')</script>
</div>";

main.js

function RefrescarAlerta()
{
  $(this).ready(function() {
    setInterval( function(){       
      $('#contenedor').load('alert.php');  
    }, 7000 );
  });
}

2) Mover el script a una función dentro del main.js

Como el script no se ejecuta al hacer .load(), si no contiene nada que dependa del PHP, podrías moverlo a una función dentro del fichero main.js y llamar a esa función cuando se complete el .load(). Algo como esto:

index.php

<?php
$r= rand(0,9);
echo"
<html>
<head>
<title>Alertas</title>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='main2.js'></script>      
</head>
<body>
<div id='contenedor'>
<div id='alerta'>alerta aleatoria: 
$r
</div></div>
<script>RefrescarAlerta()</script>
</body>
</html>";
?>

main.js

function scriptDentroDelAlert() {
  alert('esto es una alerta')
}

function RefrescarAlerta()
{
  $(this).ready(function() {
    setInterval( function(){       
      $('#contenedor').load('index.php #alerta', scriptDentroDelAlert);
    }, 7000 );
  });
}

El problema de esta solución es que si quieres hacer algo que dependa de valores generados en el PHP, entonces la cosa se complica un poco (podrías pasar los valores en un input escondido o un span y leerlos desde JS).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.