Is it possible to refresh a page without loading specific divs using Javascript?

Question

Is it possible to refresh a page using Javascript without reloading my menu/header?

I'm building a page that allows a user to view different combinations of table tops and bases and I've been resetting the build area with a page load. However I don't like the fact that it also reloads my header (causing a jump).

I know that I can tell the page to only load the div containing the build area with:

$('#tableBuilder').load(document.URL + ' #table Builder');

However, that doesn't reload my linked script.js file which is in the of the page which breaks my build area.

You need to wrap the code in script.js in one or more functions, then call them once when the page loads, and once each time you reload everything below the header. — Carl Younger
– Carl Younger, Commented Oct 9, 2014 at 20:28
@CarlSmith, Totally showing my ignorance here, but how do I call a function that looks like this?: ( function( $ ) {...} )( jQuery ); Contained within the function are a couple other functions, as well as the code that I need to refresh. I tried calling it like so: function($); (function($)); I also tried wrapping the whole thing in a new function, but that caused the .js to fail on the initial load. — SRing
– SRing, Commented Oct 10, 2014 at 12:30
After a bit more research it seems that ( function( $ ) {...} )( jQuery ); is an IIFE. More info on IIFE can be found here. To sum it up, the function in my .js file isn't being included in my page. Instead the function's result is being included, making it impossible for me to call the function (since only the result exists). Still working on getting the result I want. — SRing
– SRing, Commented Oct 10, 2014 at 15:06
You need to take the IIFE you're passing to 'onready' and break it out a bit, and name it. You could define one big function named boot or something, then pass it by name to the onready call, and then call it again when you 'reload' the page. Without seeing your code, it's impossible to say what's best, but that's the idea. You need to break the onready logic out, name it, then call it onready, and again on reload. — Carl Younger
– Carl Younger, Commented Oct 10, 2014 at 19:29

user4099047 · Accepted Answer · 2014-10-09 19:47:37Z

1

That's true , when you are using element.load(content) in JavaScript , It does not care about what javascript plugins you have implemented in your page . This means , for example if you have implemented a .js file in you page that selects every input in your whole page and adds a simple border:blue to all of them , when you loading a new element in your page dynamically using element.load('new content , for example a new input field') , border of this new input field never turns blue because your .js file has loaded before this ( when the first time your page completely loaded ) and all of its function has fired .

So in such a case you have to run your functions after loading new content :

for example :

      myDiv.load('<input id="aNewInput">');
      myFunction(); // This function sets *border:blue*

answered Oct 9, 2014 at 19:47

user4099047

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to refresh a page without loading specific divs using Javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related