jquery load function for menu seems not to load at random times

I have a piece of jquery code that loads my side menu for my website.

<script>$(function(){$("#includedContent").load("http://...menu.html");});</script>

Open in new window

and then I call it from HTML...

<div id="includedContent"></div>

Open in new window

It seems to work about 99% of the time. However, there have been numerous times that I look at my site and the menu doesn't show up at all. If I close my browser, clear cache and cookies it seems to fix the problem. However, I'm very concerned that other visitors are having or are going to have the same problem.

Is this a common issue with the jquery load function, or could this be something related to my web hosting company?

I would also listen to alternative suggestions on implementing the vertical menu where I can edit a single file to make changes. I'm frequently adding entries to the menu, so I need it to be easily editable.

JavaScriptjQueryHTML

Last Comment

bobjones1208

8/22/2022 - Mon

ASKER CERTIFIED SOLUTION

lenamtl

4/6/2015

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Scott Fell

4/6/2015

If you are using asp, php or another server side language, you can use an include file and that is exactly what I use for all my common files.

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  <div id="header">Header</div>
  <div id="body">Body</div>
  <div id="footer">footer</div>
</body>
</html>

Open in new window

Will convert to

<!DOCTYPE html>
<html>
<head>
<?php include_once "common_head_files.php"?>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  <?php include_once "body_header.php"?>
  <div id="body">Body</div>
  <?php include_once "body_footer.php"?>
</body>
</html>

Open in new window

Otherwise, check to make sure your site does not have any js errors, all files are loading and double check the site in the validator http://validator.w3.org/ With javascript, some errors will prevent scripts from working as expected.

bobjones1208

4/7/2015

ASKER

I checked my site for js errors on http://codebeautify.org/jsvalidate and http://validator.w3.org. Both validators came back with zero errors, so I don't believe it's an issue with js.

Another interesting thing I discovered is that if I download an .html page from my hosting company, it strips out the

<div id="includedContent"></div>

Open in new window

section of my code. I have to manually add it back to the HTML before I upload it. It seems like that may be on the right track to why it's not working at certain points, but I'm honestly not sure. Do you think I should contact support for my hosting company?

Scott Fell

4/7/2015

That is right, that bit of code will be blank in your code. It is filled in after the page page loads. The process is your webpage loads, then jquery runs the load function and injects the data inside of that div. As example run this code below and you will get.

This is Bold. This is not.

You can see the working example http://jsbin.com/qiligiyole/1/edit

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script>
  $(function(){
  $('#includedContent').html('<b>This is Bold.</b> This is not.');
  });
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>

Open in new window

You can use the browser's console to see the data injected into your code.

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

bobjones1208

4/9/2015

ASKER

I had to remove the fq name and just use a relative path because it was getting blocked by cross domain request for some reason.