{"action":"created","issue":{"url":"https://api.github.com/repos/usablica/intro.js/issues/328","labels_url":"https://api.github.com/repos/usablica/intro.js/issues/328/labels{/name}","comments_url":"https://api.github.com/repos/usablica/intro.js/issues/328/comments","events_url":"https://api.github.com/repos/usablica/intro.js/issues/328/events","html_url":"https://github.com/usablica/intro.js/issues/328","id":43270044,"number":328,"title":"refresh should refresh cached elements","user":{"login":"ilovett","id":1776100,"avatar_url":"https://avatars.githubusercontent.com/u/1776100?v=3","gravatar_id":"","url":"https://api.github.com/users/ilovett","html_url":"https://github.com/ilovett","followers_url":"https://api.github.com/users/ilovett/followers","following_url":"https://api.github.com/users/ilovett/following{/other_user}","gists_url":"https://api.github.com/users/ilovett/gists{/gist_id}","starred_url":"https://api.github.com/users/ilovett/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ilovett/subscriptions","organizations_url":"https://api.github.com/users/ilovett/orgs","repos_url":"https://api.github.com/users/ilovett/repos","events_url":"https://api.github.com/users/ilovett/events{/privacy}","received_events_url":"https://api.github.com/users/ilovett/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2014-09-19T18:49:18Z","updated_at":"2015-01-01T01:32:19Z","closed_at":null,"body":"One of my tips has a button which the user can press to change the layout, which swaps an element which for identical another, even though they share the same selector.  After I change the layout, if I click next to a tip which highlights the swapped element, the tip goes offscreen.  The `targetElement` in the `onchange` callbacks refer to a DOM element which no longer exists on the page...\r\n\r\nMy thinking was that I would be able to call `refresh()` in `onbeforechange` but it didn't refresh the elements on the page.\r\n\r\nI think refresh should either recache the elements, or the elements should be more dynamic and calculated on the fly, especially with todays single page applications.\r\n"},"comment":{"url":"https://api.github.com/repos/usablica/intro.js/issues/comments/68477951","html_url":"https://github.com/usablica/intro.js/issues/328#issuecomment-68477951","issue_url":"https://api.github.com/repos/usablica/intro.js/issues/328","id":68477951,"user":{"login":"mindjuice","id":934638,"avatar_url":"https://avatars.githubusercontent.com/u/934638?v=3","gravatar_id":"","url":"https://api.github.com/users/mindjuice","html_url":"https://github.com/mindjuice","followers_url":"https://api.github.com/users/mindjuice/followers","following_url":"https://api.github.com/users/mindjuice/following{/other_user}","gists_url":"https://api.github.com/users/mindjuice/gists{/gist_id}","starred_url":"https://api.github.com/users/mindjuice/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mindjuice/subscriptions","organizations_url":"https://api.github.com/users/mindjuice/orgs","repos_url":"https://api.github.com/users/mindjuice/repos","events_url":"https://api.github.com/users/mindjuice/events{/privacy}","received_events_url":"https://api.github.com/users/mindjuice/received_events","type":"User","site_admin":false},"created_at":"2015-01-01T01:32:19Z","updated_at":"2015-01-01T01:32:19Z","body":"I have a similarly \"dynamic\" page using AngularJS, and some of the elements in my page get recreated as ilovett mentioned.  The autorefresh feature in Angular-Intro automatically calls refresh() when things change on the Angular side, and that made the situation a bit better, but it still doesn't work in some cases.\r\n\r\nI'm not yet familiar with introjs' code, but is there some reason that the elements need to be cached?  Can't you just lookup the element right when the user requests the next or previous element?  This isn't performance critical code.\r\n\r\nI have also seen one case where it is possible in for my currently focused element to be recreated (same id, but a new DOM node got created).  Initially, when this happens, the introjs overlay just moves to the top left corner.  But then, if I hit Back or Next, introjs crashes on the last line of code below, because oldShowElement is null:\r\n\r\n      //remove old classes\r\n      var oldShowElement = document.querySelector('.introjs-showElement');\r\n      oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\\s+|\\s+$/g, '');\r\n"}}