[jQuery] Inhalt in DOM-Objekt laden
Zwar gibt es mit
$(selector).loadeine Möglichkeit, Inhalte via Ajax in ein DOM-Element zu laden, mir war diese Möglichkeit aber zu unflexibel, da es den aktuellen Inhalt des Elements überschreibt und ich den neuen Inhalt vor oder hinter den bestehenden Inhalt hinzufügen möchte.
Die folgenden Funktionen können zum Beispiel auch verwendet werden, um sehr einfach via AJAX neue Zeilen in Tabellen hinzuzufügen:
$("table").loadAtEnd("http://www.apfelz.net/ajax/rowloader.php", {'rowid': 2});
(function( $ ){
  $.fn.loadAtEnd = function(url, vars, fn) {
    var objID = $(this).attr("id");
    $("#hiddenContainer").load(url, vars, function() {
      $("#"+objID).append($("#hiddenContainer").children());
      $("#hiddenContainer").html("");
      if(typeof fn == "function") fn();
      });
    };
  }) ( jQuery );
(function( $ ){
  $.fn.loadAtBegin = function(url, vars, fn) {
    var objID = $(this).attr("id");
    $("#hiddenContainer").load(url, vars, function() {
      $("#"+objID).prepend($("#hiddenContainer").children());
      $("#hiddenContainer").html("");
      if(typeof fn == "function") fn();
      });
    };
  }) ( jQuery );
  $.fn.loadAtEnd = function(url, vars, fn) {
    var objID = $(this).attr("id");
    $("#hiddenContainer").load(url, vars, function() {
      $("#"+objID).append($("#hiddenContainer").children());
      $("#hiddenContainer").html("");
      if(typeof fn == "function") fn();
      });
    };
  }) ( jQuery );
(function( $ ){
  $.fn.loadAtBegin = function(url, vars, fn) {
    var objID = $(this).attr("id");
    $("#hiddenContainer").load(url, vars, function() {
      $("#"+objID).prepend($("#hiddenContainer").children());
      $("#hiddenContainer").html("");
      if(typeof fn == "function") fn();
      });
    };
  }) ( jQuery );
Voraussetzungen
*Was  ich bisher noch nicht angepasst habe, um diese Funktionen vollends von der Seite zu trennen, wo ich sie benutze: Es muss ein Element mit der id "hiddenContainer" (z.B.<div id='hiddenContainer' style='display:none;'></div>) auf der Seite vorhanden sein.
*Das Element, dem Inhalte angefügt werden, muss eine eindeutige ID besitzen
*Der von gern geladene Inhalt muss sich in einem Container-Objekt befinden (Kann sich zum Beispiel nicht nur um einfachen Text handeln; muss dann von einem span oder div umschlossen sein)Anwendung
$("#element").loadAtEnd(url, {vars}, callback);
oder
$("#element").loadAtBegin(url, {vars}, callback);
url
Adresse der PHP-Datei etc. von der die Inhalte geladen werden können
vars
Variablen werden 1:1 per POST an die url gesendet
Wird ausgeführt, wenn Daten empfangen in das Element eingefügt wurden
|
|
| Erstellt am: 30.08.2013 unter den Kategorien jQuery JavaScript . | Kommentieren |









