jQuery Ajax

BlackScorp · 29.01.2010, 09:47

Hallo leute ,

ich habe mal hier ein kleine Problemchen. Ich wollte eine Seitenblättern funktion mit Ajax(jQuery) umsetzen. dazu habe ich folgenden Code verwendet:

PHP-Code:

  $(document).ready(function(){

//page initialisieren

 var page = 0;

    $('span.next').click(function(){

 //nach klicken page um 1 erhöhen

        page++;

        $.ajax({

                type: "GET",

                url: "index.php",

                data: "page="+page,

                success: function (htmlCode){

                       //inhalt laden und ausgeben

                    $('body').html(htmlCode);

     

                }

            });

    });

});

das Problem dabei ist, dass es nur beim ersten Mal funktioniert, danach kann ich klicken so oft ich will es passiert nichts.
mit alert(page) in der success option wird auch nur nach dem ersten klicken die seiten nummer angezeigt aber bei weiteren klicks passiert nichts.

Weis einer woran es liegen könnte oder was ich ausporbieren könnte um den Fehler zu finden?

MFG

mepeisen · 29.01.2010, 10:13

jQuery fehlt mir die Erfahrung. Du dürftest aber da es im onReady ist, nur einmal den click-Event-Handler setzen. Da du den kompletten Body austauscht ist der Handler weg. Wie du jQuery dazu bringst, es auch bei neuen Elementen automatisch auszutauschen, weiß ich nicht. Alternativ machst du sowas:

PHP-Code:

  var func = function(){ 

 //nach klicken page um 1 erhöhen 

        page++; 

        $.ajax({ 

                type: "GET", 

                url: "index.php", 

                data: "page="+page, 

                success: function (htmlCode){ 

                       //inhalt laden und ausgeben 

                    $('body').html(htmlCode); 

                    $('span.next').click(func); 

                } 

            }); 

    };

 
$(document).ready(function(){ 

//page initialisieren 

 var page = 0; 

    $('span.next').click(func); 

});

BlackScorp · 29.01.2010, 10:23

Hi, danke ich werde es mal versuchen den Click-Event-Handler zu setzen. Aber die Alternative wird nicht funktionieren da ich vorhabe folgendes zu machen:

PHP-Code:

  $(document).ready(function(){

//page initialisieren

 var page = 0;

    $('span.next').click(function(){

 //nach klicken page um 1 erhöhen

        page++;

       goToPage(page);

    });

 
    $('span.back').click(function(){

 //nach klicken page um 1 erhöhen

        page--;

       goToPage(page);

    });

 
    $('span.pagenr').click(function(){

 //nach klicken page um 1 erhöhen

        var PageNr = $('span.pagenr').eq($('span.pagenr').index(this));

       goToPage(PageNr);

    });

var goToPage = function(page){

 $.ajax({

                type: "GET",

                url: "index.php",

                data: "page="+page,

                success: function (htmlCode){

                       //inhalt laden und ausgeben

                    $('body').html(htmlCode);

     

                }

            });

}

});

und dann könnte ich ja nicht im success den wert von page erhöhen,verringern,setzen. Ich google noch etwas weiter, vielen dank für den tipp.

mepeisen · 29.01.2010, 11:04

Nein, aber du muss im Success ja immer nur die Event-Handler erneut setzen. In deinem Fall dann alle drei statt nur einen.

BlackScorp · 29.01.2010, 11:17

hm.. also ohne ajax brauche ich nur zu sagen $("div").click(function(){alert("asd");});

und bei jedem klick würde asd angezeigt werden. in diesem fall muss ja der click handler nicht neu gesetzt werden.

mittlweile vermute ich, dass mein problem an der initialisierung liegt. denn

ich setze page auf 0
beim klicken erhöhe ich page auf 1
hole mir inhalt von index.php?page=1 (in dem inhalt steht var page = 0; usw...)
der inhalt wird reingeladen(page wird auf 0 gesetzt)

ich klicke noch mal drauf page ist 1 und somit der gleiche inhalt wie davor.
ich schätze ich müsste die initialiesierung ändern.
was denkst du?

Ich schätze wenn ich es irgendwie hinkriege NUR den Body part aus der Datei zu laden und zu überschreiben , so dass der Head bereich nicht verändert wird, dass dann alles funktioniert
MFG

draco88 · 29.01.2010, 11:40

Dein Problem ist einfach, dass du die Elemente auf die die Listener registriert sind komplett löscht und mit neuen Quelltext ersetzt auf den natürlich noch kein Listener liegt.

Zitat:

Ich schätze wenn ich es irgendwie hinkriege NUR den Body part aus der Datei zu laden und zu überschreiben , so dass der Head bereich nicht verändert wird, dass dann alles funktioniert

Wenn du mit Body den Contentbereich(also ohne header, menu etc) meinst, dann müsste es so funktionieren. Vorrausgesetzt die auslösenden Elemente sind außerhalb des Contentbereichs.

BlackScorp · 29.01.2010, 11:42

ja mit body bereich meinte ich den Quellcode in <body></body> und mein JavaScript wird immer im <head></head> ausgeführt

draco88 · 29.01.2010, 12:12

Dann wird das nix nützen, da du die Elemente dann trotzdem überschreibst.

BlackScorp · 29.01.2010, 12:51

ok durch die hilfe aus einem anderen forum, habe ich nun es geschafft den event handler jedes mal neu zu setzen, so weit sogut, nun werden aber die variablen x und y immer auf 0 gesetzt beim laden, die sollen aber fortgeführt werden.
mein erster gedanke war, dass ich mit php ech 'var x = '.$_GET['x']; immer neu setze.
dann habe ich mir überlegt ob man es nicht mit JS die variablen beim Laden der Seite Deklarieren kann also

document.onload = function(){
var x = 0;
}

leider funktioniert das nicht, und php finde ich für dieses Problem nicht besonders geeignet.

Vllt hättet ihr einen anderen lösungsvorschlag?

MFG

mepeisen · 29.01.2010, 13:11

Crossporting oder was war das?
Ich sehe in deinem Script nirgendwo X und Y. Vielleicht fragst du diese Frage auch in diesem anderen Forum?

Ich hasse es, mir Arbeit zu machen, wenn woanders auch diese Arbeit gemacht wird. Im übrigen stand in meinem ersten Post der entsprechende Hinweis zum erneuten Setzen des Event-Handlers.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fileupload via AJAX	GSJLink	HTML, Usability und Barrierefreiheit	13	17.05.2012 21:41
AJAX - Variable von PhP erhalten auf möglichst simple Weise?	SplitterWind	JavaScript, Ajax und mehr	10	10.01.2010 04:34
Wie lade ich ein Javascript nach einer AJAX Abfrage neu?	da.eXecutoR	JavaScript, Ajax und mehr	3	21.09.2009 11:15
[Erledigt] jquery ajax, event bei nachgeladenem div auslösen	mad	JavaScript, Ajax und mehr	9	20.08.2009 21:39
jQuery mit AJAX ohne ActiceX im IE?	krush	JavaScript, Ajax und mehr	2	11.08.2009 08:54
Ajax und include reloaden	choice	JavaScript, Ajax und mehr	6	10.07.2009 13:47
Ajax + PHP + jquery Accordion zusammenführen.	gamerphil	JavaScript, Ajax und mehr	0	30.04.2009 17:42
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
[Erledigt] Jquery Ajax Rückgabewert weiterverwenden	heohni	JavaScript, Ajax und mehr	5	26.02.2009 09:52
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
1111: AJAX meets PHP (indirectly)	Nikolaus 2.0	Adventskalender 2008	5	15.12.2008 11:00
Drag & Drop via JQuery & Ajax --> Geht nicht :(	Plague	JavaScript, Ajax und mehr	2	23.10.2008 12:19
Probleme mit Sonderzeichen bei Ajax (prototype)...	go1denboy	JavaScript, Ajax und mehr	1	31.08.2008 18:44
Scriptsuche AJAX AutoComplete mit PHP + JSON	PsychoEagle	Scriptbörse	5	07.08.2008 13:32
AJAX: Session-Inhalt an PHP	Curanai	HTML, Usability und Barrierefreiheit	2	05.11.2007 15:45

29.01.2010, 09:47
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	jQuery Ajax Hallo leute , ich habe mal hier ein kleine Problemchen. Ich wollte eine Seitenblättern funktion mit Ajax(jQuery) umsetzen. dazu habe ich folgenden Code verwendet: PHP-Code: $(document).ready(function(){ //page initialisieren var page = 0; $('span.next').click(function(){ //nach klicken page um 1 erhöhen page++; $.ajax({ type: "GET", url: "index.php", data: "page="+page, success: function (htmlCode){ //inhalt laden und ausgeben $('body').html(htmlCode); } }); }); }); das Problem dabei ist, dass es nur beim ersten Mal funktioniert, danach kann ich klicken so oft ich will es passiert nichts. mit alert(page) in der success option wird auch nur nach dem ersten klicken die seiten nummer angezeigt aber bei weiteren klicks passiert nichts. Weis einer woran es liegen könnte oder was ich ausporbieren könnte um den Fehler zu finden? MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.01.2010, 10:13
mepeisen Erfahrener Benutzer Registriert seit: 21.12.2004 Beiträge: 5.234 PHP-Kenntnisse: Fortgeschritten	jQuery fehlt mir die Erfahrung. Du dürftest aber da es im onReady ist, nur einmal den click-Event-Handler setzen. Da du den kompletten Body austauscht ist der Handler weg. Wie du jQuery dazu bringst, es auch bei neuen Elementen automatisch auszutauschen, weiß ich nicht. Alternativ machst du sowas: PHP-Code: var func = function(){ //nach klicken page um 1 erhöhen page++; $.ajax({ type: "GET", url: "index.php", data: "page="+page, success: function (htmlCode){ //inhalt laden und ausgeben $('body').html(htmlCode); $('span.next').click(func); } }); }; $(document).ready(function(){ //page initialisieren var page = 0; $('span.next').click(func); }); __________________ www.php-maven.org PHP und Maven vereint: Build/Deploy/Produktion/Konfiguration, Projekt Management, CI, PHPUnit, zahlreiche Frameworks Twitter @ https://twitter.com/#!/mepeisen und Facebook @ http://t.co/DZnKSUih

29.01.2010, 10:23
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	Hi, danke ich werde es mal versuchen den Click-Event-Handler zu setzen. Aber die Alternative wird nicht funktionieren da ich vorhabe folgendes zu machen: PHP-Code: $(document).ready(function(){ //page initialisieren var page = 0; $('span.next').click(function(){ //nach klicken page um 1 erhöhen page++; goToPage(page); }); $('span.back').click(function(){ //nach klicken page um 1 erhöhen page--; goToPage(page); }); $('span.pagenr').click(function(){ //nach klicken page um 1 erhöhen var PageNr = $('span.pagenr').eq($('span.pagenr').index(this)); goToPage(PageNr); }); var goToPage = function(page){ $.ajax({ type: "GET", url: "index.php", data: "page="+page, success: function (htmlCode){ //inhalt laden und ausgeben $('body').html(htmlCode); } }); } }); und dann könnte ich ja nicht im success den wert von page erhöhen,verringern,setzen. Ich google noch etwas weiter, vielen dank für den tipp. __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

29.01.2010, 11:04
mepeisen Erfahrener Benutzer Registriert seit: 21.12.2004 Beiträge: 5.234 PHP-Kenntnisse: Fortgeschritten	Nein, aber du muss im Success ja immer nur die Event-Handler erneut setzen. In deinem Fall dann alle drei statt nur einen. __________________ www.php-maven.org PHP und Maven vereint: Build/Deploy/Produktion/Konfiguration, Projekt Management, CI, PHPUnit, zahlreiche Frameworks Twitter @ https://twitter.com/#!/mepeisen und Facebook @ http://t.co/DZnKSUih

29.01.2010, 11:17
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	hm.. also ohne ajax brauche ich nur zu sagen $("div").click(function(){alert("asd");}); und bei jedem klick würde asd angezeigt werden. in diesem fall muss ja der click handler nicht neu gesetzt werden. mittlweile vermute ich, dass mein problem an der initialisierung liegt. denn ich setze page auf 0 beim klicken erhöhe ich page auf 1 hole mir inhalt von index.php?page=1 (in dem inhalt steht var page = 0; usw...) der inhalt wird reingeladen(page wird auf 0 gesetzt) ich klicke noch mal drauf page ist 1 und somit der gleiche inhalt wie davor. ich schätze ich müsste die initialiesierung ändern. was denkst du? Ich schätze wenn ich es irgendwie hinkriege NUR den Body part aus der Datei zu laden und zu überschreiben , so dass der Head bereich nicht verändert wird, dass dann alles funktioniert MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (29.01.2010 um 11:21 Uhr).

29.01.2010, 11:42
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	ja mit body bereich meinte ich den Quellcode in <body></body> und mein JavaScript wird immer im <head></head> ausgeführt __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

29.01.2010, 12:12
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Dann wird das nix nützen, da du die Elemente dann trotzdem überschreibst.

29.01.2010, 12:51
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	ok durch die hilfe aus einem anderen forum, habe ich nun es geschafft den event handler jedes mal neu zu setzen, so weit sogut, nun werden aber die variablen x und y immer auf 0 gesetzt beim laden, die sollen aber fortgeführt werden. mein erster gedanke war, dass ich mit php ech 'var x = '.$_GET['x']; immer neu setze. dann habe ich mir überlegt ob man es nicht mit JS die variablen beim Laden der Seite Deklarieren kann also document.onload = function(){ var x = 0; } leider funktioniert das nicht, und php finde ich für dieses Problem nicht besonders geeignet. Vllt hättet ihr einen anderen lösungsvorschlag? MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

29.01.2010, 13:11
mepeisen Erfahrener Benutzer Registriert seit: 21.12.2004 Beiträge: 5.234 PHP-Kenntnisse: Fortgeschritten	Crossporting oder was war das? Ich sehe in deinem Script nirgendwo X und Y. Vielleicht fragst du diese Frage auch in diesem anderen Forum? Ich hasse es, mir Arbeit zu machen, wenn woanders auch diese Arbeit gemacht wird. Im übrigen stand in meinem ersten Post der entsprechende Hinweis zum erneuten Setzen des Event-Handlers. __________________ www.php-maven.org PHP und Maven vereint: Build/Deploy/Produktion/Konfiguration, Projekt Management, CI, PHPUnit, zahlreiche Frameworks Twitter @ https://twitter.com/#!/mepeisen und Facebook @ http://t.co/DZnKSUih