XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   jQuery - verschachtelte website (http://xhtmlforum.de/showthread.php?t=58880)

Illuminu 18.10.2009 08:25

jQuery - verschachtelte website
 
Hoi.

Ich sah kein eigenes Forum für jQuery und ging einfach dreisterweise mal davon aus, dass es ins javascript-forum gehört.

Ich bin gerade dabei meine Website mit jQuery zu "basteln".
Ich komm soweit ganz gut klar, nur hab ich jetzt ein Problem.


Um das ganze Anhand eines Beispiels zu erklären:
In der linken Navigationsleiste (definiert als "LeftNav") befindet sich ein "Link" namens "Obst". Klicke ich darauf erscheinen in der rechten Navigationsleiste (definiert als "RightNav") weitere "Links" Namens "Apfel", "Birne", "Tomate". Im mittleren div (definiert als "main") steht nun "Obst sind Erzeugnisse der Natur, die meist an Bäumen wachsen."

Das Problem:
Wenn ich nun darauf klicke soll im mittleren div, das ich als "main" definiert habe eine Beschreibung über Äpfel, Birnen, Tomaten erscheinen. was aber nicht passiert.

Zweites, eher Nebensächliches Problem:
Ebenso wollte ich in die obere Navigationsleiste ("TopNav") einen Newsticker mit Javascript einbauen, welcher ebenfalls nicht funktioniert. wenn ich die html-datei, aus welcher sich jQuery die informationen über den inhalt der divs holt und in der dieser Newsticker dargestellt wird öffne, funktioniert dieser Newsticker aber. Jedoch nicht auf meiner hauptseite.


Ich hoffe das war nun alles verständlich ausgedrückt, falls nicht: bitte nachfragen. - zur not kann ich die seite auch hochladen.

lG,
Illu

PS: Ich denke der Grund dafür, dass sich das main-div nicht füllt ist, dass jQuery das main-div in der, im RightNav-geladenen, html-seite öffnen will. (blöder satz, wüsste nicht wie ich das sonst ausdrücken sollte, tut mir leid.)
Falls ich damit recht habe wäre ich für eine Lösung meines Problems überaus dankbar.

Scheppertreiber 18.10.2009 08:53

Dann lade mal hoch. Ich wühle mich auch gerade in JQuery ein. Da Du ja mit
ziemlicher Sicherheit irgendeine Kleinigkeit übersehen hast, wird gerade diese
Kleinigkeit auch in Deiner Beschreibung fehlen :D

Illuminu 18.10.2009 11:18

gut. ich hoffe du verzeihst mir, dass ich das erst heute nachmittag machen werde, hatte heute Nacht kaum schlaf. - Bis dahin: Glück auf! ;)

Scheppertreiber 18.10.2009 12:36

Und ich komme gerade vom Frühschoppen *prost*, Glück auf nach Schalke :D:D:D

Illuminu 18.10.2009 16:52

hier, bitteschön:
Unbenanntes Dokument

wunder dich nich über das chaos, das is lediglich ne skizze von der website, design kommt später drüber, wenn das läuft.

Schalke? wieso Schalke? Ich bin Franke.

Scheppertreiber 18.10.2009 17:02

Glück auf == Pott == Schalke. Schwarz/Gelb ist Passau :twisted:

Ich komme jetzt gerade vom Fußball. Unsere Dorfmannschaft hat gewonnen und
ich einen im Tee. Ernstgemeintes kommt dann morgen ! :D:D:D

Grüße aus Unterfranken.

Pr0g 18.10.2009 18:04

Zitat:

Zitat von Illuminu (Beitrag 448340)
Ich sah kein eigenes Forum für jQuery und ging einfach dreisterweise mal davon aus, dass es ins javascript-forum gehört.

jQuery ist auch "nur" ein JavaScript also ja es passt gut hier rein.

Zitat:

Zitat von Scheppertreiber (Beitrag 448350)
Und ich komme gerade vom Frühschoppen *prost*, Glück auf nach Schalke :D:D:D

Zitat:

Zitat von Scheppertreiber (Beitrag 448372)
Ich komme jetzt gerade vom Fußball. Unsere Dorfmannschaft hat gewonnen und
ich einen im Tee. Ernstgemeintes kommt dann morgen ! :D:D:D

Nicht, dass du noch nüchtern wirst :mrgreen:

Zitat:

Zitat von Illuminu (Beitrag 448371)
hier, bitteschön:
Unbenanntes Dokument

Also ich sehe folgenden Code bei dir im Dokument:
Code:

$("#index").click(function(){$("#main").load("mainindex.html"); $("#TopNav").load("topnavindex.html"); $("#RightNav").load("rightnavindex.html");});

$("#shops").click(function(){$("#main").load("shops.html");});
$("#loggedin").click(function(){$("#main").load("loggedin.html");});

Die erste Zeile ist ok. Das Element #index existiert auf der Hauptseite und der onclick-Code kann diesem auch hinzugefügt werden.

Die anderen beiden Zeilen jedoch sind nicht ganz ok. Denn zu dem Zeitpunkt der Ausführung (nach dem Laden der Hauptseite) existiert noch kein Link mit der Id #shops oder #loggedin. Denn diese stehen in der "topnavindex.html", welche erst nachträglich geladen wird.

Du musst also dafür sorgen, dass die Zuweisungen erst gemacht werden, wenn die Links auch vorhanden sind. Also immer nach dem Laden der rechten Linkleiste.

Stelle das Script dazu wie folgt um:
Code:

$("#index").click(function(){
  $("#main").load("mainindex.html");
  $("#TopNav").load("topnavindex.html");
  $("#RightNav").load("rightnavindex.html");

  $("#shops").click(function(){$("#main").load("shops.html");});
  $("#loggedin").click(function(){$("#main").load("loggedin.html");});
});

Ich habe es nicht getestet, kannst ja mal probieren ob es so geht.

Illuminu 18.10.2009 22:06

hmm nein, leider nicht. immernoch das selbe ergebnis, leider.

das schlimme daran ist auch, dass die seite am ende dreifach verschachtelt sein wird.

klick in Linke Navi: top-navi, rechte navi und main ändern sich. klick auf einen link in der top-navi: rechte navi und main ändern sich. klick auf einen link in der rechten navi: main ändert sich.

ausserdem überleg ich noch ob ich den chat in einem neuen fenster öffnen will oder in der main. (aus benutzerfreundlichkeit fast in neuem fenster... was dann aber kein problem darstellt.)

ebenso hab ich vor das seitendesign der uhrzeit anzupassen... mal sehen wie ich das hinkriege.

trixta 19.10.2009 00:51

Hallo,

das was Prog schreibt ist eigentlich richtig. Das Problem ist jedoch, daß die Inhalte ja nicht sofort nach dem Klick da sind, sondern erst nachdem die Response da ist. jQuery gibt dir dafür einen Complete-Callback. Der Code müßte damit so aussehen:

Code:

function bindRightnav(){
    $("#shops").click(function(){$("#main").load("shops.html");});
    $("#loggedin").click(function(){$("#main").load("loggedin.html");});
}
$("#index").click(function(){
  $("#main").load("mainindex.html");
  $("#TopNav").load("topnavindex.html");
  $("#RightNav").load("rightnavindex.html", bindRightnav);
});

Eine weitere Möglichkeit wäre hierbei die Live-Methode zu nutzen. Das würde dann so aussehen:

Code:

$("#shops").live("click", function(){$("#main").load("shops.html");});
$("#loggedin").live("click", function(){$("#main").load("loggedin.html");});

$("#index").live("click", function(){
  $("#main").load("mainindex.html");
  $("#TopNav").load("topnavindex.html");
  $("#RightNav").load("rightnavindex.html", bindRightnav);
});

Ansonsten würde ich mir aber nen etwas anderen Umgang mit Ajax und Javascript wünschen. Aber das Leben ist kein Wunschkonzert...

Illuminu 19.10.2009 02:38

wenn ich das mit live-methode mache öffnet er mir nichtmal die rechte navi.

ich hoffe ich habe damit nichts falsches angestellt:
Code:

<script>
$(document).ready(function(){
$("#shops").live("click", function(){$("#main").load("shops.html");});
$("#loggedin").live("click", function(){$("#main").load("loggedin.html");});

$("#index").live("click", function(){
  $("#main").load("mainindex.html");
  $("#TopNav").load("topnavindex.html");
  $("#RightNav").load("rightnavindex.html", bindRightnav);
});



Alle Zeitangaben in WEZ +2. Es ist jetzt 23:38 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023