Re-execute js on back without reloading the whole page

Question

Is there a way to re-execute JS without refreshing a page?

Say if I have a parent page and an inside page. When the inside page gets called, it gets called via ajax, replacing the content of the parent page. When user clicks back, I would like to navigate them back to the parent page without having to reload the page. But, the parent page UI relies on javascript so after they click back, I would like to re-execute the parent page's javascript. Is this possible?

Edit: Here is some code. I wrap my code in a function but where and how would you call this function?

function executeGlobJs() {
   alert("js reload success");
}

Answer 1

You could use the html5 history-api:

In your click -handler you'll call the pushState -method, stat stores the current state for later reuse:

$(document).on('click', 'a.link', function () {
  // some ajax magic here to load the page content
  // plus something that replaces the content...  

  // execute your custom javascript stuff that should be called again
  executeGlobJs()

  // replace the browser-url to the new url
  // maybe a link where the user has clicked
  history.pushState(data, title, url);
})

...later if the user browses back:

$(window).on('popstate', function () {
  // the user has navigated back,
  // load the content again (either via ajax or from an cache-object)
  // execute your custom stuff here...
  executeGlobJs()
})

This is a pretty simple example and of course not perfect! You should read more about it here:

• https://css-tricks.com/using-the-html5-history-api/
• https://developer.mozilla.org/en-US/docs/Web/API/History_API

For the ajax and DOM-related parts, you should need to learn a bit about jQuery http://api.jquery.com/jquery.ajax/ . (It's all about the magic dollar sign)

Another option would be the hashchange -event, if you've to support older browsers...

Answer 2

You can encapsulate all your javascript into a function, and call this function on page load. And eventually this will give you control of re-executing entire javascript without reloading the page.

This is common practise when you use any concat utility (eg. Gulp)

Answer 3

If you want to reload the script files as if it would be on a page reload, habe a look at this .

For all other script functions needed, just create a wrapper function as @s4n989 and @Rudolf Manusadzhyan wrote it. Then execute that function when you need to reinit your page.

Answer 4

I'm having the same problem I don't use jquery. I don't have a solution yet. I think that your problem is that it doesn't read all the document.getelements after you add content, so my idea is to put all the element declarations in a function. And than after the ajax call ends to call the function to get all the elements again.

So it might be something like that

Func getElems(){
    const elem= document.getelementsby...
    Const elem.....


At the end of the js file make a call for 
the function 
getelems()

And than at the end of the event of the 
ajax call. Just call the function again.

Sorry that is something that comes to my mind on the fly while reading and thinking on the problem i have too:).

Hope it helped I will try it too when I will be on the computer:)

Answer 5

I believe you are looking for a function called

.preventDefault();

Here's a link to better explain what it does - https://api.jquery.com/event.preventdefault/

Hope this helps!

---

EDIT:

By the way, if you want to execute the JS on back you can wrap the script inside of

$('.your-div').on('load', function(e) {
    e.preventDefault();
    //your JavaScript goes here
}