AJAX response binden aan de DOM

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

1.907 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

19-03-2015 14:48 gewijzigd op 19-03-2015 16:12

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:

<!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.

Donny Wie weet

19-03-2015 17:03

Maar, waar gaat het bij mij dan hier fout? Dat kan ik namelijk niet vinden

Thomas van den Heuvel

19-03-2015 17:05

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

19-03-2015 17:10

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

19-03-2015 17:15

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

19-03-2015 17:20

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

19-03-2015 17:33

En wat/waar gaat er precies mis? Wat werkt er precies niet?

Wat geeft "/user/reserveren/get_times" terug?

Donny Wie weet

20-03-2015 12:16 gewijzigd op 20-03-2015 12:25

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.


<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>

Thomas van den Heuvel

20-03-2015 13:38 gewijzigd op 20-03-2015 13:55

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:

$('#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:

$('.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".

Donny Wie weet

20-03-2015 13:54

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

Reageren

Inloggen om te reageren