AJAX response binden aan de DOM
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);
});
});
$('.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);
});
});
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)
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
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>
<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
<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.
Wat geeft "/user/reserveren/get_times" terug?
Waar het mis gaat is dat de checkbox niet word gepost.
Code (php)
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
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>
<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
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)
1
2
2
$('#free-times').remove();
$(json).appendTo('.overlay-holder');
$(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)
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
Ik heb de change function op select=players en input=date gezet
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
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
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.
@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...
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
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 :)
derp!