Hilf mir, eine jquery AJAXed divs 'Links arbeiten wie ein iframe

Question

Ich möchte ein paar divs auf der gleichen Seite funktionieren ähnlich wie iframes. Jeder lädt eine URL, die Links enthält. Wenn Sie auf diese Links klicken, möchte ich, dass eine AJAX-Anfrage ausgeht und den HTML-Code des DIVs durch einen neuen HTML-Code von der Seite des angeklickten Links ersetzt. Es wird sehr ähnlich zum Surfen einer Seite in einem Iframe sein.

Hier ist mein Code, um zunächst die divs zu laden (dieser Code funktioniert):

onload:

$.ajax({ 
    url: "http://www.foo.com/videos.php", 
    cache: false, 
    success: function(html){ 
    $("#HowToVideos").replaceWith(html); 
    } 
}); 
$.ajax({ 
    url: "http://www.foo.com/projects.php", 
    cache: false, 
    success: function(html){ 
    $("#HowToProjects").replaceWith(html); 
    } 
}); 

Dies ist ein Beispiel des Codes, die ich nicht ganz sicher bin, wie aber zu implementieren erklärt das Konzept. Könnte ich Hilfe mit einigen Selektoren bekommen (Surround in?) Und oder lassen Sie mich wissen, was ist der richtige Weg? Ich möchte auch ein Ladesymbol anzeigen, das ich wissen muss, wo der richtige Ort ist, um die Funktion zu platzieren.

$(".ajaxarea a").click(function(){ 
     var linksURL = this.href; // 
     var ParentingAjaxArea = $(this).closest(".ajaxarea");; 
     $.ajax({ 
     url: linksURL, 
     cache: false, 
     success: function(html){ 
     $(ParentingAjaxArea).replaceWith(html); 
     } 
    }); 
    return false; 
}); 

$(".ajaxarea").ajaxStart(function(){ 
    // show loading icon 
}); 

Answer 1

Ich habe es herausgefunden! Das Problem war, dass ich die Funktion ".replacewith()" verwendete, die mein AJAXed div (class = "ajaxarea") vollständig löste, anstatt den Inhalt zu ersetzen. Die richtige Funktion hier zu verwenden war ".html()".

Hier ist mein Arbeits Code eine AJAXed div Arbeit wie ein iframe zu machen:

//onload to initialize the div 
$.ajax({ 
    url: "http://www.foo.com/projects.php", 
    cache: false, 
    success: function(html){ 
    $('#HowToProjects').html(html); 
    } 
}); 

$(".ajaxarea a").live('click',function(e){ // must use live instead of .click() 
    e.preventDefault(); 
    var URL = $(this).attr('href'); 
    var parentFrame = $(this).closest(".ajaxarea"); 
    $.ajax({ 
    url: URL, 
    cache: false, 
    success: function(html){ 
     parentFrame.html(html); 
    } 
    }); 
}); 

Answer 2

Angenommen, Sie ajaxarea für alle Anker-Tags in allen Elementen mit Klasse klicken Ereignisse hören möchten, dann funktioniert Ihre Wähler fein:

$(".ajaxarea a").click(function(){ .. }); 

Und diese Codezeile, die zwar nicht einen Selektor (Sie nur eine Eigenschaft auf dem DOM-Element Zugriff auf die geklickt wurde), sollte in Ordnung so gut funktionieren:

var linksUrl = this.href;

Wie für ParentingAjaxArea, müssen Sie $(this).closest() mit einem Selektor verwenden, um zu bestimmen, welche Eltern Sie möchten, aber es ist schwer, ein bestimmtes Beispiel zu geben, ohne Ihre HTML-Struktur zu kennen. Es sieht aus wie Sie ParentingAjaxArea wollen entweder das Element sein, mit id #HowToProjects oder #HowToVideos, so könnten Sie schreiben:

var ParentingAjaxArea = $(this).closest("#HowToProjects, #HowToVideos");

Was den Laden Dialog, denke ich this answer eine gute Methode erklärt (mit ajaxStart und ajaxStop) .

Edit: ich auch bemerkt, dass Sie verwenden die click Ereignis - Wenn Sie auf in der Lage, planen Event-Handler Links zu befestigen, die später in das DOM über AJAX eingefügt wird, schauen delegate oder live.

Answer 3

$(".ajaxarea a").live('click',function(e){ 
    e.preventDefault(); //* 
    var URL = $(this).attr('href'); 
    var parentFrame = $(this).parent(".ajaxarea"); //** 
    $.ajax({ 
    url: URL, 
    cache: false, 
    success: function(html){ 
     parentFrame.replaceWith(html); //*** 
    } 
    }); 
}); 

• * - preventDefault hinzugefügt Klickaktion zu verhindern (siehe e in Argumente der Funktion)
• ** - statt closest, i verwendet parent - wie es für seine beschreibende Qualitäten
• ** * - die var enthält Mutter AJAX Rahmen sollte sein jQuery-Objekt, keine Notwendigkeit, es in $(..) zu wickeln

Dies sollte gut funktionieren, aber Vorsicht, es ist nicht getestet.

bearbeiten:

Sie wahrscheinlich benötigen eine Live (okay, ich bin sicher, dass Sie es brauchen). Was click() ist es, dass es zu allen Elementen zu der Zeit in DOM ein onClick Ereignis hinzufügt. Was live() tut, ist, dass es auf jede Änderung im DOM wartet und den verwendeten Selektor (.ajaxarea a) erneut ausführt und wenn es für eines der neuen Elemente passt, fügt es die Aktion hinzu. In Pseudo-Code, hat es im Grunde diese:

DOM.hasChanged{ 
    $('selector').click(..) 
} 

Answer 4

ich dieses Beispiel für meine eigene Webseite verwendet:

http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

Es funktioniert ganz gut und verwendet Hash-Tags und jQuery.history.js für die Geschichte Ihres Browsers. Es funktioniert sehr gut, weil man so etwas wie einen Media Player einfach weiterspielen lassen kann. Werfen Sie einen Blick auf my own site elsewise, wo Sie die Javascript-Datei finden können: ajaxpages.js. Ich habe live() nicht verwendet, aber vielleicht sollte ich.