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