AJAX response binden aan de DOM

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

Java Developer / Overheid / Complexiteit

Functieomschrijving Wil jij als Java Developer een bijdrage leveren aan een veiliger Nederland en je als Java Developer bezig houden met zeer complexe bedrijfskritische applicaties? Lees dan snel verder! Doorontwikkelen bedrijfskritische applicaties; Aanpassingen maken in de bestaande applicatie; Vertalen van jouw visie op continuous integration en continuous delivery; Debuggen van de applicatie; In gesprek gaan met eindgebruikers om verbetervoorstellen op te halen. Functie-eisen Minimaal HBO-werk en denkniveau; Minimaal 5 jaar werkervaring als Java Developer; Je bent minimaal OCP-Java SE 6 gercertificeerd; Je hebt kennis van Webservices en Continuous Integration; Je bent analytisch sterk en zowel klant- als resultaatgericht. Bedrijfsomschrijving Binnen

Bekijk vacature »

Donny Wie weet

Donny Wie weet

19/03/2015 14:19:26
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(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);
            });

        });
 
PHP hulp

PHP hulp

03/07/2020 00:01:19
 
Thomas van den Heuvel

Thomas van den Heuvel

19/03/2015 14:48:55
Quote Anchor link
Dit zou al moeten werken als je specifiek verwijst naar de elementen die je dynamisch toevoegt in de aanroep van on(<event>, <element> function(e) {}), als dat je eigenlijke vraag is (hoe hang ik event listeners aan dynamisch toegevoegde elementen / hoe werk ik mijn event listeners bij voor elementen die ik dynamisch toevoeg).

Zie dit antwoord.

En als je meer van dit soort elementen hebt die dezelfde afhandeling hebben, kun je misschien voor de afhandeling één aparte functie maken, waar je meerdere keren naar verwijst vanuit je on()-aanroepen.

EDIT: voorbeeld van dit principe:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>
<ul id="list">
    <li>klik mij</li>
</ul>
<button type="button" id="add">voeg item toe</button>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    var afhandeling = function(e) {
        $(this).css('background-color', '#ff0000');
    }

    $('#list').on('click', 'li', afhandeling);

    $('#add').click(function(e) {
        $('#list').append('<li>klik mij</li>');
    });
});
//]]>
</script>
</body>
</html>


Dit (de constructie met on()) wordt ook wel event delegation genoemd: vanuit een bestaand en niet veranderend element wordt events gekoppeld aan andere (en mogelijk nog niet bestaande) elementen. Waarschijnlijk is het verstandig om de "parent" waar je deze "delegation" aan ophangt zo "nauw" mogelijk te kiezen (denk aan een container waarin al je dynamische zut plaatsvindt) - $(document) is nogal (en waarschijnlijk te) breed.
Gewijzigd op 19/03/2015 16:12:53 door Thomas van den Heuvel
 
Donny Wie weet

Donny Wie weet

19/03/2015 17:03:32
Quote Anchor link
Maar, waar gaat het bij mij dan hier fout? Dat kan ik namelijk niet vinden
 
Thomas van den Heuvel

Thomas van den Heuvel

19/03/2015 17:05:57
Quote Anchor link
Welke (wat voor soort) elementen worden dynamisch toegevoegd? Dit zijn vast niet alle forms, zoals je in je on() definitie zet (regel 1, 2e parameter).
 
Donny Wie weet

Donny Wie weet

19/03/2015 17:10:17
Quote Anchor link
Nee wat ik eigenlijk doe, is in mn ExampleController@render_table, een template aanmaken, en deze terug geef als response aan de ajax. Deze table bevat als form element alleen checkboxes in de vorm van een array.
 
Thomas van den Heuvel

Thomas van den Heuvel

19/03/2015 17:15:46
Quote Anchor link
Er worden dus dynamisch checkboxes toegevoegd waar op geacteerd moet worden als er op geklikt wordt? Dan moet je daar je event-listener aan hangen. Niet aan je form.
 
Donny Wie weet

Donny Wie weet

19/03/2015 17:20:25
Quote Anchor link
Dit is zeg maar mn formulier:

<form>
-------
Filter attributen die gepost moeten worden
input=date
select=players
------------
Ajax response
---------
</form>

Ik heb de change momenteel ook op de input en de select staan.
 
Thomas van den Heuvel

Thomas van den Heuvel

19/03/2015 17:33:38
Quote Anchor link
En wat/waar gaat er precies mis? Wat werkt er precies niet?

Wat geeft "/user/reserveren/get_times" terug?
 
Donny Wie weet

Donny Wie weet

20/03/2015 12:16:32
Quote Anchor link
De get_times geeft een een tabel terug met het volgende waarde (wel even verkort, de tabel heeft een wisselende rij aantal van 10 tot 100):

Waar het mis gaat is dat de checkbox niet word gepost.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<table border="0" width="" id="free-times">
    <tbody><tr>
        <th>Starttijd</th>
        <th>Tijd</th>
        <th>Huidig aantal spelers</th>
        <th>Maximaal toegestaan</th>
        <th>Reserveren</th>
    </tr>

            <tr>
            <td>09:00:00</td>
            <td>02:00:00</td>
            <td>0</td>
            <td>4</td>
            <td>
                <input name="time[]" type="checkbox" value="09:00:00">
            </td>
        </tr>
            <tr>
            <td>09:10:00</td>
            <td>02:00:00</td>
            <td>0</td>
            <td>4</td>
            <td>
                <input name="time[]" type="checkbox" value="09:10:00">
            </td>
        </tr>
            <tr>
            <td>09:20:00</td>
            <td>02:00:00</td>
            <td>0</td>
            <td>4</td>
            <td>
                <input name="time[]" type="checkbox" value="09:20:00">
            </td>
        </tr>
            
            
            
            
            
            
    </tbody></table>
Gewijzigd op 20/03/2015 12:25:38 door Donny Wie weet
 
Thomas van den Heuvel

Thomas van den Heuvel

20/03/2015 13:38:32
Quote Anchor link
Checkboxen die niet worden aangevinkt worden sowieso niet gepost.

Je probleem hoeft dus niet per se een jQuery aangelegenheid zijn.

Hoe submit je je uiteindelijke formulier?

Weet je ook zeker dat "$(document).on('change', 'form' ,function ( event ) {" dan niet uitgevoerd wordt, want dat zou verklaren waarom alle mogelijke aangevinkte checkboxen weer gereset worden.

Als het uiteindelijke probleem is dat je aangevinkte checkboxen niet worden verzonden (dit was mij compleet onduidelijk - ik dacht dat het om ingeladen HTML ging die niet reageerde op muisklikken...)... dat probleem zit volgens mij niet in de door jou aangeleverde code-fragmenten, maar ergens anders.

Dit is ook een beetje een vreemde constructie:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
$('#free-times').remove();
$(json).appendTo('.overlay-holder');


De "json" (die eigenlijk HTML bevat is een tabel met id "free-times", die je eerst verwijdert. Vervolgens voeg je deze html toe (terwijl dit de enige inhoud is?) in de container ".overlay-holder".

Kun je die twee niet gewoon samennemen tot:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('.overlay-holder').html(json);

Wat ook laat zien hoe vreemd de variabele-naam "json" hier is, gebruik hiervoor in de plaats een neutrale benaming, bijvoorbeeld "data".
Gewijzigd op 20/03/2015 13:55:57 door Thomas van den Heuvel
 
Donny Wie weet

Donny Wie weet

20/03/2015 13:54:38
Quote Anchor link
Ik post het form naar zijn zelfde route, alleen kan je dit afvagen met Route::get() of Route::post() (Laravel 4.2). Op de post doe ik een dump and die (print_r).

Ik heb de change function op select=players en input=date gezet
 
Thomas van den Heuvel

Thomas van den Heuvel

20/03/2015 14:00:14
Quote Anchor link
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?
Gewijzigd op 20/03/2015 14:04:20 door Thomas van den Heuvel
 
Donny Wie weet

Donny Wie weet

20/03/2015 14:06:04
Quote Anchor link
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

Toevoeging op 20/03/2015 14:07:30:

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

Mick ForSure

20/03/2015 14:20:39
Quote Anchor link
Je kan $(document).ajaxComplete(function(){ //HIER JE CODE NET ALS IN JE DOCUMENT READY }); gebruiken.
 
Thomas van den Heuvel

Thomas van den Heuvel

20/03/2015 14:21:04
Quote Anchor link
Quote:
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

Donny Wie weet

20/03/2015 14:34:42
Quote Anchor link
@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

Thomas van den Heuvel

20/03/2015 14:51:42
Quote Anchor link
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:
Quote:
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.
Gewijzigd op 20/03/2015 15:49:37 door Thomas van den Heuvel
 
Donny Wie weet

Donny Wie weet

20/03/2015 19:47:21
Quote Anchor link
@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

Thomas van den Heuvel

20/03/2015 20:05:44
Quote Anchor link
Dus er zaten syntax-fouten in de lap HTML die je ophaalde via jQuery? :s

derp!
 
Donny Wie weet

Donny Wie weet

20/03/2015 20:21:43
Quote Anchor link
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

Thomas van den Heuvel

20/03/2015 20:24:12
Quote Anchor link
double derp!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.