[jQuery] $.post werkt niet.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Wouter Van Marrum

Wouter Van Marrum

07/03/2015 23:24:05
Quote Anchor link
Hallo iedereen,

Ik ben bezig met het maken van een formulier waarin je taken via ajax verstuurd.
Nu heb ik het formulier af en heb ik op onsubmit een jquery functie gezet.

Kom nu tegen het volgende probleem aan :
Het formulier wordt wel verzonden maar niet via ajax.
De pagina herlaadt zichzelf gewoon.

Nu weet ik niet zeker wat er mis gaat.
Hier is mijn 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script>
// JS
TASK.newTask = function(f) {

    $(f).submit(function(event) {
        
        var url = $(this).attr('action');
        var data = $(this).serialize();
        console.log(url);
        console.log(data);


        $.post(url, data, function(data) {
            console.log(data);
            $(ol).append(
                '<li> ' +
                    '<label><span class="task-description">' + data.taskTitle + '</span> <span class="label label-' + data.taskColor + '">' + data.taskLabel + '</span></label>' +
                    '<div class="options todooptions ng-scope">' +
                        '<div class="btn-group">' +
                            '<button class="btn btn-default btn-xs completeTask" rel="'+ data.id +'"><i class="fa fa-fw fa-check"></i></button>' +
                            '<button class="btn btn-default btn-xs editTask" rel="'+ data.id +'"><i class="fa fa-fw fa-pencil"></i></button>' +
                            '<button class="btn btn-default btn-xs deleteTask" rel="'+ data.id +'"><i class="fa fa-fw fa-trash-o"></i></button>' +
                        '</div>' +
                    '</div>' +
                '</li>');
        }, 'json')
        .done(function() {
            TASK.getAll('.panel-tasks', '#taskCount');
        })
        .fail(function() {
            alert( "error" );
        });
    
            
        event.preventDefault();
    });

}
// END JS
</script>

                    <form id="taskForm" method="POST" class="form-horizontal" onsubmit="TASK.newTask('#taskForm')" action="@dmz_route(add_task)">
                        <div class="form-group">

                            <div class="col-lg-6 col-xs-5">
                                <input type="text" class="form-control" placeholder="Task title..." name="taskTitle" />
                            </div>

                            <div class="col-lg-2 col-xs-2">
                                    <input type="text" class="form-control" placeholder="Task label..." name="taskLabel" />
                            </div>

                            <div class="col-lg-2 col-xs-2">
                                <select name="color" class="form-control">
                                    <option selected class="label-success" value="success" selected="selected">Success</option>
                                    <option class="label-primary" value="primary">Primary</option>
                                    <option class="label-warning" value="warning">Warning</option>
                                    <option class="label-danger" value="danger">Danger</option>
                                    <option class="label-info" value="info">Info</option>
                                </select>
                            </div>

                            <div class="col-lg-2 col-xs-3">
                                <input class="btn btn-success btn-block" id="submit" value="Add" type="submit">
                            </div>

                        </div>
                    </form>


Heeft iemand enig idee waarom dit niet werkt ?
 
PHP hulp

PHP hulp

13/03/2025 01:45:17
 
Thomas van den Heuvel

Thomas van den Heuvel

08/03/2015 00:01:20
Quote Anchor link
De default actie van de submit (het daadwerkelijk submitten van het formulier) moet niet gebeuren, dus moet je event.preventDefault() aanroepen om hiervoor te zorgen. En niet na je $.post silly.

Overigens - je $.post kan nog bezig zijn terwijl de code die daarop volgt wordt uitgevoerd. Zet altijd vervolg-code in je callback-functie, en NIET na een AJAX-call want je code wordt dan al uitgevoerd terwijl je AJAX-call aan het wachten is op terugkoppeling.
 
Wouter Van Marrum

Wouter Van Marrum

08/03/2015 00:06:20
Quote Anchor link
@Thomas, heb het zojuist opgelost.
Heb een deel van de code verplaatst buiten me js bestand.

Plus ik had de jquery libs onderaan staan.
Op een of andere manier pakte hij jquery zelf dus ook niet.

Nu werkt het !
Dankjewel voor je uitleg ( opnieuw haha :) )
 



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.