turbolinks snippets

Idempotency with Rails and Turbolinks

Tagged idempotency, turbolinks, d3.js  Languages ruby

To achieve idempotency with Rails and Turbolinks you have many options including these:

  • Option 1: Destroy DOM elements

Destroy existing elements that were created on the first page load. This works well with most libraries, including D3.js.

The is also the easiest to implement if you put everything under one root DOM element.

  • Option 2: Set a flag

Set a flag. Check if the flag is set before running the script. Note that you will have to use delegated event listeners or attach event listeners again. This is hard to do with, for example, D3.js.

document.addEventListener("turbolinks:load", function() {
  $('.linechart').each(function(_ix, el) {
    // Option 1: Destroy existing elements that were created on the first page load
    el = $(el);
    el.empty(); // empty removes all child elements. Normally this would be put in the script itself
    linechart(el)
    // Option 2: Set a flag to avoid calling the script twice 
    //if(el.attr('data-initialized') == null) {
    //  console.log("not initialized")
    //  linechart(el)
    //} else {
    //  console.log("initialized")
    //}
    // // Attach event listeners again
    // linechart.attachDelegatedEventListeners(el);
    //el.attr('data-initialized', true);
  });
});