jQuery Ajax laden und getScript

Question

Ich versuche, meine Website so einzurichten, dass Inhalte im Hauptbereich über Javascript geladen werden (das Rendern einiger Seiten dauert eine Weile). Bei der Verwendung von jQuery.load (), jQuery.getScript und jQuery.ajax () ist mir jedoch ein logisches Problem aufgetreten.

Ich muss in der Lage sein, bestimmte Javascript-Dateien über getScript zu laden, damit ich diese Funktionen usw. im geladenen Inhalt verwenden kann.

• index.php - Die angezeigte Hauptdatei (enthält auch #loading)
• js / script.js - Die Datei mit dem Ladecode
• js / *. js - Mehrere Javascript-Dateien, die ich nach dem Laden in #maincontent verwenden muss
• load.php - Die Datei, die in #maincontent geladen wird

  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, versuche ich zuerst, load.php ohne URL-Parameter und ohne Interaktion des Benutzers zu laden. Obwohl load.php jedes Mal korrekt geladen wird, kann dies nicht für den Javascript-Code gesagt werden. Manchmal funktioniert es, manchmal muss ich die Seite einige Male aktualisieren, bevor ich eine saubere Konsole bekomme (keine Fehler).

  Die Fehler in der Konsole deuten darauf hin, dass der js-Code nicht richtig geladen wurde, bevor er in load.php verwendet wird. Dies gilt insbesondere dann, wenn load.php eine Weile dauert (getestet mit der PHP-Funktion sleep (5)).

  Lassen Sie mich wissen, wenn ich etwas klären muss :)

Answer 1

Sie sollten nicht wirklich alle diese Skripte mit getScript laden.Sie benötigen jedes Mal einige (oder alle?) Von ihnen. Warum also nicht einfach auf der Seite einfügen?Da Sie jquery zum Laden von jquery verwenden, werde ich außerdem sagen, dass Sie es bereits auf der Seite enthalten haben.Versuchen Sie also nicht, es erneut zu laden.

Answer 2

Wenn das Problem das Timing der Ladevorgänge ist, sollten Sie die neueste Version von jQuery mit verzögertem Verhalten verwenden.

Sie können beispielsweise Folgendes 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()}); 

Dies wartet, bis alle getScript-Aufrufe zurückkehren, und führt dann den Ajax-Aufruf von load.php aus (oder löst die handleErrorsFunction () aus, wenn einer der oben genannten Fehler auftritt).