Ajax voert functie meerdere keren uit.
Ik wil mijn admin paneel in Ajax maken maar loop tegen een probleem aan. Op het moment dat ik een link aan klik, word de pagina geladen. Als dit goed is gegaan roep ik de functie ajax_load nog een keer aan om te zorgen dat ook op de nieuwe content de functies werken. Echter word er een soort van counter aangemaakt waardoor pagina's vaker dan 1x word ingeladen, er komt een increment op te zitten. Iemand een idee hoe ik dat kan oplossen?
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script>
$(document).change(function () {
ajax_load();
ajax_submit();
ajax_search();
});
function ajax_load() {
$('.ajax-link, .pagination li a').click(function (event) {
event.preventDefault();
console.log('Load AJAX_LOAD');
$url = $(this).attr('href');
$.ajax({
url: $url,
method: "GET"
// context: html
}).done(function (response) {
$('#page-content').html(response)
ajax_submit();
ajax_search();
ajax_load();
});
});
}
function ajax_submit() {
$('.ajax-submit').click(function (event) {
event.preventDefault();
console.log('Click')
$form = $(this).closest('form')
$url = $form.attr('action');
$data = $form.serialize();
$.ajax({
url: $url,
method: "POST",
data: $data
// context: html
}).done(function (json) {
$('#page-content').html(json);
ajax_load();
ajax_submit();
ajax_search();
}).fail(function () {
alert('Fail!');
});
// });
});
}
function ajax_search() {
$('#ajax-search').keyup(function () {
$form = $(this).closest('form');
$data = $(this).val();
$url = $form.attr('action');
delay(function () {
$.ajax({
url: $url + '?ajax-search=' + $data,
method: "GET"
}).done(function (json) {
$('#page-content').html(json);
$('#ajax-search').val($data);
ajax_load();
ajax_submit();
ajax_search();
}).fail(function ($error) {
alert('Er is een fout:'.$error);
});
}, 3000);
});
}
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
</script>
$(document).change(function () {
ajax_load();
ajax_submit();
ajax_search();
});
function ajax_load() {
$('.ajax-link, .pagination li a').click(function (event) {
event.preventDefault();
console.log('Load AJAX_LOAD');
$url = $(this).attr('href');
$.ajax({
url: $url,
method: "GET"
// context: html
}).done(function (response) {
$('#page-content').html(response)
ajax_submit();
ajax_search();
ajax_load();
});
});
}
function ajax_submit() {
$('.ajax-submit').click(function (event) {
event.preventDefault();
console.log('Click')
$form = $(this).closest('form')
$url = $form.attr('action');
$data = $form.serialize();
$.ajax({
url: $url,
method: "POST",
data: $data
// context: html
}).done(function (json) {
$('#page-content').html(json);
ajax_load();
ajax_submit();
ajax_search();
}).fail(function () {
alert('Fail!');
});
// });
});
}
function ajax_search() {
$('#ajax-search').keyup(function () {
$form = $(this).closest('form');
$data = $(this).val();
$url = $form.attr('action');
delay(function () {
$.ajax({
url: $url + '?ajax-search=' + $data,
method: "GET"
}).done(function (json) {
$('#page-content').html(json);
$('#ajax-search').val($data);
ajax_load();
ajax_submit();
ajax_search();
}).fail(function ($error) {
alert('Er is een fout:'.$error);
});
}, 3000);
});
}
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
</script>
Quote:
Echter word er een soort van counter aangemaakt waardoor pagina's vaker dan 1x word ingeladen, er komt een increment op te zitten.
Wat bedoel je hiermee? Je bedoelt dat je in je console meerdere keren "Load AJAX_LOAD" ziet? Dit komt waarschijnlijk omdat logs die dezelfde tekst hebben worden gegroepeerd. Als er achter zo'n console.log bericht een tellertje staat betekent dit inderdaad dat de passage waar deze console.log() staat meerdere keren wordt aangeroepen/uitgevoerd.
Het bovenstaande script ziet er niet helemaal goed uit. En als ik ook snel een aanroep volg dan zit je volgens mij al in een oneindigende loop, sterker nog, ik denk dat bovenstaande code een zeker "sneeuwbaleffect" heeft. Ik zou als ik jou was terug naar de tekentafel gaan om het gedrag van deze JavaScript code te herzien.