JsonResponse > unexpected Token

[creativx]

Hallo zusammen,

ich versuche gerade einen Filter zu bauen, bei dem Infos via Ajax an den Controller gehen und ein entsprechendes Ergebnis via JsonResponse an das Template geschickt werden. Ganz kurz umschrieben schaut es so aus :

Ich habe einen Button, welche über einen Clickevent "überwacht" wird:

<h1>Test Button</h1>
<button class="send btn btn--primary">Senden</button>

Im selben Twig-Template habe ich folgenden JS stehen. Die Twig-Variable currentPath geht auf die Route meines Conrollers.

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        $(document).ready(function() {
            $('.send').on('click', function(e) {
                $.ajax({
                    url:        '{{ currentPath }}?send=true',
                    type:       'POST',
                    dataType:   'json',
                    // data:       ['test' => 'test'],
                    async:      true,
                    success: function(data, status) {
                        console.log(data, status)
                    },
                    error : function(xhr, textStatus, errorThrown) {
                        console.log(errorThrown)
                    }})
            });
        });
    });
</script>

Im Controller schaut es folgendermaßen aus:

        if('true' === $request->get('send')) {
            return new JsonResponse(
                [
                    'message' => 'Bitte geben Sie eine korrekte PLZ ein'
                ],
                200
            );
        }

Via Console bekomme ich leider folgende Fehlermeldung:

SyntaxError: Unexpected token '<', "
<!-- TEMPL"... is not valid JSON
at parse (<anonymous>)
at jquery.min.js?v=42c9d10e:2:79745
at l (jquery.min.js?v=42c9d10e:2:79862)
at XMLHttpRequest.<anonymous> (jquery.min.js?v=42c9d10e:2:82630)

Ich bin da relativ ratlos, was ich falsch mache. Ich habe diese Vorgehensweise schon ein paar mal bei "reinen" Symfony-Anwendungen gebaut. Hier mach ich aber wohl irgendetwas falsch. Hat jemand eine Idee oder einen Tip?

Danke

[Spooky]

Wenn du einen POST Request auf eine Contao Route machst, brauchst du auch einen gültigen CSRF Token. Den kannst du dir vom CsrfTokenManager holen: https://docs.contao.org/dev/referenc...rftokenmanager

[creativx]

Okay, ich hatte zunächst auch tatsächlich ein Formular gebaut und es damit versucht. Da hat es auch nicht funktioniert. Das werde ich aber nochmal testen. Nur zum Verständnis: Auch wenn ich in der jetzigen Anordnung den Type im Ajax Request auf "GET" stelle, erhalte ich den selben Fehler. Das liegt auch am fehlenden Token oder?

[Spooky]

Laut deinem JavaScript erwartest du dir als Server Antwort einen JSON Response. Wie verarbeitest du diesen AJAX Request?

[creativx]

Der GET-Request geht ja auf die Route eines Controllers, dort verarbeite ich den im Moment wie folgt:

        if('true' === $request->get('send')) {
            return new JsonResponse(
                [
                    'message' => 'Bitte geben Sie eine korrekte PLZ ein'
                ],
                200
            );
        }

Wiegesagt, ich bin am "rum probieren".. von daher erscheint das vielleicht "planlos" Versuch mich halt ran zu tasten..

[creativx]

So jetzt hab ich es wieder zum Formular umgebaut, mit Contao RequestToken:

<form name="estate_filter_extended" method="post" class="filterForm">
<input type="hidden" id="estate_filter_extended_REQUEST_TOKEN" name="REQUEST_TOKEN" required="required" value="3af7224279d4.SxbYl0EG_1ypCwypt-rnNqneCqOkx3vXWGU4WweL7tA.OnmQ_SRokDbaYljg8aeuU9urW_PlmBCUHl16dlbto5M6L7WvcFONbvFRTQ">

<div><label class="" for="estate_filter_extended_estateType">Objektart</label><select id="estate_filter_extended_estateType" name="estate_filter_extended[estateType]" class="select"><option value=""></option><option value="haus" selected="selected">Haus</option><option value="wohnung">Wohnung</option><option value="grundstueck">Grundstück</option><option value="buero_praxen">Büro/Praxis</option><option value="einzelhandel">Einzelhandel</option></select></div><div><label class="" for="estate_filter_extended_postal">PLZ</label><input type="text" id="estate_filter_extended_postal" name="estate_filter_extended[postal]" class="postal"></div><div><label class="" for="estate_filter_extended_postalRadius">Radius</label><select id="estate_filter_extended_postalRadius" name="estate_filter_extended[postalRadius]" class="select"><option value=""></option><option value="5">5 km</option><option value="10" selected="selected">10 km</option><option value="15">15 km</option><option value="25">25 km</option><option value="50">50 km</option></select></div>

<input type="hidden" id="estate_filter_extended__token" name="estate_filter_extended[_token]" value="5a68cf389cd743eaaabd9b12b.GCB_r2zt-xk_Oh6ZiX6koyqAVg13S5alheAcHyjkpZk.aWZM3Cmjs1V0TlDq2wfg5nDxYzsaJf_n8oExTGuF9qFSGT3aOYyuag9KTw">
</form>

Scriptmäßig verarbeite ich es wie folgt:

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        $(document).ready(function() {

            $("form.filterForm").on('change', ':input', function(e) {
                var instantform = $('form.filterForm');
                $.ajax({
                    url:        '{{ currentPath }}?send=true',
                    type:       'POST',
                    dataType:   'json',
                    data:       instantform.serialize(),
                    async:      true,
                    success: function(data, status) {
                        console.log(data)
                    },
                    error : function(xhr, textStatus, errorThrown) {
                        console.log(errorThrown)
                    }
                })
                event.preventDefault();

            });

        });
    });
</script>

Der Request wird auch richtig abgesetzt, das Formular nimmt es entgegen und dort verarbeite ich es wie folgt:

        $form->handleRequest($request);
        if($form->isSubmitted() && $form->isValid()) {
            return new JsonResponse(
                [
                    'message' => 'Bitte geben Sie eine korrekte PLZ ein'
                ],
                200
            );
        } 

Aber leider wirft es mir immer noch den Fehler mit unexpected Token....

[Spooky]

Hast du denn schon geprüft, ob der Request überhaupt wirklich an deinen Controller geht? Laut dem Fehler wird nämlich in Wirklichkeit ein Contao PHP Template gerendert im Response - also kein JSON Response.

[creativx]

Also der Request geht schon auf den Controller so wie ich das sehe, wenn ich im Controller folgendes mache:

        if($form->isSubmitted() && $form->isValid()) {

            dump($form->getData());
            return new JsonResponse(
                [
                    'message' => 'Bitte geben Sie eine korrekte PLZ ein'
                ],
                200
            );
        } 

dann bekomme ich im Symfony Profiler folgendes:

array:3 [?
"estateType" => "wohnung"
"postal" => null
"postalRadius" => "10"
]

[creativx]

.. nochmal kurz "nach oben schieb"... Hänge immer noch an der Stelle

[creativx]

letzter Versuch Ich hänge immer noch an der Stelle... hat jemand noch ne Idee? Lieben Dank