Loading Page Content Only

Question

Ich habe versucht, meiner Site ein AJAX/jQuery-Skript hinzuzufügen, damit beim Navigieren durch die Site nur der Hauptinhalt geladen wird und daher die Navigation oben nicht neu geladen wird.

Dies ist meine Website-Struktur:

<div id=container> 

<div id="header"> 

    <!-- Header + Navigation Buttons, same throughout the site. --> 

</div> 

<div id="main"> 

    <!-- content of each page, different on each page. --> 

</div> 

</div> 

Beachten Sie auch, dass jede Navigationstaste auf einem anderen Unterverzeichnis zu einer Datei index.php führt, zB www.mysite.com/contact, www.mysite. com/comments etc.

Wie kann ich den #header bleiben auf der gesamten Website bleiben, wenn ich also auf einen Link in der Navigationsleiste, die nav bar lädt nicht, aber die # Hauptinhalt tut?

Ich möchte schließlich auch Übergänge zum #main Inhalt hinzufügen, also wenn Sie durch die Site navigieren, sehen Sie nie eine leere weiße Seite, während die Seite geladen wird - stattdessen sehen Sie immer die Navigationsleiste etc und der #main-Inhalt würde ein- und ausgeblendet werden.

Früher habe ich dies:

<script type="text/javascript"> 
$('#main').load('/subdirectory/ #main'); 
</script> 

Aber es hat nicht funktioniert (man beachte ich die richtige Unterverzeichnis geschrieben hat) und die ganze Seite würde als normal neu zu laden.

Wenn Sie mir helfen könnten, würde ich es sehr schätzen!

Vielen Dank im Voraus! mlazim14

Answer 1

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#main').load('/subdirectory/ #main'); 
    }); 
</script> 

Answer 2

Das sollte funktionieren. Sind Sie sicher, dass die Adresse korrekt ist? Vielleicht war die ganze Seite auch noch nicht geladen. Versuchen Sie dieses, dann ‚echo‘ der Inhalt in der Datei index.php:

$(function() { 
    $('#main').load('/comments/index.php'); 
}); 

-Code innerhalb der obigen Funktion ausgeführt wird, wenn die Seite fertig ist. Siehe jQuery .ready().