AJAX response binden aan de DOM

Door Donny Wie weet op 19-03-2015 14:19

1.906 views

Hi Guys,

Hoe kan ik het response van mn AJAX call binden aan mn DOM zodat de form attributes aangeklikt kunnen worden en verzonden? Ik heb de volgende code:


$(document).on('change', 'form' ,function ( event ) {
            $('.overlay').show();
            var request = $.ajax({
                url: "/user/reserveren/get_times",
                type: "POST",
                dataType: 'html',
                data: {
                    date: $('input[name="date"]').val(),
                    players: $('select[name="players"]').val()
                },
                success: function (json) {

                    $('#free-times').remove();
                    $(json).appendTo('.overlay-holder');
                    $('.overlay').hide();
                }
            });

            request.fail(function (jqXHR, textStatus) {
                alert("Request failed: " + textStatus);
            });

        });

Thomas van den Heuvel

20-03-2015 14:00 gewijzigd op 20-03-2015 14:04

Zie ook bovenstaande kanttekening.

Het maakt voor de data die je submit (vanuit HTML-perspectief) niet uit hoe de formulierelementen die de bron zijn van deze data in je formulier terecht zijn gekomen (hetzij via jQuery of andere weg).

Je probleem zit naar alle waarschijnlijkheid ergens anders.

Zit er bijvoorbeeld nog een filter oid tussen die bepaalt welke formulier-invoer toegestaan is?

EDIT: of zit er een fout in het doorgeven/opvragen van POST waarden of wat dan ook. Werk je in een soort van debug-mode zodat Laravel je vertelt wat er eventueel mis is?

Donny Wie weet

20-03-2015 14:06

Thomas van den Heuvel op 20/03/2015 13:38:32

Wat ook laat zien hoe vreemd de variabele-naam "json" hier is, gebruik hiervoor in de plaats een neutrale benaming, bijvoorbeeld "data".

Ik weet dat ik dit nog moet wijzigen naar iets dat leesbaar is, maar ik heb meerdere dingen geprobeerd namelijk om dit werkend te krijgen, daardoor heb ik de naam laten staan in json en ging op deze manier verder proberen te werken

[size=xsmall]Toevoeging op 20/03/2015 14:07:30:[/size]

Ik krijg nergens een error te zien met mijn probleem. Ik krijg netjes de data terug zoals het hoort en deze word prima gerenderd. Als ik de pagina laad, dan kan ik de checkboxes die gerenderd zijn door de view prima posten. Wanneer ik een nieuwe tabel met checkboxes ophaal, dan gaan de checkboxes stuk

Mick ForSure

20-03-2015 14:20

Je kan $(document).ajaxComplete(function(){ //HIER JE CODE NET ALS IN JE DOCUMENT READY }); gebruiken.

Thomas van den Heuvel

20-03-2015 14:21

Wanneer ik een nieuwe tabel met checkboxes ophaal, dan gaan de checkboxes stuk

Dit is dus nog voordat je submit? Dat is weer/nog een ander probleem...

Ik denk toch dat je probleem in Laravel zit. Maar als je daarbuiten ook problemen ondervindt, zou ik die ook meteen oplossen.

Het heeft geen zin voort te borduren op een situatie waarvan je weet dat deze niet klopt / niet (werkt). Los dit eerst op en kijk dan of de problemen nog steeds spelen.

Ik heb verder de ballen verstand van Laravel maar wat ik zo vlug heb gegoogled levert wellicht de volgende hints op:
- klopt je routing?
- haal je je POST data op met Input::get('<veldnaam>') of heb je gekeken wat Input::all() oplevert?

Daarnaast helpt het ook niet dat je je probleemstelling (en daarmee je vraag) continu verandert. Los dingen eens stap voor stap op.

Donny Wie weet

20-03-2015 14:34

@mick: graag wat meer uitleg alsjeblieft want met alleen "je kan dit gebruiken" kom ik momenteel niet echt veel verder dan waar ik nu zit...

@thomas: ik zal je kort uitleggen wat ik wil en wat ik doe.

Ik heb 1 heel groot formulier. Hierin zit een filter en de tabel met start tijden. In de filter zit een date input en een players select.

Wanneer de pagina /user/reserveren word opgehaald, render ik een tabel. (deze boxjes werken prima na een submit).

Nou wil ik niet vandaag, maar morgen reserveren, dus wijzig de datum. Bij het wijzigen van de datum POST ik de aantal players en datum. Hier komt een response vandaan. Dit response komt terug als pure HTML. Deze voeg ik op een rare manier :P toe aan mn document. Wanneer ik nu checkboxes aantik, worden deze niet gepost...

Thomas van den Heuvel

20-03-2015 14:51 gewijzigd op 20-03-2015 15:49

Dit had ik allemaal ook zo begrepen, maar zoals ik hierboven zei vermoed ik dat het "dynamisch invoegen van de HTML checkboxen" niet echt het probleem is. Het probleem zit em waarschijnlijk in de uiteindelijke afhandeling van het "hele grote formulier".

De informatie die ik snel bij elkaar gegoogled heb over Laravel geeft mij de indruk dat het nogal belangrijk is dat je aanvliegroute (routing) klopt. Je kunt trouwens ook in je browser console zien wat er concreet gePOST wordt, heb je daar al naar gekeken? Dus het wordt wel gepost door je browser, maar niet weergegeven / correct opgehaald / correct uitgelezen door Laravel.

Laat ik het zo zeggen: ik heb wat jij doet (dynamisch formulierelementen invoegen en vervolgens op de normale wijze formuliertje posten) in grote lijnen nagespeeld in native PHP/HTML. Dat werkt verder prima. Dus moet er haast wel iets misgaan aan de Laravel-kant van het verhaal.

EDIT:

Wanneer de pagina /user/reserveren word opgehaald, render ik een tabel. (deze boxjes werken prima na een submit).

Huh, dat is opmerkelijk. Hoe verschilt de HTML-variant van die van de variant die opgehaald wordt via jQuery? Het feit dat de HTML via een AJAX-call binnenkomt zou niet uit moeten maken.

Donny Wie weet

20-03-2015 19:47

@thomas,

Jquery moet een PERFECTE html structuur hebben om dit te kunnen lezen. Een browser daarin tegen kan nog prima uit de voeten met lelijk HTML... Probleem is opgelost :)

Thomas van den Heuvel

20-03-2015 20:05

Dus er zaten syntax-fouten in de lap HTML die je ophaalde via jQuery? :s

derp!

Donny Wie weet

20-03-2015 20:21

Mja niet in die lap, maar in de lap an de standaard HTML die ik uitspuugde... De ajax call data was gewoon prima

Thomas van den Heuvel

20-03-2015 20:24

double derp!

Reageren

Inloggen om te reageren