jQuery Ajax laden und getScript

Ich versuche meine Website so, dass der Inhalt in der main-Gebiet geladen, die über javascript (einige Seiten eine Weile dauern zu Rendern). Aber, ich habe ein kleines logisches problem bei der Verwendung von jQuery.load(), jQuery.getScript und jQuery.ajax().

Ich muss in der Lage sein zu laden bestimmte javascript-Dateien per getScript, so dass ich diese Funktionen usw. innerhalb des geladenen Inhalts.

  • index.php - Die main-Datei angezeigt wird (enthält auch #be)
  • js/script.js - Die Datei mit der load-code
  • js/*.js - Mehrere javascript-Dateien, die ich brauche, um in der Lage sein, um den Einsatz im #maincontent-nach dem laden
  • load.php - Die Datei, in die geladen wird #maincontent

script.js:

$(document).ready(function() {
$('#loading').fadeIn('fast');
$('#maincontent').load('load.php', function() {
    $('#loading').fadeOut('fast');
    $('#maincontent').fadeIn('slow');
});

$('#navigation li a').click(function() {
    $('#maincontent').fadeOut('fast');

    $.getScript('js/jquery.contextMenu-1.01.js');
    $.getScript('js/jquery-1.5.1.min.js');
    $.getScript('js/jquery-ui-1.8.12.custom.min.js');
    $.getScript('js/jquery.qtip-2.0.0.min.js');
    $.getScript('js/ajax.js');

    $.ajax({
        method: 'get',
        url: 'load.php',
        data: 'page=' + $(this).attr('rel'),
        beforeSend: function() {
            $('#loading').fadeIn('fast');
        },
        complete: function() {
            $('#loading').fadeOut('fast');
        },
        success: function(html) {
            $('#maincontent').fadeIn('slow');
            $('#maincontent').html(html);
        }
    });
});

$.getScript('js/jquery.contextMenu-1.01.js');
$.getScript('js/jquery-1.5.1.min.js');
$.getScript('js/jquery-ui-1.8.12.custom.min.js');
$.getScript('js/jquery.qtip-2.0.0.min.js');
$.getScript('js/ajax.js');
});

Wie Sie sehen können, bin ich versucht zu laden load.php ersten ohne URL-Parameter und der Interaktion durch den Benutzer. Obwohl load.php richtig geladen ist jedes mal, das gleiche kann nicht gesagt werden, für den javascript-code. Manchmal funktioniert es, manchmal muss ich die Seite aktualisieren, ein paar mal, bevor ich eine saubere Konsole (kein Fehler).

Den Fehler in der Konsole, schlage mich, dass der js-code nicht richtig geladen werden, bevor es verwendet wird im inneren load.php. Dies gilt insbesondere, wenn load.php dauert eine Weile (getestet mit PHP sleep(5) - Funktion).

Lassen Sie mich wissen, wenn ich etwas verdeutlichen 🙂

  • Wenn Sie mit jQuery laden Sie Ihre PHP -, dann müssen Sie nicht brauchen, um es wieder über getScript. Ich empfehle, das laden alle Ihre javascript beim laden der Seite und nur das hinzufügen von Inhalten via load(), vermeiden Sie insbesondere das re-inklusive frameworks und plugins.
InformationsquelleAutor John Doe | 2011-04-30
  1. 3

    Sollten Sie sich nicht wirklich laden Sie alle diese Skripte mit getScript. Benötigen Sie einige (oder alle?) Sie jeder Zeit, also warum nicht nur sind Sie auf die Seite. Darüber hinaus, da Ihre ' E mit Hilfe von jquery zu laden, jquery, ich werde sagen, dass Sie bereits haben es auf der Seite. Also versuchen Sie nicht, laden Sie es erneut.

    • Ich Stimme zu 100%. Außerdem, @John Doe Zusammenführen kann alle Skripts, die in einer einzigen Datei. Stellen Sie einen hohen Verfallsdatum, so wird das Skript im Cache nachfolgende Seite geladen und Besuche
    • Ich versuchte wirklich tun, bevor ich ging, mit diesem Ansatz. Ich bekomme keine Fehler in der console beim laden alles in index.php und mit dem laden/ajax Funktion zum laden von #maincontent, aber ich kann nicht scheinen, um beliebigen javascript (slider, qtip, contextmenu, etc) für die Arbeit im inneren der geladenen Inhalte. Deine Antwort hat mich dazu geführt, zu glauben, dass dies der richtige Weg, es zu tun, ich muss nur noch herausfinden, wie man die js-Arbeit im geladenen Inhalt!
    • welche Fehler sind Sie immer auf der Konsole?
    • Keine Fehler. Nur funktioniert nichts. Ich werde gerne nach ein paar aktualisierte code, wenn Sie möchten
    • Wenn Sie posten könnte einige der code wird nicht ausgeführt, die hilfreich sein könnten. Die js, die in load.php.
    • Mein schlechtes. Ich dachte, du meintest, die alle Bibliotheken in index.php. Ich habe enthalten die notwendigen Bibliotheken in index.php und load.php jeweils jetzt und alles funktioniert wie es sollte. Ich hätte zu kratzen mein Kopf für eine Weile, um herauszufinden, der beste Weg, um weiterhin mit diesem obwohl. Scheint, wie ich brauchen, um zu laden alle Bibliotheken, die mindestens drei mal für eine Seite. Erste index.php dann load.php und dann eine andere Seite für ein modales Fenster, in dem verlangen, js. Scheint dies wie eine gute Vorgehensweise?
    • Ich denke, Sie sollten in der Lage sein laden Sie einfach alle von Ihnen auf dem index. Nur mit dem normalen "<script src=..."
    • Ich hatte gehofft, dass der Fall war, aber es sieht nicht aus wie es. Es könnte mein code aber, so ist hier ein pastebin der sagte js: pastebin.com/CLm6MGy7
    • Auf der zweiten versucht, ich habe versucht, gerade einschließlich der Bibliotheken in index.php und verlassen ajax.js (die Datei, die ich eingefügt) innen load.php. Dieser funktioniert.
    • Okay, ich sehe. Ich dachte ajax.js war nur eine Bibliothek. Jetzt sehen Sie es, hat es einige code in $(document).ready. So, dass müsste in load.php so dass es ausgeführt würde, wenn load.php geladen war. Zu den anderen, die Bibliotheken können einfach in die index. Also ich denke du bist gut zu gehen.
    • Ich eigentlich Hinzugefügt getScript(ajax.js) - Aufruf in script.js auf ajax Last load.php und es funktioniert wie ein Charme. Danke für all Eure Hilfe 🙂

    InformationsquelleAutor James Montagne
  2. 5

    Wenn das problem mit dem timing der Lasten, sollten Sie erwägen, die neueste version von jQuery mit latenten Verhalten.

    Könnten Sie zum Beispiel tun:

        var wait1 = $.getScript('js/jquery.contextMenu-1.01.js');
var wait2 = $.getScript('js/jquery-1.5.1.min.js');
var wait3 = $.getScript('js/jquery-ui-1.8.12.custom.min.js');
var wait4 = $.getScript('js/jquery.qtip-2.0.0.min.js');
var wait5 = $.getScript('js/ajax.js');
$.when(wait1, wait2, wait3, wait4, wait5).then(function() {
    $.ajax({
        method: 'get',
        url: 'load.php',
        data: 'page=' + $(this).attr('rel'),
        beforeSend: function() {
            $('#loading').fadeIn('fast');
        },
        complete: function() {
            $('#loading').fadeOut('fast');
        },
        success: function(html) {
            $('#maincontent').fadeIn('slow');
            $('#maincontent').html(html);
        }
    });
}, function() { handleErrorsFunction()});

    Diese werden warten, bis alle getScript ruft zurück und führen Sie dann den ajax-Aufruf load.php (oder wird es auslösen handleErrorsFunction (), wenn einer der oben genannten ausfällt).

    InformationsquelleAutor Vassi
Schreibe einen Kommentar