¿Por qué mi < script > etiqueta trabajar desde un archivo php? (jQuery involucrado aquí también)

https://stackoverflow.com/questions/1821917

10-07-2019
|

Pregunta

Esto es lo que estoy tratando de lograr. Tengo un formulario que usa jQuery para hacer una llamada AJAX a un archivo PHP. El archivo PHP interactúa con una base de datos y luego crea el contenido de la página para devolverlo como respuesta AJAX; es decir, el contenido de esta página se escribe en una nueva ventana en la función de éxito para la llamada $ .ajax . Como parte del contenido de la página devuelto por el archivo PHP, tengo una etiqueta de secuencia de comandos HTML sencilla que tiene un archivo JavaScript. Específicamente:

<script type="text/javascript" src="pageControl.js"></script>

Esto no se repite en el php (aunque lo he intentado), es solo html. El pageControl.js está en el mismo directorio que mi archivo php que genera el contenido.

No importa lo que intente, parece que no puedo obtener el archivo pageControl.js incluido o funcionando en la nueva ventana resultante creada en respuesta al éxito en la llamada AJAX. Termino con errores como " Objeto esperado " o variable no definida, lo que me lleva a creer que el archivo no se incluye. Si copio el JavaScript directamente en el archivo PHP, en lugar de usar la etiqueta de script con src, puedo hacerlo funcionar.

¿Hay algo que me falta aquí acerca de la resolución del alcance entre el archivo de llamada, php y el jQuery AJAX? Voy a querer incluir archivos javascript de esta manera en el futuro y me gustaría entender lo que estoy haciendo mal.

Hola de nuevo:

He trabajado en este tema, y ??todavía no he tenido suerte. Voy a tratar de aclarar lo que estoy haciendo, y tal vez eso me recuerde algo. Incluyo algunos códigos según lo solicitado para ayudar a aclarar un poco las cosas.

Aquí está la secuencia:

El usuario selecciona algunas opciones y hace clic en el botón Enviar en el formulario.

El clic del botón de formulario es manejado por un código jQuery que se ve así:

$(document).ready(function() {
  $("#runReport").click(function() {

    var report = $("#report").val();
    var program = $("#program").val();
    var session = $("#session").val();
    var students = $("#students").val();

    var dataString = 'report=' +report+ 
                     '&program=' +program+
                     '&session=' +session+
                     '&students=' +students;

    $.ajax({
        type: "POST",
        url: "process_report_request.php",
        cache: false,
        data: dataString,
        success: function(pageContent) {
            if (pageContent) {
                $("#result_msg").addClass("successMsg")
                    .text("Report created.");

                var windowFeatures = "width=800,menubar=yes,scrollbars=1,resizable=1,status=yes";

                // open a new report window
                var reportWindow = window.open("", "newReportWindow", windowFeatures);

                // add the report data itself returned from the AJAX call
                reportWindow.document.write(pageContent);
                reportWindow.document.close();
            }
            else {
                $("#result_msg").addClass("failedMsg")
                    .text("Report creation failed.");
            }
        }
    }); // end ajax call
    // return false from click function to prevent normal submit handling
    return false;
  }); // end click call    
}); // end ready call

Este código realiza una llamada AJAX a un archivo PHP ( process_report_request.php ) que crea el contenido de la página para la nueva ventana. Este contenido se toma de una base de datos y HTML. En el archivo PHP quiero incluir otro archivo javascript en la cabeza con javascript usado en la nueva ventana. Estoy tratando de incluirlo de la siguiente manera

<script src="/folder1/folder2/folder3/pageControl.js" type="text/javascript"></script>

Se cambiaron los nombres de las carpetas de ruta para proteger a los inocentes :)

El archivo pageControl.js está realmente en la misma carpeta que el archivo de código jQuery y el archivo php, pero estoy intentando la ruta completa solo para estar seguro. También puedo acceder al archivo js usando la URL en el navegador, y puedo incluirlo con éxito en una página de prueba estática html usando la etiqueta src del script.

Después de incluir el archivo javascript en el archivo php, tengo una llamada a una de sus funciones de la siguiente manera (echo from php):

 echo '<script type="text/javascript" language="javascript">writePageControls();</script>';

Entonces, una vez que el archivo php envía todo el contenido de la página a la llamada AJAX, se abre la nueva ventana y el código jQuery anterior le escribe el contenido devuelto.

La línea writePageControls es donde obtengo el error "Error: Objeto esperado" cuando ejecuto la página. Sin embargo, dado que JavaScript funciona bien tanto en la página HTML estática como cuando se incluye " en línea " en el archivo PHP, me lleva a pensar que este es un problema de ruta de algún tipo.

Nuevamente, no importa lo que intente, mis llamadas a las funciones en el archivo pageControls.js no funcionan. Si pongo el contenido del archivo pageControl.js en el archivo php entre etiquetas de script y no cambio nada más, funciona como se esperaba.

Basado en lo que algunos de ustedes ya han dicho, me pregunto si la resolución de ruta a la ventana recién abierta no es correcta. Pero no entiendo por qué porque estoy usando la ruta completa. Además, para confundir aún más las cosas, mi hoja de estilo vinculada funciona bien desde el archivo PHP.

Disculpas por cuánto tiempo es esto, pero si alguien tiene tiempo para mirar esto más allá, lo agradecería enormemente. Estoy perplejo Soy un novato cuando se trata de mucho de esto , así que si solo hay

Solución

También he tenido problemas con un problema similar a este, y esto fue un verdadero dolor de cabeza. El siguiente enfoque puede no ser elegante, pero funcionó para mí.

Asegúrese de que su archivo php solo muestre lo que desea en su cuerpo
Agregue jquery al encabezado de la ventana dinámicamente
Agregue cualquier archivo de script externo al encabezado de la ventana dinámicamente
use jQuery html en el documento de la ventana para llamar a html () con su contenido cargado en el cuerpo, de modo que se evalúen los scripts.

Por ejemplo, en su éxito ajax:

success: function(pageContent) {
        var windowFeatures = "width=800,menubar=yes,scrollbars=1,resizable=1,status=yes";
        var reportWindow = window.open("", "newReportWindow", windowFeatures);

        // boilerplate
        var boilerplate = "<html><head></head><body></body></html>";

        reportWindow.document.write(boilerplate);

        var head = reportWindow.document.getElementsByTagName("head")[0];

        var jquery = reportWindow.document.createElement("script");
        jquery.type = "text/javascript";
        jquery.src = "http://code.jquery.com/jquery-1.7.min.js";
        head.appendChild(jquery);

        var js = reportWindow.document.createElement("script");
        js.type = "text/javascript";
        js.src = "/folder1/folder2/folder3/pageControl.js";
        js.onload= function() {
            reportWindow.$("body").html(pageContent);
        };
        head.appendChild(js);


        reportWindow.document.close();

    }

¡Buena suerte!

Otros consejos

Probablemente no está buscando donde crees que está buscando agarrar tu archivo javascript.

Pruebe un formato relativo al servidor como este:

<script src="/some/path/to/pageControl.js"></script>

Si eso todavía no funciona, verifique que puede escribir la url de su archivo de script en su navegador y descargarla.

Asegúrese de tenerlo dentro de < head > o < body > de la página HTML. Además, volvería a verificar la ruta al archivo .js. Puede hacerlo pegando " pageControl.js " en la raíz de su dirección web.

Cosas a buscar:

Use Firebug (pestaña NET) para verificar si el archivo js está cargado con el estado 200 . Compruebe también en la pestaña Consola si hay errores de JavaScript.
¿Está utilizando HTML5 sin conexión . Si lo hace, tal vez sirve una versión en caché que no incluye su etiqueta < script > .
Vea el origen de la página y asegúrese de que incluya la etiqueta script .
Cambie el atributo de origen a la ruta absoluta: < script src = " http: //www.example.com/js/pageControl.js" type = " text / javascript " > < / script >
Visite http://www.example.com/js/pageControl.js y asegúrese de que se muestre correctamente.
Intente colocar el < script > justo después del < head > para que se cargue primero.

Esto es todo lo que se me ocurre.

Puede cargar el script dinámicamente creando el elemento y luego agregarlo al encabezado u otro elemento:

reportWindow.document.write(pageContent);                      
var script = document.createElement('script');
script.src = 'pageControl.js';
script.type = 'text/javascript';
reportWindow.document.getElementsByTagName('head')[0].appendChild(script);
reportWindow.document.close();

¿Ha intentado usar jquery $ (" # target_div "). load (...) Esto también ejecuta JS dentro de la salida ...

Lea este documento para saber cómo usarlo:

http://api.jquery.com/load/

Para mí, parece que esperas que funcione un script descargado.

Intente echar un vistazo aquí: http://ensure.codeplex.com/ SourceControl / changeset / view / 9070 # 201379

Este es un poco de javascript que asegura que el script se cargue correctamente antes de intentar el acceso. Puede usar esto como carga diferida (cargando archivos javascript solo cuando sea necesario) o, como interpreto su problema, cargando un script basado en el resultado de llamadas ajax.

Lo que probablemente está sucediendo es que estás haciendo eco de una cadena a través de una devolución de llamada ajax, no insertando un elemento. Los scripts externos requieren una segunda llamada GET para cargar su contenido, lo que no está sucediendo, solo sucedió la primera llamada. Entonces, cuando la primera llamada incluye el código en línea, el DOM no tiene que hacer una solicitud GET adicional para obtener el contenido. Si el DOM no ve el script, el DOM no lo ejecutará, lo que significa que es solo una etiqueta aleatoria.

Hay una forma muy rápida de averiguarlo. En Chrome (o Firefox con el complemento Firebug instalado), verifique la consola > menú desplegable de scripts para ver todos los scripts cargados. Si no aparece en la lista, no se carga y la etiqueta del script que ve en el marcado es inerte.

Dado que probablemente es solo una cadena en lo que respecta a PHP, puede crearla como un objeto DOM de PHP e insertarla correctamente (aunque esto podría ser laborioso). En su lugar, tal vez colóquelo al final de la página, justo antes de las etiquetas del cuerpo de cierre. (Esta es la posición preferida para js de todos modos, último lugar, después de que se hayan cargado todos los demás elementos de la página y están disponibles para el DOM.)

HTH :)

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow