1

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.

SRing
  • 694
  • 6
  • 16
  • 1
    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 Smith Oct 09 '14 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 Oct 10 '14 at 12:30
  • After a bit more research it seems that ( function( $ ) {...} )( jQuery ); is an IIFE. More info on IIFE can be found [here](http://stackoverflow.com/a/2421949/4126804). 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 Oct 10 '14 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 Smith Oct 10 '14 at 19:29

1 Answers1

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*