turbolinks with datatables act strange when returning to page
Question
I have one datatable with lot of code implemented after initComplete which works nice when loaded, but when I click few pages and go back to the page (I am using turbolinks), datatable is rendered ok but some functions like child rows act strange. For example when I click on child row icon it fires twice (I tried alert("test") to see what it is doing) or detailed search broke and is not working at all. Is there any solution how to properly reload datatable with turbolinks so all stuff will act like freshly loaded? If I do F5 in browser, all works well of course. Here is the code
ready = function() {
missionstable= $('#guildmissions').DataTable({
'order': [0, 'desc'],
'serverSide': true,
'destroy' :true,
'stateSave' :true,
'ajax' : '/guildmissions/'+<%=@guild.id%>+'.json',
columns: [
{data: 'fy'},
{data: 'associate_email' },
{data: 'guild_name' },
{data: 'coordinator_email' },
{data: 'name' },
{data: 'q1_status' },
{data: 'q2_status' },
{data: 'q3_status' },
{data: 'status' },
{data: 'accepted',"searchable": false,'render' : function(data,type,row) {
var $accepted = '<i class="fa fa-exclamation-circle fa-2x" aria-hidden="true"></i>';
if (row.accepted == true) {$accepted = '<i class="fa fa-check-square-o fa-2x check-ok-green" aria-hidden="true"></i>';}
return $accepted;
}},
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '<center><i class="fa fa-chevron-down fa-2x" aria-hidden="true"></i></center>'
},
<% if (find_user_role == "admin") %>
{data: 'edit_mission',"orderable": false, "searchable": false},
{data: 'delete_mission',"orderable": false, "searchable": false}
<% elsif (find_user_role == "coordinator") %>
{data: 'edit_mission',"orderable": false, "searchable": false,'render' : function(data,type,row) {
if ($.inArray(<%= get_current_user_associate_id%>, row.guild_coordinators) != -1 ) {
return row.edit_mission
}
else {return row.no_edit_mission}
}
},
{data: 'delete_mission',"orderable": false, "searchable": false,'render' : function(data,type,row) {
if ($.inArray(<%= get_current_user_associate_id%>, row.guild_coordinators) != -1 ) {
return row.delete_mission
}
else {return row.no_delete_mission}
}
}
<% else %>
{data: 'no_edit_mission',"orderable": false, "searchable": false},
{data: 'no_delete_mission',"orderable": false, "searchable": false}
<% end %>
],
'dom': 'lfr<"pull-right"B>tip',
'buttons': [
{"extend" : 'copyHtml5',"text":"Copy","className": 'btn btn-default btn-xs'},
{"extend" : 'excelHtml5',"text": "XLS","className": 'btn btn-default btn-xs'},
{"extend" : 'csvHtml5',"text": "CSV","className": 'btn btn-default btn-xs'},
{
text: 'TXT',
extend: 'csvHtml5',
fieldSeparator: '\t',
extension: '.txt',
"className": 'btn btn-default btn-xs'
},
{"extend" : 'pdfHtml5',"text": "PDF","className": 'btn btn-default btn-xs'},
],
'lengthMenu': [
[10, 50,100, -1],
[10, 50,100, "All"]
],
"rowCallback" : function(row, data, index) {
var q1_status = data["q1_status"]
var q1_datestat = data["q1_datestat"]
var q2_status = data["q2_status"]
var q2_datestat = data["q2_datestat"]
var q3_status = data["q3_status"]
var q3_datestat = data["q3_datestat"]
var q4_status = data["status"]
var q4_datestat = data["fye_datestat"]
if (q1_status == 'Q1 not started' && q1_datestat == 'nok') {
$("td:eq(5)",row).addClass("redtablealert");
}
if (q2_status == 'Q2 not started' && q2_datestat == 'nok') {
$("td:eq(6)",row).addClass("redtablealert");
}
if (q3_status == 'Q3 not started' && q3_datestat == 'nok') {
$("td:eq(7)",row).addClass("redtablealert");
}
if (q4_status == 'Q4 not started' && q4_datestat == 'nok') {
$("td:eq(8)",row).addClass("redtablealert");
}
}
,
initComplete: function ()
{
if ( $("#detailbutton_guild_mission").length) {console.log ('detailed search exists');}
else {
var r = $('#guildmissions tfoot tr');
r.find('th').each(function(){
$(this).css('padding', 8);
});
$('#guildmissions thead').append(r);
$('#search_0').css('text-align', 'center');
$("#guildmissions_filter").append('<button id="detailbutton_guild_mission" class="btn btn-primary btn-outline btn-xs" type="button"><span class="bold">Detailed search</span></button>');
$('#changepageinput').val('');
var api = this.api();
// Apply the search
api.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
$('#tab-4').on('click', '#detailbutton_guild_mission', function() {
//$('#detailbutton_guild_mission').click(function() {
$('#tabledetailsearch').toggleClass('visibility');
});
$('#changepageinput').on('keyup change',function() {
if (parseInt($('#changepageinput').val()) > 0) {
var pagenum = (parseInt($('#changepageinput').val()) -1);
listContable.page( pagenum ).draw( false );
}
else {listContable.page( 0 ).draw( false );}
});
}
//childrows
function format(d) {
if (d.associate_id == <%= get_current_user_associate_id %>) {
if (d.accepted == false) {
$acceptance = '<div class="row"><button id="'+d.id+'" class="btn btn-primary accept_changes">Accept Mission</button></div>';
}
else {$acceptance = '<i class="fa fa-check-square-o fa-2x check-ok-green" aria-hidden="true"></i>Mission accepted';}
}
else {$acceptance = '';}
$html = '<div class="col-lg-12"><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Eighty</div><div class="panel-body" ><p id="eighty">'+d.eighty+'</p</div></div></div></div><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Q1 output</div><div class="panel-body" ><p id="q1out">'+d.q1_output+'</p</div></div></div></div><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Q2 output</div><div class="panel-body" ><p id="q2out">'+d.q2_output+'</p</div></div></div></div><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Q3 output</div><div class="panel-body" ><p id="q3out">'+d.q3_output+'</p</div></div></div></div><div class="row"><div class="panel panel-default"><div class="panel-heading font-bold">Q4 output</div><div class="panel-body" ><p id="q4out">'+d.fye_output+'</p</div></div></div></div>'+$acceptance+'</div>';
return $html;
};
$('#guildmissions tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = missionstable.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data())).show();
tr.addClass('shown');
//loaddetails(row.data());
$.ajax({
url: "/lastmissionhistory/"+row.data().id,
cache: false,
type: "GET",
dataType: "json",
timeout:3000,
success : function (data) {
$eighty_obj = data.find(o => o.changed_field === 'eighty');
$q1out_obj = data.find(o => o.changed_field === 'q1_output');
$q2out_obj = data.find(o => o.changed_field === 'q2_output');
$q3out_obj = data.find(o => o.changed_field === 'q3_output');
$q4out_obj = data.find(o => o.changed_field === 'fye_output');
if (typeof $eighty_obj !== "undefined") {
$("#eighty").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#eighty_history' aria-expanded='false' aria-controls='eighty_history'>Show previous value edited by "+$eighty_obj.email+" at "+ prettyDate($eighty_obj.updated_at)+ "</a></h4></div><div id='eighty_history' class='panel-collapse collapse'><div class='panel-body'>"+$eighty_obj.old_value+ "</div></div></div></div>" );
}
if ((typeof $q1out_obj !== "undefined")&&($q1out_obj.old_value !== '')) {
$("#q1out").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#q1_history' aria-expanded='false' aria-controls='q1_history'>Show previous value edited by "+$q1out_obj.email+" at "+ prettyDate($q1out_obj.updated_at)+ "</a></h4></div><div id='q1_history' class='panel-collapse collapse'><div class='panel-body'>"+$q1out_obj.old_value+ "</div></div></div></div>" );
}
if ((typeof $q2out_obj !== "undefined")&&($q2out_obj.old_value !== '')) {
$("#q2out").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#q2_history' aria-expanded='false' aria-controls='q2_history'>Show previous value edited by "+$q2out_obj.email+" at "+ prettyDate($q2out_obj.updated_at)+ "</a></h4></div><div id='q2_history' class='panel-collapse collapse'><div class='panel-body'>"+$q2out_obj.old_value+ "</div></div></div></div>" );
}
if ((typeof $q3out_obj !== "undefined")&&($q3out_obj.old_value !== '')) {
$("#q3out").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#q3_history' aria-expanded='false' aria-controls='q3_history'>Show previous value edited by "+$q3out_obj.email+" at "+ prettyDate($q3out_obj.updated_at)+ "</a></h4></div><div id='q3_history' class='panel-collapse collapse'><div class='panel-body'>"+$q3out_obj.old_value+ "</div></div></div></div>" );
}
if ((typeof $q4out_obj !== "undefined")&&($q4out_obj.old_value !== '')) {
$("#q4out").after( "<div class='col-lg-12 history_data'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a role='button' data-toggle='collapse' href='#q4_history' aria-expanded='false' aria-controls='q4_history'>Show previous value edited by "+$q4out_obj.email+" at "+ prettyDate($q4out_obj.updated_at)+ "</a></h4></div><div id='q4_history' class='panel-collapse collapse'><div class='panel-body'>"+$q4out_obj.old_value+ "</div></div></div></div>" );
}
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
alert("Error " + errorThrown);
if(textStatus==='timeout')
alert("request timed out");
}
});
$('.accept_changes').on('click',function(event){
//console.log(event.target.id);
$mission_id = event.target.id;
$.ajax({
type: "POST",
url: "/accept_mission",
data: {mission_id: $mission_id},
success:function(data){
if (data.status == "ok")
{
alert("Mission was accepted" );
missionstable.ajax.reload();
}
else { alert("Error");}
}
});
});
}
} );
}
});
$('#guildmissions tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input style="width:100%" type="text" placeholder="Search" />' );
} );
$('.disabled_search').html( '<input style="max-width:30px" disabled type="text" />' );
};
$(".guilds.showguild").ready(ready);
document.addEventListener('turbolinks:before-cache', function() {
if ($('#guildmissions_wrapper').length ==1) {missionstable.destroy() ; }
});
$(".guilds.showguild").on('turbolinks:load', ready);
1 answers
solution1
0 2018-09-18 21:02:50
Check the Turbolinks README https://github.com/turbolinks/turbolinks#making-transformations-idempotent
Functions should be idempotent, there's an advice about using a data attribute to mark an element when you apply a function to it, so you know if you already did that and you can skip the function call.
You can do something like:
missionstable = $('#guildmissions');
if (missionstable.data('dataTable') != 'initialized') {
missionstable.DataTable({....});
missionstable.data('dataTable','initialized');
}
The script checks if the data table was already initialized using a data attribute, if not, you initialize it and set a data attribute.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Load Datatables with turbolinks
detecting which page load when using turbolinks
Strange behaviours with ActiveRecord Models when returning rows of records to the viewing page
Using Turbolinks to act a little like an SPA?
Event turbolinks:load working strange
Social buttons twitter facebook disappear when changing page with turbolinks
Froala Toolbar bug when change page with rails and turbolinks 5
Turbolinks: How to stop running functions when you leave the page?
How to refresh a page with Turbolinks
Rails TurboLinks Page Loading
Related Tags