CODEWITHSUNDEEP
jqueryhtmldynamic
Captain Redbelly
Captain Redbelly

Reputation: 280

jQuery and the .Load() function hangs, how can I fix this?

I'm working on a project where I have absolutley no choice but to use a web server that will only serve static web pages.

This is a temporary solution (hopefully) but the site is complex enough that I need to be able to seperate at least SOME of the menus into seperate code pieces to embed into each page.

I thought I found the solution by using jQuery .load() function. This works great if I'm only loading one thing, but if I try to load two... it just hangs there telling me that the images are being downloaded, no errors, nothing.

here is the code I'm trying to work with

<!DOCTYPE html>
<html>
<head>
  <title>Test Site</title>
  <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  <link rel="icon" href="Graphics/Icons/favicon.ico" type="image/vnd.microsoft.icon" />
  <link rel="Shortcut Icon" href="Graphics/Icons/favicon.ico" />
  <link rel="Stylesheet" type="text/css" href="StyleSheets/Main.css" />
  <script type="text/javascript">
    $(document).ready(function () {

      $("#footer").load("WebParts/Footer.html"); 
      $("#header1").load("WebParts/Header.html");     
    });
  </script>
</head>
<body>
  <div id="header1" />
  <div id="content">
    &nbsp;
  </div>
  <div id="footer" />
</body>
</html>

where there is a directory with .html files names WebParts

the footer.html file looks something like

 <div>HI! I'm a footer <img src="someimage.png" alt="image description" /></div>

the header.html file looks something like

 <div>HI! I'm a header! yay look at me</div>

It'll load ONE of the divs, but never load anything else again.

any help would be greatly appreciated.

Upvotes: 0

Views: 508

Answers (2)

gogsrox
gogsrox

Reputation: 66

I ran into a couple of things. Hopefully this helps:

1) As others have said, I think you meant to use <div id="content"> without the # in front of content. If that was intentional, it might just be a good idea to not use # in ids - people might confuse it as a typo

2) In your jQuery, use # to identify ids like this:

$("#footer").load("WebParts/Footer.html"); 
$("#header1").load("WebParts/Header.html");

If you are using ids without #, it implies that you are referring to these fictional elements in your DOM:

<footer>...</footer>
<header1>...</header1>

which is clearly not what you are intending

3) This one should fix your code. Instead of:

<div id="header1" />
  <div id="#content">
    &nbsp;
  </div>
  <div id="footer" />

Use:

<div id="header1"></div>
  <div id="content">
    &nbsp;
  </div>
  <div id="footer"></div>

The above code fixes the # in the id and gets rid of self-closing div tags in the favor of explicitly-closed div tags.

Am not entirely sure what the difference between the two would be for jquery, but it led me to the expected result with your code. Hopefully somebody else can throw a light on that

Upvotes: 1

kaidez
kaidez

Reputation: 679

One thing you have to do is properly target the divs with a hash in your jQuery code:

$("#footer").load("WebParts/Footer.html"); 
$("#header1").load("WebParts/Header.html");

Upvotes: 2

Related Questions