LOADER Problem mit weiterer VErlinkung

Shiaso · #1 (**permalink**) 25.05.2014, 21:41

Nachdem ich bestimmt Ewigkeiten nicht mehr hier war, muss ich mich notgedrungen doch mal wieder an die liebe Community wenden

Und zwar habe ich folgendes Problem:

Ich habe einen AJAX Loader geschrieben, der auf der ersten Ebene der Verlinkung in einen div einwandfrei funktioniert, aber auf der zweiten Ebene (Link auf geladener Unterseite) nicht mehr.
Wahrscheinlich ist es etwas total einfaches, aber mein Hirn hat bereits auf Bahnhof umgeschalten.

Es wäre toll, wenn jemand mir helfen könnte, da ich gerade echt auf keinen Ansatz komme, was nicht stimmen könnte.

Anbei der Code des Loaders und die vereinfachten Seiten:

Loader

Code:

//navigationslinks in das mittlere div einblenden
	$(document).ready(function()
	{
		$("#navigation a").click(function()
		{
			var pageToLoad = $(this).attr("href");
			var pageContent;
			$.get(pageToLoad, function(data)
			{
				pageContent=data;
				$("#screen").fadeOut("800", function()
				{
					$("#screen").html(pageContent);
					$("#screen").fadeIn("800");
				});
			});
			return false;
		});
	});
	
//Links aus DIV Screen in das mittlere div einblenden
	$(document).ready(function()
	{
		$("#screen a").click(function()
		{
				var pageToLoad = $(this).attr("href");
				var pageContent;
				$.get(pageToLoad, function(data)
				{
					pageContent=data;
					$("#screen").fadeOut("800", function()
					{
						$("#screen").html(pageContent);
						$("#screen").fadeIn("800");
					});
				});
			return false;
		});
	});

index.php

PHP-Code:


			
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
    <script type="text/javascript" src="loader.js"  language="javascript"></script>
</head>
<body>
    <div id="navigation">
        <h1>Hauptseite</h1>
        <a href="seite1.php">weiter</a>
    </div>
    <div id="screen" style="width:400px; height:300px; border: 1px solid #000;">
        <p>zu ersetzender Inhalt</p>
    </div>
</body>
</html>

Seite 1 (Link von Index - lädt im DIV screen)

PHP-Code:


			
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1>Seite 1</h1>
    <a href="seite2.php">Unterseite</a>
</body>
</html>

Seite 2 (Link von Seite 1 auf Seite 2 - Inhalt soll ebenfalls im DIV screen auftauchen)

PHP-Code:


			
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1>Seite 2</h1>
</body>
</html>

cloned · #2 (**permalink**) 26.05.2014, 09:16

Schreibst du dann also mehrmals doctypes, header, etc. in deine seite?

Shiaso · #3 (**permalink**) 26.05.2014, 10:37

Nein, Theoretisch nicht - es wird nur der reine html/php inhalt aus dem body geladen. Man könnte eigentlich die gesamte Deklaration von head, etc weglassen - das Ergebnis ist genau das Gleiche.
Ich probier es sicherheitshalber trotzdem noch einmal aus. Aber ich gehe davon aus, dass ein parent / child problem vorliegt.

protonenbeschleuniger · #4 (**permalink**) 26.05.2014, 10:55

Du darfst in dem Fall nicht click verwenden, sondern musst .on benutzen

(Warum übergibst du die Zahlen als Zeichenkette? "800")

Shiaso · #5 (**permalink**) 26.05.2014, 11:00

Beim faden bin ich nach der von w3cschools dokumentierten Methode herangegangen - die Zahlen stellen also die Millisekunden dar.
edit: gerade gesehen, die Anführungsstriche kann man weglassen...werde ich überarbeiten. Danke.

also quasi $(#navigation a).on("click",function()... ?
Ich probiere es mal aus und gebe Rückmeldung.

protonenbeschleuniger · #6 (**permalink**) 26.05.2014, 11:12

Nein, nicht die Variante. .on() | jQuery API Documentation

Code:

$('body').on('click', selektor, function() {...});

Shiaso · #7 (**permalink**) 26.05.2014, 12:15

Tausend Mal Danke, es hat einwandfrei funktioniert - muss nur für die Topnavigation (wegen home-Link) eine Ausnahme machen, aber ansonsten wird es jetzt einwandfrei angesprochen.

Zum nachvollziehen:

Code:

//Links aus DIV Screen in das mittlere div einblenden
	$(document).ready(function()
	{
		$("#screen").on("click","a",function()
		{
				var pageToLoad = $(this).attr("href");
				var pageContent;
				$.get(pageToLoad, function(data)
				{
					pageContent=data;
					$("#screen").fadeOut(800, function()
					{
						$("#screen").html(pageContent);
						$("#screen").fadeIn(800);
					});
				});
			return false;
		});
	});

Noch einmal vielen Dank =) Der Mist hatte mir ne schlaflose Nacht bescheert =/

Shiaso · #8 (**permalink**) 31.05.2014, 21:48

Da sich nun doch weitere Probleme ergeben haben, muss ich mich noch einmal an euch wenden

Und zwar folgendes: ich möchte mit oben verwendetem Script und der dazugehörigen Lösung erst einmal Inhalt nachladen.
Das funktioniert soweit ganz gut mit:

Code:

$("#screen").on("click","a",function(){}

Nun entsteht aber ein Problem, sobald in diesen nachgeladenen Seiten später wieder ein focus auf eine bildergalerie oder ähnliches geworfen wird (dahinter stehen Links! Die obige Funktion spricht also alle Links im neuen Screen an und versucht dann diese als neue Screen zu laden, was natürlich schief geht, wenn ein Zoom per Link aufgerufen werden soll (externes script).

Ich brauche also eine Unterscheidung.

Mit der vorherigen Version war das Problem nicht vorhanden, aber das weiterverlinken funktionierte nicht.

Code:

$("#screen a").click(function()

Jetzt funktioniert das weiterverlinken, aber die aufgerufenen Funktionen nicht.
Ich habe das ganze versucht mit not auszuschließen, indem ich einem div eine ID mitgegeben habe, die ausgeschlossen werden soll.

Code:

$("#screen").not("#gallery").on("click","a",function(){}

Dies funktioniert jedoch leider nicht.

Hat jemand eine Idee, wie ich das Problem lösen könnte?
Danke im Voraus =)

Thielo · #9 (**permalink**) 31.05.2014, 22:15

Du hast also ein Element, das 2 IDs hat?
Du kannst das Problem lesen, in dem du dir diese Seite aufmerksam durchliest: .not() | jQuery API Documentation

Shiaso · #10 (**permalink**) 31.05.2014, 22:33

Das habe ich bereits versucht.
Ich denke .on(){} unterstützt not nicht, indem es alles herausgreift, was ein link im zieldiv ist.
Denn in der Hauptnavigation (jedoch eine liste und nicht nachgeladen) funktioniert die Unterscheidung mit .not einwandfrei.

Nein, ich habe keinem Objekt 2 ID's zugeordnet
Zum Verständnis:

Code:

<div id="screen">alter Inhalt mit Link</div>

Link wird geklickt, Inhalt der screen wird neu geladen

Code:

<div id="screen">
   <div id="gallery">enthält Link mit dem eine Zoomfunktion und dergleichen aufgerufen wird</div>
</div>

An diesem Punkt soll er in der screen den Inhalt der gallery nicht nach Links abfragen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Singleton Pattern Problem, OOP, PHP	ArcVieh	Serveradministration und serverseitige Scripte	3	07.08.2007 11:13
Design zu CSS/HTML verarbeiten - Problem häufen sich.	Grafikamateur	CSS	2	06.08.2007 09:57
Problem mit WordPress und dem Bilder Upload	Maxefix	Serveradministration und serverseitige Scripte	0	19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 17:39
Problem mit einem CSS Layout	nARC	CSS	20	21.05.2005 06:28