Duplicate wrapper with browser forward/back button

seemack

I think this is related to using Turbolinks, but I haven't been able to get to the bottom of what's happening.

I'm giving all tables I'd like to display as DataTables the class "enable-data-table," then initializing such tables on the turbolinks:load event.

$(document).on "turbolinks:load", ->
  $('table.enable-data-table')
    .DataTable()

This works great when I'm clicking to navigate. But when I use the browser forward or back buttons, I get a DataTables wrapper div nested in another DataTables wrapper div. The table is only displayed once, but the search box and pagination are displayed twice.

The html produced looks much like this:

<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
  <div class="dataTables_length" id="DataTables_Table_0_length">
    <label>Show
      <select name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class="">
        <option value="25">25</option>
        <option value="100">100</option>
        <option value="250">250</option>
      </select>
     entries
    </label>
  </div>
  <div id="DataTables_Table_0_filter" class="dataTables_filter">
    <label>Search:<input type="search" class="" placeholder="" aria-controls="DataTables_Table_0"></label>
  </div>
  <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
    <div class="dataTables_length" id="DataTables_Table_0_length">
      *Identical to DataTables_Table_0_length above*
    </div>
    <table class="enable-data-table dataTable no-footer" data-order="[[ 0, &quot;desc&quot; ]]" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
      *Thead, tbody content here*
    </table>
    <div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 20 of 20 entries
    </div>
    <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
      *Pagination here*
    </div>
  </div>

Any idea how to display the header & footer only once? Thanks!

Chris

nathan-v

document.addEventListener("turbolinks:load", function() {
  if($('[id^=DataTables_Table]').length == 0) {
    $('.datatable').DataTable({
      "pagingType": "full_numbers"
    });
  }
});

This is what I ended up doing. It stops the datatable from initializing again if the wrapper already exists.

trnecka

nathan-v solution semi-worked in my case. The wrapper was not duplicated but it lacked any functionality as well. I solved it by destroing the table before caching took place.
My table has id=users_table

users_table = null
document.addEventListener("turbolinks:load", ->
    users_table = $('#users_table').DataTable()

document.addEventListener("turbolinks:before-cache", ->
  if $('#users_table_wrapper').length == 1
    users_table.destroy()

Not exactly the solution I would like as for every table I need to update 2 callbacks instead of one but at least it finally works for me.

galearii

Registered an account just to express my gratitude towards the great answers (and question) that you guys posted. Saved my life.

Thanks!

greg.blass

I haven't gotten around to watching this, but it should help you understand what it would take to form datatables to make it work with turbolinks when the user hits back. I'm gonna do it one day.

https://gorails.com/episodes/turbolinks-simplemde-markdown-editor

greg.blass

Blah, he just talks about the same way that I'm already doing it...destroy and re-create.

PsychoBob

Also had to register to comment on this one. In my case I'm using 1.9.4
Instead of forward/back, the issue demonstrated itself using JQueryUI tabs. Such as Instantiate on Tab 1 -> add data Tab 1 -> visit Tab 2 -> Click Tab 1 -> Add data (wrapper would replicate at this point. Repeat and it would continue to replicate.

for me fnDestroy() did not work. Ultimately my solution was as follows:
put my initial table in a div with ID

<div id="divRequest">
    <table id="tblRequests"> </table>
</div>

function onDataResults(results){
        if ($('#tblRequests_wrapper').length == 1) {
            $('#divRequest').empty().append('<table id="tblRequests"></table>');
        }
        
        // instantiate dataTable from scratch
        $('#tblRequests').dataTable({ ..... });
}

I tried a number of other things, but this is the only way it worked for me.

aldefouw

Here is some CoffeeScript code that documents how I solved the same issue:

$(document).on 'turbolinks:load', ->
  tableElementIds = [
    '#TABLE_NAME_HERE'
    '#TABLE_NAME_HERE'
  ]
  i = 0
  while i < tableElementIds.length
    tableElementId = tableElementIds[i]
    if $.isEmptyObject($.find(tableElementId))
      i++
      continue
    table = undefined
    if $.fn.DataTable.isDataTable(tableElementId)
      table = $(tableElementId).DataTable()
    else
      table = $(tableElementId).DataTable( ### OPTIONS ###)

    document.addEventListener 'turbolinks:before-cache', ->
      table.destroy()
      return

    i++

  return

Works great!

BrunoCalapez

All these solutions proved to be really slow for me.
But the following worked perfectly for me.
Just add data-turbolinks="false" to the table.

Here's my code:

<script>
    $(document).ready(function(){
        $('#myTable').dataTable({ });
    })
</script>

<table id="myTable" data-turbolinks="false">
 /* Insert table content... */
</table>    

ecm_dt

@BrunoCalapez Your solution of setting data-turbolinks to false works great for me.
Finally the problem is solved !!
Thanks for sharing it.

mitaamara

@BrunoCalapez Thank you for your solution, my problem is solved !