Perché il mio script < > tag funziona dal file php? (jQuery coinvolto anche qui)

https://stackoverflow.com/questions/1821917

10-07-2019
|

Domanda

Ecco cosa sto cercando di realizzare. Ho un modulo che utilizza jQuery per effettuare una chiamata AJAX a un file PHP. Il file PHP interagisce con un database, quindi crea il contenuto della pagina da restituire come risposta AJAX; vale a dire che il contenuto di questa pagina viene scritto in una nuova finestra nella funzione di successo per la chiamata $ .ajax . Come parte del contenuto della pagina restituito dal file PHP, ho un tag di script HTML semplice che ha un file JavaScript. In particolare:

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

Questo non fa eco nel php (anche se l'ho provato), è solo html. PageControl.js si trova nella stessa directory del mio file php che genera il contenuto.

Indipendentemente da ciò che provo, non riesco a ottenere il file pageControl.js incluso o funzionante nella nuova finestra risultante creata in risposta al successo della chiamata AJAX. Finisco con errori come " Oggetto previsto " o variabile non definita, portandomi a credere che il file non venga incluso. Se copio JavaScript direttamente nel file PHP, anziché utilizzare il tag script con src, posso farlo funzionare.

C'è qualcosa che mi manca qui sulla risoluzione dell'ambito tra il file chiamante, php e jQuery AJAX? Vorrei includere i file javascript in questo modo in futuro e vorrei capire cosa sto facendo di sbagliato.

Ciao di nuovo:

Ho risolto il problema e non ho ancora avuto fortuna. Proverò a chiarire cosa sto facendo, e forse questo mi farà venire in mente qualcosa. Sto includendo un po 'di codice come richiesto per aiutare a chiarire un po' le cose.

Ecco la sequenza:

L'utente seleziona alcune opzioni e fa clic sul pulsante di invio sul modulo.

Il clic sul pulsante del modulo è gestito dal codice jQuery che assomiglia a questo:

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

Questo codice esegue una chiamata AJAX a un file PHP ( process_report_request.php ) che crea il contenuto della pagina per la nuova finestra. Questo contenuto è preso da un database e HTML. Nel file PHP voglio includere un altro file javascript nella testa con javascript usato nella nuova finestra. Sto cercando di includerlo come segue

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

Nomi delle cartelle dei percorsi modificati per proteggere gli innocenti :)

Il file pageControl.js si trova effettivamente nella stessa cartella del file di codice jQuery e del file php, ma sto provando il percorso completo solo per sicurezza. Sono anche in grado di accedere al file js utilizzando l'URL nel browser e posso includerlo correttamente in una pagina di prova html statica utilizzando il tag script src.

Dopo aver incluso il file javascript nel file php, ricevo una chiamata a una delle sue funzioni come segue (eco da php):

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

Quindi, una volta che il file php rimanda tutto il contenuto della pagina alla chiamata AJAX, allora la nuova finestra viene aperta e il contenuto restituito vi viene scritto dal codice jQuery sopra.

La riga writePageControls è dove ottengo l'errore " Errore: oggetto previsto " quando eseguo la pagina. Tuttavia, poiché JavaScript funziona bene sia nella pagina HTML statica sia quando è incluso " inline " nel file PHP, mi sta portando a pensare che questo sia un problema di percorso di qualche tipo.

Ancora una volta, qualunque cosa io provi, le mie chiamate alle funzioni nel file pageControls.js non funzionano. Se inserisco il contenuto del file pageControl.js nel file php tra i tag di script e non cambio nient'altro, funziona come previsto.

Sulla base di ciò che alcuni di voi hanno già detto, mi chiedo se la risoluzione del percorso verso la finestra appena aperta non sia corretta. Ma non capisco perché perché sto usando il percorso completo. Inoltre, per confondere ancora di più le cose, il mio foglio di stile collegato funziona perfettamente dal file PHP.

Mi scuso per quanto tempo è, ma se qualcuno ha il tempo di approfondire, lo apprezzerei molto. Sono perplesso. Sono un principiante quando si tratta di molto di questo , quindi se ce n'è proprio

Soluzione

Ho anche avuto problemi con un problema simile a questo, e questo è stato un vero mal di testa. Il seguente approccio potrebbe non essere elegante, ma ha funzionato per me.

Assicurati che il tuo file php, produca solo quello che vuoi nel tuo corpo
Aggiungi dinamicamente jquery all'intestazione della finestra
Aggiungi tutti i file di script esterni all'intestazione della finestra in modo dinamico
usa jQuery html sul documento della finestra per chiamare html () con il contenuto caricato sul corpo, in modo che gli script vengano valutati.

Ad esempio, nel tuo successo 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();

    }

Buona fortuna!

Altri suggerimenti

Probabilmente non sta guardando dove pensi che stia cercando di afferrare il tuo file javascript.

Prova un formato relativo al server come questo:

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

Se il problema persiste, verifica di poter digitare l'URL nel file di script nel browser e farlo scaricare.

Assicurati di averlo all'interno di < head > o < body > della pagina HTML. Inoltre, ricontrollerei il percorso del file .js. Puoi farlo incollando " pageControl.js " alla radice del tuo indirizzo web.

Cose da cercare:

Utilizzare Firebug (scheda NET) per verificare se il file js è caricato con lo stato 200 . Controlla anche nella scheda Console per eventuali errori javascript.
Stai utilizzando HTML5 offline . Se lo fai, forse serve una versione cache che non include il tuo tag < script > .
Visualizza l'origine della pagina e assicurati che includa il tag script .
Modifica l'attributo di origine in percorso assoluto: < script src = " http: //www.example.com/js/pageControl.js" type = " text / javascript " > < / script >
Visita http://www.example.com/js/pageControl.js e assicurati che venga visualizzato correttamente.
Prova a posizionare < script > subito dopo < head > in modo che venga caricato per primo.

Questo è tutto ciò che mi viene in mente.

È possibile caricare in modo dinamico lo script creando l'elemento e quindi aggiungendolo a head o altro 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();

Hai provato a usare jquery $ (" # target_div "). load (...) Questo esegue anche JS all'interno dell'output ...

Leggi questo documento per scoprire come usarlo:

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

Per me sembra che tu ti aspetti che funzioni uno script senza carico.

Prova a dare un'occhiata qui: http://ensure.codeplex.com/ SourceControl / changeset / vista / 9070 # 201379

Questo è un po 'di javascript che assicura che lo script sia caricato correttamente prima di tentare l'accesso. Puoi usarlo come caricamento pigro (caricamento dei file javascript solo quando richiesto) o, come interpreto il tuo problema, caricamento di uno script basato sul risultato di chiamate Ajax.

Quello che sta probabilmente accadendo è che stai facendo eco a una stringa tramite un callback ajax, non inserendo un elemento. Gli script esterni richiedono una seconda chiamata GET per caricare i loro contenuti, il che non sta avvenendo: è avvenuta solo la prima chiamata. Pertanto, quando la prima chiamata include il codice incorporato, il DOM non deve effettuare una richiesta GET aggiuntiva per recuperare i contenuti. Se il DOM non vede lo script, il DOM non lo eseguirà, il che significa che è solo un tag casuale.

C'è un modo molto veloce per scoprirlo. In Chrome (o Firefox con il plug-in Firebug installato), controlla la console > menu a discesa degli script per visualizzare tutti gli script caricati. Se non è elencato, non è caricato e il tag di script che vedi nel markup è altrimenti inerte.

Dal momento che probabilmente è solo una stringa per quanto riguarda PHP, potresti crearlo come oggetto PHP DOM e inserirlo correttamente (anche se potrebbe essere laborioso). Invece, forse posizionalo alla fine della pagina, appena prima dei tag del corpo di chiusura. (Questa è comunque la posizione preferita per js - dead last, dopo che tutti gli altri elementi nella pagina sono stati caricati e sono disponibili per il DOM.)

HTH :)

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow