Ankündigung

Einklappen
Keine Ankündigung bisher.

jQuery Ajax

Einklappen

Neue Werbung 2019

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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
    apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

  • #2
    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); 
    }); 
    [url]www.php-maven.org[/url] PHP und Maven vereint: Build/Deploy/Produktion/Konfiguration, Projekt Management, CI, PHPUnit, zahlreiche Frameworks
    Twitter @ [url]https://twitter.com/#!/mepeisen[/url] und Facebook @ [url]http://t.co/DZnKSUih[/url]

    Kommentar


    • #3
      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.
      apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

      Kommentar


      • #4
        Nein, aber du muss im Success ja immer nur die Event-Handler erneut setzen. In deinem Fall dann alle drei statt nur einen.
        [url]www.php-maven.org[/url] PHP und Maven vereint: Build/Deploy/Produktion/Konfiguration, Projekt Management, CI, PHPUnit, zahlreiche Frameworks
        Twitter @ [url]https://twitter.com/#!/mepeisen[/url] und Facebook @ [url]http://t.co/DZnKSUih[/url]

        Kommentar


        • #5
          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
          apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

          Kommentar


          • #6
            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.
            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.

            Kommentar


            • #7
              ja mit body bereich meinte ich den Quellcode in <body></body> und mein JavaScript wird immer im <head></head> ausgeführt
              apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

              Kommentar


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

                Kommentar


                • #9
                  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
                  apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                  Kommentar


                  • #10
                    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.
                    [url]www.php-maven.org[/url] PHP und Maven vereint: Build/Deploy/Produktion/Konfiguration, Projekt Management, CI, PHPUnit, zahlreiche Frameworks
                    Twitter @ [url]https://twitter.com/#!/mepeisen[/url] und Facebook @ [url]http://t.co/DZnKSUih[/url]

                    Kommentar


                    • #11
                      Code:
                      $(document).ready(function(){
                      //page initialisieren
                       var page = 0;
                          $('span.next').live('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);
                           
                                      }
                                  });
                          });
                      });

                      Kommentar


                      • #12
                        ach sorry bin total durcheinander gekommen, eigentlich wollte ich DAS hier in anderen forum schreiben

                        und wegen der x und y variable, ich weis nicht, irgendwie ist da was schief gelaufen, habe mich mit einem Kolegen unterhalten einfach ignorieren.

                        mein problem ist halt dass ich irgendwie hinkriegen muss die variable page
                        nur beim ersten mal auf einen wert setzen und danach soll der wert über JS geändert werden.

                        MFG
                        apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                        Kommentar


                        • #13
                          Schau in meinen allerersten Post. Mehr Hilfe verweigere ich aufgrund des Crosspostings.
                          [url]www.php-maven.org[/url] PHP und Maven vereint: Build/Deploy/Produktion/Konfiguration, Projekt Management, CI, PHPUnit, zahlreiche Frameworks
                          Twitter @ [url]https://twitter.com/#!/mepeisen[/url] und Facebook @ [url]http://t.co/DZnKSUih[/url]

                          Kommentar


                          • #14
                            Zitat von mepeisen Beitrag anzeigen
                            Schau in meinen allerersten Post. Mehr Hilfe verweigere ich aufgrund des Crosspostings.
                            Toll jetzt kriege ich von beiden foren keine hilfe in anderen wollte nur ein Edit dranhängen um zu sagen hier bin etwas weitergekommen.


                            @stayInside

                            das mit live hat fast funktioniert. Da wird jetzt nach jedem mal der Eventhandler einmal mehr ausgelößt. habe mal die page nummer ausgeben lassen(alert(page)) und und erstmal kommt 1, dann nach einem klick kommt 1 und gleich danach 2, und nach nächsten klick kommt 1,2,3 usw.
                            apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                            Kommentar


                            • #15
                              [MOD: Thread geschlossen]
                              [COLOR="#F5F5FF"]--[/COLOR]
                              [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                              [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                              [COLOR="#F5F5FF"]
                              --[/COLOR]

                              Kommentar

                              Lädt...
                              X