JQuery.ajax: Antwort gibt zusätzlich ganze Javascripts mit aus

[KeinProblem]

Hi,

mal wieder ein wahrscheinlich triviales Problem mit Wordpress / PHP / Ajax:

Ich habe ein Plugin geschrieben. Darin ist eine Tabelle, in der Einträge ein- und ausgeblendet werden können. Die ID der ausgeblendeten wird in einem array in meiner Datenbank gespeichert. Das funktioniert auch alles wunderbar. Per submitbutton wird ein $_Post-Wert übergeben, die Funktion wird ausgeführt und die Änderungen übernommen.

Nun wollte ich das eleganter per jQuery lösen, um den Reload nicht mehr zu haben.

Also habe ich die Buttons so umgebaut, dass sie bei onclick die nötigen Werte an eine javascript-Funktion übergeben. Auch das klappt wunderbar. Die Werte werden übernommen, verarbeitet und per jQuery.ajax an meine ajax.php geschickt. Dort wird alles weiterverarbeitet, der Datenbankeintrag wird geändert, klappt ebenfalls wunderbar.

Um zu prüfen, was genau zurückgegeben wird von der ajax.php des Plugins möchte ich mir die Antwort in der console anzeigen lassen. Die Antwort ist auch da, ich bekomme angezeigt, was ich zurückgeschickt habe. ABER: Die console zeigt mir vor der Ausgabe noch ein paar andere Javascripts an, den reinen Code. Wenn ich die Antwort nicht ausgeben lasse, werden auch die Scripts nicht anzezeigt.

Hier mal die relevanten Stellen des Codes:

<script type="text/javascript">
        function toggle_anzeige($id, $meinarray){
            var theid = 'eintrag'+$id;
            var tablerow = document.getElementById(theid);
            var anzeige = tablerow.getElementsByClassName('anzeige');
            var eingeblendet = tablerow.getElementsByClassName('eingeblendet');
            var ausgeblendet = tablerow.getElementsByClassName('ausgeblendet');
            var action;
                if(eingeblendet.length == 1){
                    action = 'eingeblendet';
                }
                if(ausgeblendet.length == 1){
                    action = 'ausgeblendet';
                }

            jQuery.ajax({
                url: '/ajax.php',
                type: 'post',
                data:{
                    'id' : $id,
                    'action' : action,
                    'meinarray' : $meinarray
                },

                success: function(response){
                    console.log('success');
                    antwort = response;
                    console.log(antwort);
                }
            });
        }
        </script>

'success' wird ausgegeben, danach ein paar Javascripts und dann meine tatsächliche Antwort.

in der ajax.php sieht das in etwa so aus:

function update_meinarray($meinarray){
    Hier speichert er den Array neu (funktioniert ja) und gibt auch nichts zurück.
    Die Funktion ist korrekt geschlossen. Es funktioniert ja auch.
}

if(isset($_POST['action'])){
    //verarbeitet den array, erzeugt keine Ausgabe
        if(POST_['action'] == 'ausgeblendet'){
            $antwort = 'ist ausgeblendet';
            update_meinarray($meinarray);
        }
        if(POST_['action'] == 'eingeblendet'){
            $antwort = 'ist eingeblendet';
            update_meinarray($meinarray);
        }
        
    echo json_encode($antwort);   
}

Ich verstehe einfach nicht, warum ich nicht einfach nur den Wert ausgegeben bekomme. Vermutlich übersehe ich etwas total einfaches, aber ich komme gerade nicht darauf.

Ich danke schonmal im Vorfeld für jede Idee

 

[kim88]

Kannst du die Ausgabe der Konsole posten.

Ausserdem wenn du mit WordPress und Ajax arbeitest nutze doch aus Sicherheitsgründen die korrekte WordPress Ajax API:

https://codex.wordpress.org/AJAX_in_Plugins

 

[GrumpyCat]

Vermutlich wird "response" kein einfacher String sein. jQuery parst da gerne mal einiges, und console.log() legt über das Ganze auch nochmal eine eigene Interpretation drüber.

Am besten in den Developer Tools anschauen, da kannst Du im Network-Tab die eigentliche Rückgabe des Servers sehen und im Debugger auch einen Breakpoint auf Zeile 28 setzen und schauen, was in "response" genau steht.

Dieser console.log()-Kram ist unendliches Gefrickel, und gerade als Einsteiger macht man sich die Welt damit viel schwerer als nötig. Lernen geht per Debugger viel besser.

 

[KeinProblem]

HI,

danke schonmal Es sieht so aus: Wenn ich mir die Aktion von ajax.php angucke sehe ich beim Header bei den Formulardaten genau das, was ich vorher abgeschickt habe. Die id die hinzugefügt oder entfernt werden soll, die action und den array so wie er war, nur in Einzelwerten. In der Vorschau sehe ich den array der zurückgegeben wird wie erwartet. Dieser hat jeweils einen Eintrag mehr oder weniger und zwar genau den mit der ID. Das klappt also.

In der eigentlichen Antwort stehen eben ein paar Javascripts und dann mein Array aus der Vorschau. Genau das verdutzt mich ja... Die scripte sind selbst gebaute aus dem Plugin, die in der Hauptdatei stehen, aber es macht auch keinen Unterschied, ob ich das Script mit dem jquery über oder unter sie packe.

Das Script ist allein stehend, nicht in eine weitere Funktion eingebunden, die zu der Ausgabe hätte führen können...

Achso, die response ist jetzt einfach nur der json_encoded array.

 

[GrumpyCat]

Zeig mal Screenshots, das ist verständlicher.

 

[Phrasendreher]

Ich glaube Du bedienst Deine Developer Console einfach falsch...
Wenn sie entsprechend konfiguriert ist, kannst Du darin jedes gesourcete JavaScript sehen (mit Code), jeden AJAX-Request, jede Debugging-Ausgabe, jede Fehlermeldung - Alles.
Wenn Du sie richtig benutzt, gibt sie nur das aus, was Du sehen willst.

 

[kim88]

Die genaue Ausgabe in der Konsole wäre weiterhin hilfreich.

Nach dem
echo json_encode($antwort);

solltest du das Script noch beenden. In PHP normalerweise mit exit;

Bei WordPress eher mit wp_die(); denke aber die Funktioniert nur wenn man Ajax über die admin-ajax.php von WordPress nutzt

 

[KeinProblem]

Was für screenshots helfen denn? Meine console.log ausgabe endet so:

Die letzte Zeile ist die, die ich haben möchte. exit hat leider nichts geändert.

Danke nochmal für Zeit und Mühe bisher

Neue Erkenntnis: Alle Javascripts die nicht innerhalb einer Funktion waren wurden angezeigt und auch ohne console.log übergeben. Ich hab nur keine Ahnung warum

 

[GrumpyCat]

Am besten nicht bei "Vorschau" nachsehen, sondern im "Antwort"-Tab.
In "Vorschau" passieren wunderliche Dinge, weil's ggf. als HTML interpretiert wird. Vermutlich sieht man dort deswegen auch den <script>-Kram nicht.

Und das komplette PHP wäre hilfreich.

Ich schätze, Du hast machst da sowas wie

<script>
console.log("hierpassiertirgendwas");
</script>
<?php
echo "blub";
?>

...und klar wird da das Javascript mit vom Server zurückgegeben, weil der Server nunmal den Krams in den "php"-Klammern ausführt - und alles andere einfach so zurückliefert. Sonst würde
Hallo <? echo $user ?>!
ja nicht funktionieren.

 

[netzgestaltung]

also das ajax sollte doch bei /admin-ajax.php nachfragen, oder?

weiters fehlt der wp nonce zur verifizierung:
https://developer.wordpress.org/themes/theme-security/using-nonces/

und wp_die() oder exit nach json_encode.

ahja, steht schon in kommentaren drin.

nonces und admin-ajax url können auch per wp_localize_script als JS werte genutzt werden.
hier gibts eine recht vollständige anleitung:
https://shellcreeper.com/how-to-secure-wordpress-ajax-using-nonce/