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.
bobjones1208Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Hi, this should work I'm using similar code to load my menu .
Try to remove http://... use only the name of the file menu.html.

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

Open in new window


Is this occur on a specific page or on all pages?
Using Chrome dev tool check to see if you have a Javascript error, javascript can have a conflict with other js called on the same page.

You can try to debug by adding a notice, at least you will get the error message.

Check the
Display a notice if the Ajax request encounters an error
part
https://api.jquery.com/load/

Other solution:
If you use PHP it easy using include_once
http://php.net/manual/en/function.include-once.php

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
bobjones1208Author Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
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.
screenshot
bobjones1208Author Commented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.