[jQuery] $.post werkt niet.
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)
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
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>
// 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 ?
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.
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 :) )