JavaScript DIV Inhalt austauschen, ganze Seite wird ins DIV geladen :D

[Belee]

Hi

Ich versuche mich gerade etwas in Ajax.
Habe da dieses kleine Script geschrieben um Inhalt in einem DIV Container austauschen. Geht, nur leider wird immer die ganze index.php ins DIV geladen.
Was mache ich falsch?

<script type="text/javascript">
//<![CDATA[
 
$(document).ready(function() {
 
 $("#navi a").live("click",function() {
 
  var pageIn = $(this).attr("href");
 
 $("#content").load(pageIn);
 
   return false;
 
 });
}); 
//]]> 
</script>
 
<div id="content">
 <p>tausch mich</p>
</div>
 
 
<div id="navi">
 <a href="index.php?mynav=email">Kontakt</a>
</div>

Meine Links sind includes, scheint so dass das damit seine Probleme hat, weiß aber nicht wie ich das fixe. Mit normalen HTML Seiten klappt es dagegen problemlos.
Nur hier mit PHP-Includes will nicht.

 

[GreenGene]

Musst du bei load nicht auch noch #content schreiben?:

 $("#content").load(pageIn #content);

Damit er auch nur #content nachlädt.

 

[Belee]

Ne, es geht aber wenn ich ím href die tatsächliche Datei eintrage, also in dem Fall oben
email.inc.php doch dann bekommen User ohne JS nur dieses Datei zu sehen.

 

[GreenGene]

Und ich nehme an in der email.inc.php steht auch nur genau das drin was nachgeladen werden soll und alles was überflüssig wäre steht eigentlich nur in der index.php oder?

 

[Belee]

Richtig, wie halt includes meistens aussehen. Das Problem ist halt, wenn das href auf die include zeigt, geht zwar die Ajax Sache doch mein switch/case nicht mehr
Also müsste man im Code eventuell mit einem array arbeiten in dem man dann die ganzen includes einträgt und dann mit if arbeiten, wäre aber schlecht, denn die includes wären dann für jeden sichtbar bzw. jeder könnte sehen was man da alles für schöne Dateien benutzt und wo sie liegen.
Ich sage mal, das Versteckspiel wäre keins mehr, also wäre wohl das beste ich verzichte auf diese Sache. Oder, es gibt doch eine Möglichkeit das Ajax bzw. jQuery sich hier nur das nimmt was sich auch PHP beim includieren nimmt.

 

[Mr. Snoot]

Übergib email via Post an deine index.php, mache dort mit $email = $_POST['mynav'] was du willst und gib das Ergebnis mit echo aus. Dieses landet dann in #content.

$("#content").load("index.php",{"mynav[]": [email]});

 

[Belee]

Verstehe jetzt nicht ganz was du meinst. Ach, es bleibt nicht nur bei der email @snoot, ist nur eine Sache aus der Navi, wollte jetzt nicht die ganze Navi hier eintragen. Es sind schon einige Sachen deshalb habe ich es ja mit

var pageIn = $(this).attr("href");

gemacht. So fühlen sich alle Links in dem Navi-Container angesprochen. Aber das scheint so halt in meinem Fall nicht zu funktionieren, bzw. doch nur wird halt immer die komplette index in das DIV geladen.

 

[Spartan-117]

Das liegt daran dass jQuery die Seite so sieht wie du, wenn du auf deinehomepage.tld/index.php?mynav=bla
gehst.

Ich würde es über eine externe PHP-Datei lösen, welche nur den Bereich ausgibt, der per Ajax abgeholt werden soll. Dann sollte es auch funktionieren.

 

[Belee]

Wie meinst du das jetzt genau @Spartan?

 

[Spartan-117]

Beispiel:
ajax.php:

include('./includeverzeichnis/'.$_GET['mynav']); // bitte nicht in dieser Form verwenden, du weisst ja aus dem Thread von Som3 wie das geht :)

index.php:

<script type="text/javascript">
//<![CDATA[
 
$(document).ready(function() {
 
 $("#navi a").live("click",function() {
 
  var pageIn = $(this).attr("href");
 
 $("#content").load(pageIn);
 
   return false;
 
 });
}); 
//]]> 
</script>
 
<div id="content">
 <p>tausch mich</p>
</div>
 
 
<div id="navi">
 <a href="[SIZE="5"][B]ajax.php[/B][/SIZE]?mynav=email">Kontakt</a>
</div>

 

[Mr. Snoot]

Du kannst das ganze natürlich trotzdem dynamisch machen:

$(document).ready(function() {
 
  $("#navi a").live("click",function() {
 
    var pageIn = $(this).attr("href").split('=')[1]; // liefert bspw. 'email'
 
    $("#content").load("index.php",{"mynav[]": [pageIn]}); 

  });
});

Und in der index.php steht dann bspw.:

$pageIn = $_POST['mynav'][0];

$sql = mysql_query("SELECT content FROM table WHERE page = '$pageIn'");
while($row = mysql_fetch_object($sql))
{
  echo  $row->content; // wird in $("#content") ausgegeben
}

 

[GreenGene]

Oder du benutzt einfach jquery so wie ich es dir gesagt habe, das kann nämlich schon alles ^^. Wenn du die seiten nachladen willst gib einfach an, dass jquery nur den content der neuen seite nachladen soll. Natürlich funktioniert es wenn du direkt auf die includes verlinkst, weil dann ja nur der teil der in #content ausgegeben und nachgeladen wird. Also versuchs doch einfach mal mit dem javascriptcode, den ich gepostet hab. ^^

 

[Belee]

@Green
Habe ich ja, trotzdem wurde die komplette index ins DIV geladen.

@Spartan
Ich frage mich aber, wie das bei Usern ohn JS funktionieren soll? und RewriteRules kann ich mir dann hier wohl auch knicken inkl. des switch/case an dieser Stelle. Ich denke, das einzige wäre, für JS eine komplette extra Navi zu machen oder besser, für jeden Link ein noscript?

@snoot
Ich nutze für eine Navi keine Datenbank, würde ich nie machen. Ich versuche aber mal den Code umzubauen, mal sehen ob ich das hinbekommen.

Ginge das nicht eventuell auch so?
Der Link oben im ersten Beitrag bleibt wie er ist, zusätzlich aber baut man für JS noch ein onclick mit email+.inc+.php code?..code?..code? return false ein. Dann müsste doch JS eigentlich auch nur das include austauschen?
Nur wie müsste dann der eigentlich JS-Code für aussehen? denn man muss ja irgendwie angeben welcher Container aus welchem container...hmm

 

[Mr. Snoot]

Du willst ja in #content auch keine Navi ausgeben, oder? Aber über die Navi greifst du doch auf Inhalte in einer DB zu. Und die liest du aus.

 

[Spartan-117]

Wenn er dies über jQuery löst (nur #content ausgeben) bedeutet das jedoch längere Wartezeit weil zuerst die gesamte Page geladen und dann erst der #content-Bereich rausgefischt wird.

Stimmt, ohne JavaScript würde es dann problematisch werden, jedoch geht es doch auch so:

<script type="text/javascript">
//<![CDATA[
 
$(document).ready(function() {
 
 $("#navi a").live("click",function() {
 
  var pageIn = $(this).attr("href").split('=')[1];
 
 $("#content").load('ajax.php?mynav=' + pageIn);
 
   return false;
 
 });
}); 
//]]> 
</script>
 
<div id="content">
 <p>tausch mich</p>
</div>
 
 
<div id="navi">
 <a href="index.php?mynav=email">Kontakt</a>
</div>

Damit würde dann bei Vorhandensein von JavaScript-Unterstützung ein Request an die ajax.php gesendet werden, falls kein JavaScript vorhanden wäre, würde einfach die normale Seite geladen werden.

Falls dort weitere GET-Parameter angegeben werden müssen kommen die durch den Split auch hinein, was auch vorteilhaft ist. (Beispiel von pageIn bei mehreren Argumenten: email&arg0=bla&arg1=blubb)

 

[Mr. Snoot]

Aber wird denn nicht eigentlich der Link so oder so auch auf "klassischem" Weg geöffnet? Oder fängt jQuery das ab?


Was meinst du mit "die gesamte Page geladen"? Die Page ist doch schon geladen; und dann wird dynamisch Inhalt XY nachgeladen.

 

[Belee]

@Spartan
Aha, und in der ajax.php stehen dann die ganzen includes mit den passenden GET ?

Also z.B.

if(isset($_GET['nav']) && $_GET['nav'] == 'email')
include "email.inc.php";
}
elseif
 ....
 
else {
die();
}

?

@Snoot
Ich verstehe noch weniger als du bzw. wahrcheinlich nicht mal halbsoviel wie du.
Wie gesagt, mit Ajax bzw. jQuery fange ich erst an.

 

[Spartan-117]

@Belee: Genau.

@Mr. Snoot: Stimmt, man wird dann auf die neue Seite befördert. Dies kann man jedoch mit .preventDefault() verhindern.

<script type="text/javascript">
//<![CDATA[
 
$(document).ready(function() {
 
 $("#navi a").live("click",function(e) {
  
  e.preventDefault();
 
  var pageIn = $(this).attr("href").split('=')[1];
 
 $("#content").load('ajax.php?mynav=' + pageIn);
 
   return false;
 
 });
}); 
//]]> 
</script>
 
<div id="content">
 <p>tausch mich</p>
</div>
 
 
<div id="navi">
 <a href="index.php?mynav=email">Kontakt</a>
</div>

 

[Belee]

@Spartan

Funktioniert, musste aber das

.split('=')[1];

rausnehmen da die Links mit htaccess umgeschrieben sind. Also kein index.php?mynav=email sondern, die Links sehen so aus <a href="email">Kontakt</a>. bzw. .split hier dann nie greift und immer else die(); war.

Many Merci

EDIT:
Ein kleines Problemchen habe ich aber noch.

Das ist die Navi (nur ein Punkt).

<li><?php if(isset($_GET['nav']) && $_GET['nav'] == 'contact') {
?><a href="home"><?php echo "back"; ?></a><?php } 
else { 
?><a href="email"><?php echo "email us; ?></a><?php } ?></li>
usw, nächster punkt..

Wie du siehst, wenn man z.B. email in der Navi anklickt öffnet sich also die Formular Seite und der Link ändert sich zu "back", wenn man halt dann auf "back" klickt ist man wieder auf der Hauptseite "home".

Wie könnte ich diese Funktion die mit PHP funktioniert auch für die Ajax Sache funktionell machen? da fällt mir jetzt aber auch garnichts zu ein. Habe erlichgesagt auch garnicht daran gedacht sondern erst gerade beim testen festgestellt das da doch was fehlt.

Man müsste also auch den Link austauschen, also beim Klick auf email "email" raus und "back" rein und umgekehrt.

 

[Spartan-117]

@Mr. Snoot:
Mit "die gesamte Page geladen" meinte ich, dass jQuery mit .load() einen GET-Request an den Server sendet. (Als würdest du nochmal auf die Seite gehen, nur eben im Hintergrund)

Und auch wenn du einen bestimmten Bereich definierst, welcher abgerufen werden soll, kann jQuery den Server ja nicht beeinflussen nur diesen Bereich auszugeben, da der Server ja nicht weiss dass jQuery nur an diesem Bereich interessiert ist. Deshalb lädt jQuery zuerst die gesamte Seite und fischt danach diesen Bereich raus und setzt ihn ein. (und das dauert nunmal [wenn auch nur minimal] länger als wenn nur ein bestimmter Bereich ausgegeben wird)

Deshalb finde ich die Methode mit einer separaten PHP-Datei, welche nur diese Informationen bereitstellt, welche auch wirklich gebraucht werden, besser.

Natürlich würde es auch über die index.php gehen, in dem dem Script mitgeteilt wird, dass es sich um einen Ajax-Request handelt (mittels GET- oder Post-Parameter o.ä.) und nur der entsprechende Bereich bereitgestellt werden soll. Was jedoch meiner Meinung nach nur unnötig kompliziert ist.

@Belee:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
	$("#navi a").live("click",function(e) {
		e.preventDefault();
		var pageIn = $(this).attr("href");
		$("#content").load('ajax.php?nav=' + pageIn);
		if(pageIn == "contact") {
			$(this).attr("href","home").val("back;");
		}
		return false;
	});
}); 
//]]> 
</script>

Dieses Script macht eigentlich das gleiche wie das PHP-Script. (Es prüft ob $_GET['nav'] == "contact"[sollte es nicht email sein?], und falls ja wird das href-Attribut mit home ersetzt und der Name zu back geändert.