dynamically - La llamada jQuery.load() no ejecuta JavaScript en el archivo HTML cargado
load script javascript (10)
Esto parece ser un problema relacionado solo con Safari. He intentado 4 en Mac y 3 en Windows y todavía no tengo suerte.
Estoy tratando de cargar un archivo HTML externo y tener el JavaScript que está incrustado ejecutar.
El código que trato de usar es este:
$("#myBtn").click(function() {
$("#myDiv").load("trackingCode.html");
});
trackingCode.html ve así (ahora es simple, pero se ampliará una vez / si lo hago funcionar):
<html>
<head>
<title>Tracking HTML File</title>
<script language="javascript" type="text/javascript">
alert("outside the jQuery ready");
$(function() {
alert("inside the jQuery ready");
});
</script>
</head>
<body>
</body>
</html>
Veo ambos mensajes de alerta en IE (6 y 7) y Firefox (2 y 3). Sin embargo, no puedo ver los mensajes en Safari (el último navegador en el que debo preocuparme - requisitos del proyecto - por favor, no guerras de llama).
¿Alguna idea sobre por qué Safari está ignorando el JavaScript en el archivo trackingCode.html ?
Eventualmente me gustaría poder pasar objetos de JavaScript a este archivo trackingCode.html para utilizarlo en la llamada jQuery ready, pero me gustaría asegurarme de que esto sea posible en todos los navegadores antes de ir por ese camino.
Bueno, yo tenía el mismo problema que solo parecía ocurrir para Firefox, y no podía usar otro comando JQuery a excepción de .load () ya que estaba modificando el front-end en la existencia de archivos PHP ...
De todos modos, después de usar el comando .load (), incrustó mi script de JQuery dentro del HTML externo que se estaba cargando, y pareció funcionar. No entiendo por qué el JS que cargué en la parte superior del documento principal no funcionó para el nuevo contenido, sin embargo ...
Está cargando una página HTML completa en su div, incluidas las etiquetas html, head y body. ¿Qué sucede si haces la carga y solo tienes el script de apertura, el script de cierre y el código de JavaScript en el HTML que cargas?
Aquí está la página del controlador:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Load of Script</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myButton").click(function() {
$("#myDiv").load("trackingCode.html");
});
});
</script>
</head>
<body>
<button id="myButton">Click Me</button>
<div id="myDiv"></div>
</body>
</html>
Aquí está el contenido de trackingCode.html:
<script type="text/javascript">
alert("Outside the jQuery ready");
$(function() {
alert("Inside the jQuery ready");
});
</script>
Esto funciona para mí en Safari 4.
Actualización: se agregó el espacio de nombres DOCTYPE y html para que coincida con el código en mi entorno de prueba. Probado con Firefox 3.6.13 y el código de ejemplo funciona.
Esto no parece funcionar si está cargando el campo HTML en un elemento creado dinámicamente.
$(''body'').append(''<div id="loader"></div>'');
$(''#loader'').load(''htmlwithscript.htm'');
Veo Firebug DOM y no hay ningún nodo de script, solo el HTML y mi nodo CSS.
¿Alguien se ha encontrado con esto?
Intenté hacer un plugin jquery para la función de carga html. Por favor, consulte el siguiente enlace.
http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html
Por favor sugiérame que lo mejore más.
Gracias, Mohan
Me doy cuenta de que esta es una publicación un poco más antigua, pero para cualquiera que venga a esta página buscando una solución similar ...
http://api.jquery.com/jQuery.getScript/
jQuery.getScript( url, [ success(data, textStatus) ] )
url- Una cadena que contiene la URL a la que se envía la solicitud.
success(data, textStatus)- Una función de devolución de llamada que se ejecuta si la solicitud tiene éxito.
$.getScript(''ajax/test.js'', function() { alert(''Load was performed.''); });
Otra versión de la solución de John Pick justo antes, esto funciona bien para mí:
jQuery.ajax({
....
success: function(data, textStatus, jqXHR) {
jQuery(selecteur).html(jqXHR.responseText);
var reponse = jQuery(jqXHR.responseText);
var reponseScript = reponse.filter("script");
jQuery.each(reponseScript, function(idx, val) { eval(val.text); } );
}
...
});
Prueba con esto en trackingCode.html:
<script type="text/javascript">
$(function() {
show_alert();
function show_alert() {
alert("Inside the jQuery ready");
}
});
</script>
Pude solucionar este problema cambiando $(document).ready() a window.onLoad() .
Ya casi lo tienes. Dile a jquery que quieres cargar solo el script:
$("#myBtn").click(function() {
$("#myDiv").load("trackingCode.html script");
});
$("#images").load(location.href+" #images",function(){
$.getScript("js/productHelper.js");
});