Onkel Schnitzel: Problem mit $.ajax.done()

Nabend,

ich schon wieder. Jetzt hakts bei mir bezüglich des AJAX-Response. Erstens will mir partout keine vernünftige Auswertung des done() gelingen und zweitens weiß ich nicht, ob das eigentlich gut ist, wie ich das Formular absende. Ich gehe einfach mal meine Schritte durch. So sende ich mein Formular ab:

  
<form action="spieltag.php?saison_id=<?=$saison_id?>" onsubmit="return sendFormular();" method="post">  

Das eigentliche Absenden wollte ich mit return false unterdrücken. Mit dem Rückgabewert aus sendFormular() wollte ich entscheiden, ob das Formular weiter angezeigt wird (bei fehlerhaftem AJAX-Request => return false) oder ob bei erfolgreichem AJAX-Request auf die action-Adresse weitergeleitet wird (return true).

Und so sieht mein JS-Funktion für den AJAX-Request aus. Ich habe mich dabei an das Beispiel von molily gehalten: http://forum.de.selfhtml.org/archiv/2012/9/t211124/#m1440363

  
function sendFormularAjax() {  
  var SpielerdatenStr = JSON.stringify(SpielerdatenArray);  
  
  return $.ajax({  
	url: 'sql/ajax_spielerstat.php',  
	type: 'post',  
	dataType: 'json',  
	data: {  
		str: SpielerdatenStr,  
		spieltag_id: <?=$spieltag_id?>  
		}  
  });  
}  
  
function sendFormular () {  
	sendFormularAjax.done(function() {  
		console.log('OK');  
	});  
	return false;  
}  

Damit habe ich jetzt mehrere Probleme:

1.) Ich bekomme folgende Fehlermeldung: "Uncaught TypeError: Object function send FormularAjax() ... has no method 'done'". Das mit der Registrierung des Erfolgs-Handlers funktioniert also bei mir irgendwie nicht. Rufe ich die Funktion sendFormularAjax() im onsubmit direkt auf, funktioniert zumindest der Request und der Eintrag der Formulardaten in die DB. Eine Erfolgs-Rückmeldung habe ich damit natürlich nicht.

2. Irgendwie funktioniert so auch meine Überlegung bezüglich Formularabsendung per return true/false nicht mehr, das Formular wird jetzt immer abgesendet und ich kann in der Konsole nicht mal mehr mein AJAX-Verarbeitungs-Script untersuchen.

Ursprünglich sah meine Funktion so aus, da wurde zumindest das Absenden des Formulars erstmal per return false unterdrückt und ich konnte alles schön untersuchen.

  
function sendFormular () {  
  var SpielerdatenStr = JSON.stringify(SpielerdatenArray);  
  var send = false;  
	  
  $.ajax({  
    url: 'sql/ajax_spielerstat.php',  
    type: 'post',  
    dataType: 'json',  
    data: {  
      str: SpielerdatenStr,  
      spieltag_id: <?=$spieltag_id?>  
    }  
  }).done(function () { send = true; });	  
	  
  return send;	  
}  

Das .done() hat hier aber auch nicht gegriffen, was ja wohl an der asynchronen Verarbeitung liegt, wie ich so halbwegs verstanden habe. Deswegen hatte ichs ja dann über molilys Beispiel versucht.

Das war jetzt vielleicht ein bißchen konfus, aber vielleicht kann trotzdem irgendwer weiterhelfen.

Gute Nacht erstmal.

  1. Moin

    nutze doch bitte jQuery richtig, wenn du es bereits eingebunden hast. Außerdem gibt es bereits eine Kurzversion für POST in jQuery.

    Einfacher gehts über (nicht getestet, sollte aber soweit stimmen):

      
    $(document).ready(function(){  
        $('form').submit( function(){  
           $.post( "sql/ajax_spielerstat.php", {str: SpielerdatenStr,  
                                                 spieltag_id:<?php echo $spieltag_id?}  
           }).done(function( data ) {  
                alert( "Data Loaded: " + data );  
           }).fail(function() {  
                alert( "error" );  
           });  
           return false;  
        });  
    });  
    
    

    dazu sei zu bemerken, dass das Formular besser eine ID bekommen sollte. Sonst werden alle Formulare hiernach aufgelöst. eventuell musst du vorher die zu übertragenen Daten aufbereiten (wie du es ja schon getan hast)

    Gruß Bobby

    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
    ### Henry L. Mencken ###
    -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
    ## Viktor Frankl ###
    ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    1. Moin

      Achtung,

      der Fehlerteufel hat zugeschlagen. Eine geschweifte Klammer zuviel.

        
      $(document).ready(function(){  
          $('form').submit( function(){  
             $.post( "sql/ajax_spielerstat.php", {str: SpielerdatenStr,  
                                                   spieltag_id:<?php echo $spieltag_id?}  
             ).done(function( data ) {  
                  alert( "Data Loaded: " + data );  
             }).fail(function() {  
                  alert( "error" );  
             });  
             return false;  
          });  
      });  
      
      

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
      ### Henry L. Mencken ###
      -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
      ## Viktor Frankl ###
      ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
      1. Hallo Bobby,

        ich habe jetzt mein Script mal entsprechend deinem Vorschlag angepasst:

          
        $(document).ready(function() {  
        	$('#formular').submit( function() {  
        		var SpielerdatenStr = JSON.stringify(SpielerdatenArray);  
        		console.log(SpielerdatenStr);  
        		var send = false;  
        	   $.post( "sql/ajax_spielerstat.php", {str: SpielerdatenStr, spieltag_id:<?php echo $spieltag_id?>}			  
        	   ).done(function(data) {  
        			alert( "Data Loaded: " + data );  
        	   }).fail(function(jqXHR, textStatus, errorThrown) {  
        			alert( errorThrown );  
        	   });  
        	   return send;  
        	});  
        });  
        
        

        Damit bekomme ich jetzt ein alert mit der Fehlermeldung "SyntaxError: JSON.parse: unexpected end of data". Die ajax_spielerstat.php liefert aber ein 200 OK und es werden auch alle Daten korrekt in die DB eingetragen.

        So sieht der übertragene JSON-String aus:

        "[null,null,null,null,[1,90,0,0,8,0,0,0,0],null,null,null,null,null,[1,39,46,85,8,1,0,0,0],[1,90,0,0,8,0,0,0,0],null,null,null,null,null,null,[1,88,0,89,8,0,0,0,0],[1,90,0,0,8,1,0,0,1],null,null,null,null,null,null,null,[1,31,46,0,8,0,0,77,0]]"

        Irgendwie will hier grad gar nichts klappen :-(

        Gruß

        Onkel Schnitzel

        1. Moin

          Damit bekomme ich jetzt ein alert mit der Fehlermeldung "SyntaxError: JSON.parse: unexpected end of data". Die ajax_spielerstat.php liefert aber ein 200 OK und es werden auch alle Daten korrekt in die DB eingetragen.

          So sieht der übertragene JSON-String aus:

          "[null,null,null,null,[1,90,0,0,8,0,0,0,0],null,null,null,null,null,[1,39,46,85,8,1,0,0,0],[1,90,0,0,8,0,0,0,0],null,null,null,null,null,null,[1,88,0,89,8,0,0,0,0],[1,90,0,0,8,1,0,0,1],null,null,null,null,null,null,null,[1,31,46,0,8,0,0,77,0]]"

          Irgendwie will hier grad gar nichts klappen :-(

          nicht verzweifeln. Also, deine Abfrage scheint erstmal i.O. Wie sieht denn der Body der HTTP-Request und der HTTP-Response-Nachricht aus? (mal mit Firebug oder so auslesen)

          Der Fehler deutet auf ein nicht korrektes JSON-Format hin.

          Gruß Bobby

          --
          -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
          ### Henry L. Mencken ###
          -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
          ## Viktor Frankl ###
          ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
          1. Moin

            ich habs mal spaßeshalber getestet:

              
              
             $('#formular').submit(function(data)  
                {  
              
                    var SpielerdatenStr=JSON.stringify([null,null,null,null,[1,90,0,0,8,0,0,0,0],null,null,null,null,null,[1,39,46,85,8,1,0,0,0],[1,90,0,0,8,0,0,0,0],null,null,null,null,null,null,[1,88,0,89,8,0,0,0,0],[1,90,0,0,8,1,0,0,1],null,null,null,null,null,null,null,[1,31,46,0,8,0,0,77,0]]);  
                            console.log(SpielerdatenStr);  
                            var send = false;  
                       $.post( basedir+"widgets/setallleistungen/setallleistungen.php", {str: SpielerdatenStr, spieltag_id:7}  
                       ).done(function(data) {  
                                    alert( "Data Loaded: " + data );  
                       }).fail(function(jqXHR, textStatus, errorThrown) {  
                                    alert( errorThrown );  
                       });  
                       return send;  
            });  
            
            

            Request-Body:

            str=%5Bnull%2Cnull%2Cnull%2Cnull%2C%5B1%2C90%2C0%2C0%2C8%2C0%2C0%2C0%2C0%5D%2Cnull%2Cnull%2Cnull%2Cnull%2Cnull%2C%5B1%2C39%2C46%2C85%2C8%2C1%2C0%2C0%2C0%5D%2C%5B1%2C90%2C0%2C0%2C8%2C0%2C0%2C0%2C0%5D%2Cnull%2Cnull%2Cnull%2Cnull%2Cnull%2Cnull%2C%5B1%2C88%2C0%2C89%2C8%2C0%2C0%2C0%2C0%5D%2C%5B1%2C90%2C0%2C0%2C8%2C1%2C0%2C0%2C1%5D%2Cnull%2Cnull%2Cnull%2Cnull%2Cnull%2Cnull%2Cnull%2C%5B1%2C31%2C46%2C0%2C8%2C0%2C0%2C77%2C0%5D%5D&spieltag_id=7 (Raw-Data)

            Response: 200 OK (und ne Mysql-Fehlermeldung aber "Data Loaded"

            die Anfrage stimmt 100 pro... Evetl. liegt das Problem an einer anderen Stelle deines Scriptes?

            Gruß Bobby

            --
            -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
            ### Henry L. Mencken ###
            -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
            ## Viktor Frankl ###
            ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
            1. Moin

              $.post( basedir+"widgets/setallleistungen/setallleistungen.php",

              PS: nicht wundern, anderes Ziel für die Post-Anfrage, da ichs auf einem Projekt getestet habe. Bitte nicht verwirren lassen!

              Gruß Bobby

              --
              -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
              ### Henry L. Mencken ###
              -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
              ## Viktor Frankl ###
              ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
            2. Hallo Bobby,

              die Anfrage stimmt 100 pro... Evetl. liegt das Problem an einer anderen Stelle deines Scriptes?

              Ja, das Problem war wohl, dass das angesprochene PHP-Script anscheinend eine Ausgabe bzw. Rückantwort benötigt. Ich habe meinem mysql_query() jetzt ein echo spendiert und nun bekomme ich unter .done() eine Rückmeldung. Damit kann ich jetzt weiterarbeiten.

              Vielen Dank für deine Hilfe.

              Gruß

              Onkel Schnitzel