How to structure a JavaScript/HTML website for global variables?

Question

I'm building a dynamic website that gives travel directions, but I'm new to JavaScript and I'm not sure of the best way to code it.

Currently, I'm loading different parts of the site (header, main, footer) by having separate HTML pages for each element, and then loading these pages into the main page. For example, on the main page I have:

<body onload="initialize()">
   <div id="header"></div>
   <div id="main"></div>
   <div id="footer"></div>
</body>

And in the imported JavaScript script I have:

function initialize() 
{
   $('#header').load('header.html');
   $('#main').load('main.html');
   $('#footer').load('footer.html');
}

The issue is that I want all three of these imported pages to have access to global variables and functions in a single JavaScript file where I will be storing route information, coordinates, etc. Specifically, I ran into problems where I was unable to call a function in my main JS script from the header.html page that had been loaded into the parent page.

What is the best way to do this? Any help is much appreciated!

Can you show us a bit more of your code? Specifically what are the functions you can't access and where are they declared? And Where are you trying to call them and how do you attempt to do that? — Ben McCormick
– Ben McCormick, Commented Mar 11, 2013 at 2:06

Dave Anderson · Accepted Answer · 2013-03-11 02:23:03Z

2

You should have a single js file with all your client side code in and include that on the page with a <script> tag. Then employ $( document ).ready() to run your initialisation. You can also define global variables here and assign them so they can be accessed later.

In your JavaScript include will be something like this;

var $header, $main, $footer

function initialize() 
{
   $header.load('header.html');
   $main.load('main.html');
   $footer.load('footer.html');
}

$(document).ready(function() {
  $header = $('#header');
  $main = $('#main');
  $footer = $('#footer');

  initialize();
});

Be careful with the number of global variables you create though see; 11 JavaScript mistakes you're making.

answered Mar 11, 2013 at 2:23

Dave Anderson

12.4k4 gold badges60 silver badges80 bronze badges

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

3 Comments

Stephen Over a year ago

In this scenario, how would I (for example) print a global variable in header.html? Not specifically the print function, but how do I access a global function/variable from one of the loaded pages?

Dave Anderson Over a year ago

If you want to assign the value of a variable to the contents of a HTML node somewhere in your header find the node with a selector in jQuery and apply the value of the variable with .text(), e.g. var myVar = 'text to insert'; $('#myHeaderNodeId').text(myVar); What are you trying to call from the loaded page? Does this have JavaScript included in it? What purpose does separating all the files serve?

Stephen Over a year ago

The idea is that there are a series of different travel steps in my application - walking directions to the bus stop, waiting at the bus stop, and bus directions. I'm starting to think that I should just have a single page with separate div classes that are updated by JavaScript depending on the current trip stage. I figured it would be better to have separate pages for each core page (ignoring the header and footer) so that it's easier to update the directions on each page.

F25rT · Accepted Answer · 2013-03-11 01:59:31Z

0

have you tried putting it outside on the function to make it global ...

var <variable name>
function <function_name>{

<variable name>

}

answered Mar 11, 2013 at 1:59

F25rT

1142 silver badges10 bronze badges

Comments

Pradip Kharbuja · Accepted Answer · 2013-03-11 02:01:25Z

0

in main page.

<script type="text/javascript">
    variable = <value>;   //variable used with var keyword is considered as global variable
</script>

answered Mar 11, 2013 at 2:01

Pradip Kharbuja

3,5686 gold badges31 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to structure a JavaScript/HTML website for global variables?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related