Bernd: (Jquery / Ajax) .cick() .load() ...

HeyHo!

Also ich habe ein Problem mit einem Ajax-Script.
Dieses Script lädt immer nur den content und nicht die ganze Seite neu.
Das Script wird folgendermaßen initalisiert:

$('a').click(function(){

Alles funktioniert. Nur wenn ich aus dem Menü heraus ein Link angeklickt habe und im content bereich wieder einen Link anklicken möchte funktioniert das nicht. Ich denke das kommt daher, weil nur das Menü berücksichtigt wurde da es von anfang an mit dem handler geloadet wurde. Der Dynamisch nachgeladene HTML-Code "weiß" nix davon, dass ein .click-Handler existiert.

Richtig? Wie löse ich das?

Bernd

  1. hi,

    ... Der Dynamisch nachgeladene HTML-Code "weiß" nix davon, dass ein .click-Handler existiert.

    Richtig? Wie löse ich das?

    Richtig eingrenzen. Zur Verfügung hast Du alert(), eine Fehlerkonsole und was am Server ankommt (Request, Parameter) solltest Du Dir unbedingt auch mal anschauen, im Zweifelsfall schreib den ankommenden POST oder GET in eine Datei. Das kann Dir keiner abnehmen, das musst Du schon selber machen.

    Hotti

    1. hi,

      ... Der Dynamisch nachgeladene HTML-Code "weiß" nix davon, dass ein .click-Handler existiert.

      Richtig eingrenzen. Zur Verfügung hast Du alert(), eine Fehlerkonsole und

      Okay ich meiner Lösung schon einen Schritt näher.

      Wie frage ich mit Jquery ab, ob ich mich innerhalb eines divs befinde mit der id="content"? Dabei kann es sein, dass der html code unterschiedlich viele div-Verschachtelungen hat. Ich muss aber nur wissen ob der .click innerhalb von <div id="content"> <div ..> ...<a href="">!!</a> </div> </div> ausgeführt wurde.

      Wie geht das?

      Danke
      Bernd

      1. Wie frage ich mit Jquery ab, ob ich mich innerhalb eines divs befinde mit der id="content"?

        Mit einem CSS-Selektor.

        Ich muss aber nur wissen ob der .click innerhalb von <div id="content"> <div ..> ...<a href="">!!</a> </div> </div> ausgeführt wurde.

        Ignoriere was hotti geschrieben hat, die richtige Lösung wurde bereits gepostet. Wahlweise natürlich auch direkt in der jQuery-Doku.

        In deinem Fall für "click" zwar nicht relevant, aber dennoch sollte man den Abschnitt Caveats im Hinterkopf behalten.

    2. Richtig eingrenzen. Zur Verfügung hast Du alert(), eine Fehlerkonsole und was am Server ankommt (Request, Parameter) solltest Du Dir unbedingt auch mal anschauen, im Zweifelsfall schreib den ankommenden POST oder GET in eine Datei. Das kann Dir keiner abnehmen, das musst Du schon selber machen.

      Ach Horst, du solltest dir ggf. einfach mal ein Nuhr-Programm ansehen wenns um jQuery geht :D

      1. hi,

        Ach Horst, du solltest dir ggf. einfach mal ein Nuhr-Programm ansehen wenns um jQuery geht :D

        Ach lass ma. Ich weiß schon selbst, wo ich hingucken muss, wenn in meinen Anwendungen mal was nicht funktioniert ;-)

        Viele Grüße,
        Hotti

        1. Ach lass ma. Ich weiß schon selbst, wo ich hingucken muss, wenn in meinen Anwendungen mal was nicht funktioniert ;-)

          Um das gings mir nicht, es geht um die effizente Lösung von Problemen.

          Bei der aktuellen Fragestellung muss der OP eine Methode durch eine andere ersetzen (bzw. im Falle von click -> live nur ein Argument hinzufügen) - du würdest für dasselbe Problem einen komplett neuen Browser mit JavaScript-Engine in Perl schreiben :p

          1. hi,

            Bei der aktuellen Fragestellung muss der OP eine Methode durch eine andere ersetzen (bzw. im Falle von click -> live nur ein Argument hinzufügen) - du würdest für dasselbe Problem einen komplett neuen Browser mit JavaScript-Engine in Perl schreiben :p

            Quatsch. Ich hab mein eigenes Framework, das ist längst fertig.

            So blöd bin ich nicht, dass ich das Rad bei jeder Anwendung neu erfinde. Mir ists auch egal, ob ein Framework jQuark heißt oder jEigenbau, das Funktionsprinzip ajax ist überall dasselbe und mit jQuark kannste genauso Käse brauen wie mit jEigenbau ;-)

            Schöne Grüße,
            Horst Heimchen

            1. So blöd bin ich nicht, dass ich das Rad bei jeder Anwendung neu erfinde. Mir ists auch egal, ob ein Framework jQuark heißt oder jEigenbau, das Funktionsprinzip ajax ist überall dasselbe und mit jQuark kannste genauso Käse brauen wie mit jEigenbau ;-)

              Ja und der "Käse" hier war eindeutig durch den OP beschrieben: angehängte Events werden nicht auf erste später hinzugefügte Knoten im DOM angewandt. Solche wunderbaren Fehlerbeschreibungen sind hier selten und trotzdem gibst du eine völlig irreführende Antwort.

              Die Lösung ist sonnenklar und wurde von Ole. geliefert - dein Hinweis von wegen debuggen ist eben völlig am Ziel vorbei gegangen, da der OP bereits wusste was das Problem ist - nur eben nicht wie man es am vernünftigsten löst.

              Wenn das Problem bereits eingegrenzt ist, ist debugging mittels Kontrollausgaben absolut hirnverbrannt.

              1. Wenn das Problem bereits eingegrenzt ist, ist debugging mittels Kontrollausgaben absolut hirnverbrannt.

                Ja, sowas in der Art hab ich mir auch gedacht :-)

                Jedenfalls lief es alleine mit der .live()-Variante auch nicht(!)

                (Code anschauen! (unten))

                Wer genau hin schaut, erkennt, dass ich 2 mal den selben Code mit 2 unterschiedlichen Handlern "missbrauche", aber so läufts!
                der .live()-Handler greift im <div id="content">-Bereich und der .click()-Handler greift im Menü. Ein Problem was dazu kommt ist, dass im Menü noch ein Toggle-Handler ein wörtchen mitzureden hat.
                Daher auch mal mit return false; und mal ohen!
                Denn im Menü bzw beim toggle-Handler steht bereits ein return false; im code. (Den rest muss man nicht unbedingt verstehen!)

                Eine letzte Frage wäre: Kann ich 2 Handler irgendwie Kombinieren?
                Und: Läuft das dann auch :-D ?

                Bernd

                  
                  
                	$('a').live("click", function(){  
                  
                		//alert("a click");  
                		var toLoad = $( this ).attr('href')+' #content';  
                		$('#content').hide('normal',loadContent);  
                		//$('#load').remove();  
                		$('#wrapper').append('<span id="load">LOADING...</span>');  
                		$('#load').show();  
                		window.location.hash = $( this ).attr('href').substr(0,$( this ).attr('href').length-4);  
                  
                		function loadContent() {  
                			$('#content').load(toLoad,'',showNewContent)  
                		}  
                		function showNewContent() {  
                			$('#content').show(hideLoader);  
                		}  
                		function hideLoader() {  
                			$('#load').hide();  
                		}  
                  
                  
                		return false;  
                  
                	});  
                  
                  
                	$('a').click(function(){  
                  
                		//alert("a click by ");  
                		var toLoad = $( this ).attr('href')+' #content';  
                		$('#content').hide('normal',loadContent);  
                		//$('#load').remove();  
                		$('#wrapper').append('<span id="load">LOADING...</span>');  
                		$('#load').show();  
                		window.location.hash = $( this ).attr('href').substr(0,$( this ).attr('href').length-4);  
                  
                		function loadContent() {  
                			$('#content').load(toLoad,'',showNewContent)  
                		}  
                		function showNewContent() {  
                			$('#content').show(hideLoader);  
                		}  
                		function hideLoader() {  
                			$('#load').hide();  
                		}  
                  
                  
                		//return false;  
                  
                	});  
                
                
                1. der .live()-Handler greift im <div id="content">-Bereich und der .click()-Handler greift im Menü. Ein Problem was dazu kommt ist, dass im Menü noch ein Toggle-Handler ein wörtchen mitzureden hat.

                  Von toggle() war vorher nie die Rede ;)

                  Daher auch mal mit return false; und mal ohen!

                  Denn im Menü bzw beim toggle-Handler steht bereits ein return false; im code. (Den rest muss man nicht unbedingt verstehen!)

                  Eine letzte Frage wäre: Kann ich 2 Handler irgendwie Kombinieren?

                  Soweit ich das beurteilen kann ist es nicht notwendig überhaupt zwei zu haben - click(function() {}) lässt sich afaik immer 1:1 durch live(click, function() {}) ersetzen.

                  Was ich aber nicht verstehe, warum du nich $.ajax() verwendest - da lässt sich viel einfach kontrollieren wann was passiert.

                  Deine Funktionswüste mit loadContent, showNewContent und hideLoader kannst du dir sparen wenn du mit beforeSend, success und complete arbeitest.

                  1. Deine Funktionswüste mit loadContent, showNewContent und hideLoader kannst du dir sparen wenn du mit beforeSend, success und complete arbeitest.

                    Aach allerdings ist das eine Funktionswüste, das kommt davon wenn eins nach dem anderen dazu kommt und nicht von anfang an klar ist was man möchte :-(

                    Werde ich mir bei Gelegenheit mal ansehen... Danke!

                    Bernd

                    1. Deine Funktionswüste mit loadContent, showNewContent und hideLoader kannst du dir sparen wenn du mit beforeSend, success und complete arbeitest.

                      Aach allerdings ist das eine Funktionswüste, das kommt davon wenn eins nach dem anderen dazu kommt und nicht von anfang an klar ist was man möchte :-(

                      Werde ich mir bei Gelegenheit mal ansehen... Danke!

                      Nicht bei Gelegenheit, am besten gleich - macht deinen Code halb so lang und 2x verständlich - also 4x so gut :p

                      btw: beforeSend darf natürlich die requestdaten nur durchreichen und sie nicht manipulieren, wenn du sie zum Setzen der Ladeanimation missbrauchst. Ansonsten kannst du sie davor auch händisch einfügen und bei error oder complete wieder entfernen.

              2. hi,

                Wenn das Problem bereits eingegrenzt ist, ist debugging mittels Kontrollausgaben absolut hirnverbrannt.

                Ja klar, wenn einer mit den jQuark::Methods bereits nicht klarkommt und nicht weiß wann und wo er die aufrufen soll mit welchen Parametern, ja, da kann ich freilich nicht helfen, da hast Du schon Recht ;-)

                Sch?ne Gr??e,
                Horst Holzheizer

                --
                Zum Schulterklopfen empfehle ich Baseballschläger.
                1. Ja klar, wenn einer mit den jQuark::Methods bereits nicht klarkommt und nicht weiß wann und wo er die aufrufen soll mit welchen Parametern, ja, da kann ich freilich nicht helfen, da hast Du schon Recht ;-)

                  Man kann nicht verlangen, dass jemand/jeder sämtliche Methoden eines Framesworks kennt, sämtliche Funktionen einer Programmiersprache oder sämtliche Elemente- und Attribute einer Auszeichnungssprache.

                  Selbst wenn man über eine Funktion schonmal beim Stöbern in der Doku dürbergelesen hat, ist nicht davon auszugehen, dass man sie spontan in vollem Umfang und ihren Anwendungsmöglichkeiten gleich "geistig" griffbereit hat.

  2. Hi,

    schau dir mal das jQuery-Live-Event an. Das könnte dir helfen.

    Gruß
    Ole