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).
.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).<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.$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()