• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

JQuery Funktionen bei Seiten per Include funtz nicht

B

BigSanch

New member
Ich habe mal ne Frage, da ich nicht genau etwas gleiches finde, mal abgesehen davon dass ich nicht genau weiss was ich suchen muss.

Ich habe eine Index Seite, auf welcher ich per
Code: 
<script src="js/jquery-functions.js"></script>
meine Sammlung an Scripts einbinde.
Auf der selben Seite binde ich per
Code: 
<body>
	<div id="page">
		<div id="header"><div id="menu"><? include('files/menu.php') ?></div></div>
		<div id="content"><? include('files/homepage.php') ?></div>
		<div id="footer"> </div>
	</div>
</body>
die einzelnen Seiten in die Index.
Vom Menü aus werden per JQuery die Seiten ins DIV "content" geladen.

So folgendes Problem, was ich nicht verstehe, wo ich gerne einen Ansatz zur Lösung hätte:
Nehme ich nun die Seite XXX selbst ohne include in die Index, schreibe da folgendes rein:
Code: 
<script>
$(document).ready(function(){
	$('#rh').hide(); 
	$('#rhl').click(function(){
		$('#rh').slideToggle('slow');
	});
});
</script>
<a href="#" id="rhl"><h1>Link</h1></a>
<div id="rh">DIV</div>
Funktioniert das sehr schön, dass das DIV hidden ist und per klick ein und ausgeblendet wird.

Wenn ich nun aber den JQuery code genauso in die jquery-functions.js schreibe, welche in der Index geladen wird, geht dat nicht mehr.
Das DIV ist nicht versteckt und der Link macht nichts.
Ich denke mal dass das irgendwas mit dem include der Seite XXX zu tun hat, was mich dann aber wieder wundert, weil im Menü,
welches auch in die Index includet wird, ja alles aus der jquery-functions.js funktioniert.
Nehme ich das alles genau so und setze nur den Teil Code des JQuery ind die Seite XXX dann gehts auch wieder.

Mich stört das ja nicht wenn ich das so machen muss, möchte aber gerne verstehen warum das so ist, oder was ich da falsch mache,
denn eine saubere JS Datei ist mir einfach lieber, als in jeder einzelnen Datei Teilcodes.

Ich hoffe dass mir jemand helfen kann.
 
Mal lädst du was via include und dann via jQuery. Was aber wie und in welcher Reihenfolge und was greift auf welchen content zu? Das habe ich nicht so ganz verstanden.

Steht denn was in der Fehlerkonsole?
 
Also als erstes, ich lade auf der Indexseite wie folgt:
1. im Header jquery und plugins
2. im Body per PHP Include die entsprechenden Seiten (Header, Menü Maincontent, Footer)
3. im Menü lasse ich beim klicken auf den Button per jquery eine andere Seite in das Mainconten DIV laden

Und als zweites ist mir folgendes aufgefallen:
Ich lasse ja als Standartseite per PHP im Body die Seite homepage.php per include einbinden und per Menü kann man auf die Seite XXX gehen, wo das eben sein soll.
Mache ich dies auf diesem Wege geht das eben nicht.
Wenn ich nun aber als Standartseite gleich die XXX als erste per PHP einbinden lasse dann funtz das.
Wenn ich dann aber im Menü wieder die Seite per Menüpunkt aufrufe, dann gehts wieder nicht mehr.

Ich habe es nun erst mal so geregelt, dass ich den Code direkt in Seite XXX einfüge, denn dann geht das ja super,würde dennoch gerne verstehen was da abgeht und schief läuft.

EDIT: Und Konsole zeigt gar nichts an, keine Fehler, nur Meldung dass er (FF) css zoom und box-size nicht kennt :)
 
Wird wohl daran liegen, dass das $(document).ready(function(){...}); nur einmalig ausgeführt wird und zwar wenn die Hauptseite geladen wurde (das Document ready ist). Dies passiert aber nicht mehr, wenn du via AJAX weitere Sachen (nach)lädst. Dann musst du das manuell triggern, wenn der AJAX-request abgeschlossen ist.
 
hesst schrieb:
das geht mit ready nun aber gerade überhaupt nicht.
Zum Vergrößern anklicken....
Habe ich auch nicht so gemeint. Evtl. etwas verkehrt ausgedrückt. Hätte wohl eher schreiben sollen: Das musst du dann in dem entsprechenden Callback manuell ausfühten lassen als anonyme Funktion oder via Funktionsreferenz. Dachte das wäre klar, weil ich ja schrieb, dass das ready eine einmalige Aktion ist.
 
miniA4kuser schrieb:
Das musst du dann in dem entsprechenden Callback manuell ausfühten lassen als anonyme Funktion oder via Funktionsreferenz.
Zum Vergrößern anklicken....
das ist ja aber das problem, er hat eine vollständige seite inkl. js
die will er nachladen. dafür ist aber jquery wenig geeignet, da man dort händisch nachbessern muss.
dafür eignet sich eher ein spa-framework ember/angular/backbone oder eine ebene darunter, routing mit modular aufgebauten komponenten
 
@hesst & @miniA4kuser
Super danke für die Antworten, nun hab ich verstanden worum es geht, das ist super.

@miniA4kuser
Nun löse ich das wie folgt, dass ich das Menü einfach als einzelne Funktion ausser halb des doc ready Bereiches und
nehme die Seite per get() in eine Variable und lasse sie per html() einbinden, dann sollte es funktionieren.
Ich schreib dann obs ging.

@hesst
Kann sein, dass ich mich zu wenig damit befasst habe, ist mir aber zu umständlich mit spafrw da rum zu scripten,
denke dass es so einfacher geht, lasse mich aber gerne ein besseren belehren :)
 
Zuletzt bearbeitet:
Irgendwie fehlen da Informationen. Kannst du mal Testlinks machen, wo wir uns die einzelnen Probleme ansehen können?

PS: $(document).ready() führt die Funktion sofort aus, wenn das Dokument zu diesem Zeitpunkt schon "ready" ist.
 
kkapsner schrieb:
$(document).ready() führt die Funktion sofort aus, wenn das Dokument zu diesem Zeitpunkt schon "ready" ist.
Zum Vergrößern anklicken....
nein, das geht 1. nicht, da jquery die registrierten handler nicht mehr benötigt und diese dann auch derigistriert.
und 2. würdest du damit nicht nur die gerade nachgeladenen handler ausführen, sondern alle.
 
Natürlich geht das. Probier's aus:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(document.body).click(function(){
		$(document).ready(function(){
			alert(1);
		});
	})
});
</script>
<style type="text/css"></style>
</head>
<body>
inhalt
</body>
</html>
- aber ich hab' die Problemstellung auch vorher etwas falsch verstanden. Das .ready() soll ja gerade nicht in das HTML, das nachgeladen wird...
 
Ja, das retriggern funktioniert nicht. Ist meiner Meinung nach aber hier auch nicht nötig, da das Verstecken des Elements viel einfach über CSS direkt geht und man den "Link" (<a href="#" ist sowohl sinnfrei als auch invalide) über .live() aktiv halten könnte.
 
Weiß ich schon, hatte nur noch nicht auf dem Schirm, das man mit .on() die Eventdelegation auch recht einfach machen kann.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben