AJAX - Content Loading - Versionsgeschichte

37.49.32.84 am 2. März 2017 um 15:17 Uhr

2017-03-02T15:17:08Z

2017-03-02T14:10:57Z

Mit ajax()

2017-03-02T14:06:45Z

Mit ajax()

2017-03-02T13:02:52Z

Funktion nach Abschluss des Ladevorgangs ausführen

2017-03-02T13:00:45Z

2017-03-02T12:57:19Z

Funktion nach Abschluss des Ladevorgangs ausführen

2017-03-02T12:51:42Z

Funktion nach Abschluss des Ladevorgangs ausführen

2017-03-02T12:48:48Z

Load Container Content

2017-03-02T12:22:56Z

2017-03-02T10:27:21Z

@@ Zeile 20: / Zeile 20: @@
   $("#target").load("something.html #source > *");
 Variante wäre evtl. mit .innerHTML();
 ==== Mit ajax() ====
 http://stackoverflow.com/questions/405409/use-jquery-selectors-on-ajax-loaded-html
 <syntaxhighlight lang="javascript">

@@ Zeile 21: / Zeile 21: @@
 Variante wäre evtl. mit .innerHTML();
 ==== Mit ajax() ====
-Klappt nicht richtig evtl, mal das checken:
+http://stackoverflow.com/questions/405409/use-jquery-selectors-on-ajax-loaded-html
 <syntaxhighlight lang="javascript">
 $.ajax({
@@ Zeile 34: / Zeile 32: @@
 });
 </syntaxhighlight>
 === Funktion nach Abschluss des Ladevorgangs ausführen ===

@@ Zeile 21: / Zeile 21: @@
 Variante wäre evtl. mit .innerHTML();
 ==== Mit ajax() ====
 <syntaxhighlight lang="javascript">
 $.ajax({

@@ Zeile 66: / Zeile 66: @@
      success: function(data,status,xhr){
        if(statusTxt == "error"){
-          $pageData = "<div class="error">Sorry - something went wrong</div>
+          $pageData = '<div class="error">Sorry - something went wrong</div>';
        }else {
          $pageData = data;

@@ Zeile 64: / Zeile 64: @@
        ajax: true
      },
-     success: function(data,status){
+     success: function(data,status,xhr){
-       $pageData = data;
+       if(statusTxt == "error"){
+     }
    }).done(function(){
-     // actions after success
+     // actions after complete loading
+   }
 });

@@ Zeile 33: / Zeile 33: @@
 === Funktion nach Abschluss des Ladevorgangs ausführen ===
-Beispiel
+'''Beispiel'''
 <syntaxhighlight lang="javascript">
 $("button").click(function(){
@@ Zeile 42: / Zeile 42: @@
              alert("Error: " + xhr.status + ": " + xhr.statusText);
      });
 });
 </syntaxhighlight>
-Beispiel
+'''Beispiel'''
 <syntaxhighlight lang="javascript">
-$.ajax({
+function loadContent(url,selector){ // Load content
-  type: "POST"
+  var pageData = '';
-  url: url,
+  $.ajax({
-  data: { ajax: true },
+    type: "POST"
      success: function(data,status){
        $pageData = data;
+     }
    }).done(function(){
-     // when finished and successful
+     // actions after success
+   }
 });

@@ Zeile 14: / Zeile 14: @@
 === Load Container Content ===
 Über jQuery den Inhalt eines Elements (inkl. Element) anfordern.
-  $("#area").load("something.html #content");
+  $("#target").load("something.html #source");
 Oder nur die Inhalte ohne das umschließende DIV
-  $("#area").load("something.html #area > *");
+  $("#target").load("something.html #source > *");
 Variante wäre evtl. mit .innerHTML();
 === Funktion nach Abschluss des Ladevorgangs ausführen ===

@@ Zeile 1: / Zeile 1: @@
 == Links ==
 * http://www.webdesignerdepot.com/2014/02/how-to-supercharge-your-sites-speed-with-ajax-and-jquery/ Interessant zu URL Hashes
 * [[JavaScript - Page Transitions]] - Beispiele