I'm using such Ajax code for reload the tables on my page:
//ajax page section reload
$(document).on("click", '.section-reload #send', function (e) {
e.preventDefault();
NProgress.start();
$('#tasks-tab').load(document.URL + ' #tasks-tab');
NProgress.done();
});
$(document).on("click", '.dynamic-reload', function (e) {
var reload = $(this).data('reload');
if(reload) {
$('#'+reload).load(document.URL + ' #'+reload, function(data) {
easyPie();
});
}
});
$(document).on("click", '.dynamic-form .send', function (e) {
$(this).closest('form').validator();
e.stopPropagation();
e.preventDefault();
valid = true;
var thisinput = $(this);
$('input').filter('[required]:visible').each(function(i, requiredField){
if($(requiredField).val()=='') {
valid = false;
$('.modal').animate({
scrollTop: $(requiredField).offset().top
}, 500);
$(requiredField).parent().addClass("has-error");
thisinput.text().replace('<i class="fa fa-spinner fa-spin"></i> ', '');
}
});
if(valid) {
var content = $('textarea.summernote-modal').summernote('code');
var url = $(this).closest('form').attr('action');
var baseurl = $(this).closest('form').data('baseurl');
var active = $(this);
var data = new FormData($(this).closest('form')[0]);
$.ajax( {
type: "POST",
url: url,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
data: data,
success: function(data, textStatus, jqXHR) {
if(typeof data.error === 'undefined') {
} else {
console.log('ERRORS: ' + data.error);
}
var reload = active.closest('form').data('reload');
var reload2 = active.closest('form').data('reload2');
var reload3 = active.closest('form').data('reload3');
var reload4 = active.closest('form').data('reload4');
var reload5 = active.closest('form').data('reload5');
if(reload) {
$.get(document.URL, function(data) {
$('#'+reload).parent("div").html($(data).find('#'+reload));
$('#'+reload2).parent("div").html($(data).find('#'+reload2));
$('#'+reload3).parent("div").html($(data).find('#'+reload3));
$('#'+reload4).parent("div").html($(data).find('#'+reload4));
$('#'+reload5).parent("div").html($(data).find('#'+reload5));
$('#gantData').html($(data).find('#gantData'));
$('#'+reload).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload2).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload3).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload4).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload5).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload2 + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload3 + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload4 + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload5 + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload).velocity("transition.slideUpIn", { duration: 300 });
$('#'+reload2).velocity("transition.slideUpIn", { duration: 300 });
$('#'+reload3).velocity("transition.slideUpIn", { duration: 300 });
$('#'+reload4).velocity("transition.slideUpIn", { duration: 300 });
$('#'+reload5).velocity("transition.slideUpIn", { duration: 300 });
//reload Modal
modalfunc();
keepmodal = active.data('keepmodal');
if(keepmodal === undefined){
$('#mainModal').modal('hide');
} else {
active.closest('form')[0].reset();
$("#mainModal .note-editable").html("");
}
//remove loader icon from button
var value = active.text().replace('<i class="fa fa-spinner fa-spin"></i> ', '');
active.html(value);
//reload timers on task details
$( ".timer__span" ).each(function() {
timertime = $(this).data("timertime");
timerid = "#"+$(this).attr("id");
timerstate = $(this).data("timerstate");
startTimer(timerstate, timertime, timerid);
});
$(".todo__close").click();
sorting_list(baseurl);
hideClosedTasks();
});
}
},
error: function(formData) {
var reload = active.closest('form').data('reload');
var reload2 = active.closest('form').data('reload2');
var reload3 = active.closest('form').data('reload3');
var reload4 = active.closest('form').data('reload4');
var reload5 = active.closest('form').data('reload5');
if(reload) {
$.get(document.URL, function(data) {
$('#'+reload).parent("div").html($(data).find('#'+reload));
$('#'+reload2).parent("div").html($(data).find('#'+reload2));
$('#'+reload3).parent("div").html($(data).find('#'+reload3));
$('#'+reload4).parent("div").html($(data).find('#'+reload4));
$('#'+reload5).parent("div").html($(data).find('#'+reload5));
$('#gantData').html($(data).find('#gantData'));
$('#'+reload).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload2).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload3).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload4).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload5).velocity("transition.slideDownOut", { duration: 300 });
$('#'+reload + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload2 + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload3 + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload4 + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload5 + ' .checkbox-nolabel').labelauty({ label: false });
$('#'+reload).velocity("transition.slideUpIn", { duration: 300 });
$('#'+reload2).velocity("transition.slideUpIn", { duration: 300 });
$('#'+reload3).velocity("transition.slideUpIn", { duration: 300 });
$('#'+reload4).velocity("transition.slideUpIn", { duration: 300 });
$('#'+reload5).velocity("transition.slideUpIn", { duration: 300 });
//reload Modal
modalfunc();
keepmodal = active.data('keepmodal');
if(keepmodal === undefined) {
$('#mainModal').modal('hide');
} else {
active.closest('form')[0].reset();
$("#mainModal .note-editable").html("");
}
//remove loader icon from button
var value = active.text().replace('<i class="fa fa-spinner fa-spin"></i> ', '');
active.html(value);
//reload timers on task details
$( ".timer__span" ).each(function() {
timertime = $(this).data("timertime");
timerid = "#"+$(this).attr("id");
timerstate = $(this).data("timerstate");
startTimer(timerstate, timertime, timerid);
});
$(".todo__close").click();
sorting_list(baseurl);
hideClosedTasks();
});
}
}
});
return false;
}
});
The problem is where I'm reloading the tables, they're loosing sorting/search elements as a part of the tables ability. Datas are ok... It seems like WebBrowser loosing some JavaScript functions/ability of the tables.
If I'll refresh whole page, everything back to normal. Can You please analize the code, and give me some advice?
I'm using PHP/JavaScript/Ajax/datatables.
