Article 4YCB7 Rails, Javascript and Turbolinks cached pages

Rails, Javascript and Turbolinks cached pages

by
grail
from LinuxQuestions.org on (#4YCB7)
I am obviously missing a key point here, so this is what I (think I) know so far:

1. Rails app uses Turbolinks

2. Turbolinks takes over the loading of the page and caches it once done (I think)

So I have 3 javascript files.

1. Allows the user to click a link and makes a form appear, which then adds the form data
to the end of a list of entries in a div
Code:#code to show either link or form - app/javascript/packs/new_task.js
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const changeLinkForm = element => {
let new_tasks = document.querySelectorAll(element);
const [div, link, form] = new_tasks;

div.replaceChild(link, form);

link.addEventListener('click', e => {
div.replaceChild(form, link);
},false);

form.addEventListener('submit',async e => {
div.replaceChild(link, form);
await sleep(1000);
form.reset();
},false);
}

window.addEventListener('turbolinks:load', event => {
changeLinkForm('#new_task');
}, false);

#code called once form is submitted to create entry and add to list - app/views/tasks/create.js.erb
var task = document.querySelector('#incomplete_tasks');

task.insertAdjacentHTML("beforeend", '<%= j render(@task) %>');Now this is where I think the first part of the caching shows as after I add a new entry and then look at the source for the page,
the new entry does not appear in the source but is on the page, hence the DOM has been updated but not the cached page

2. I have javascript to remove an entry from the list
Code:# code called when 'remove' link is clicked - app/javascript/packs/remove_task.js
const remove_line = name => {
let elements = document.querySelectorAll(name);

elements.forEach(element => {
element.lastElementChild.addEventListener('click', event => {
element.remove();
}, false);
});
}

window.addEventListener('turbolinks:load', event => {
remove_line('form');
}, false);Now this code works just fine on all entries that were on the page when it first loaded.
However, the newly added entries from code above do not disappear, but the destroy method within rails constructor does remove the entry from database, so on a page refresh the entry is now gone

So my question is, how do I get my remove code to work on the newly added entries from the create/show_hide code?

Please let me know if I have missed any vital details to help solve the problem/educate me?latest?d=yIl2AUoC8zA latest?i=skwWhwZbYw4:Wsb8W85sXiw:F7zBnMy latest?i=skwWhwZbYw4:Wsb8W85sXiw:V_sGLiP latest?d=qj6IDK7rITs latest?i=skwWhwZbYw4:Wsb8W85sXiw:gIN9vFwskwWhwZbYw4
External Content
Source RSS or Atom Feed
Feed Location https://feeds.feedburner.com/linuxquestions/latest
Feed Title LinuxQuestions.org
Feed Link https://www.linuxquestions.org/questions/
Reply 0 comments