Body Tag Disappear When Using Jquery.load()

November 16, 2024 Post a Comment

Im trying to make a pop-up like window using jquery and its modal box. First I load the content from a html file: $('#test').load('test.htm'); Then I load the popup: $('#test').di

Solution 1:

A page can only have one body tag. If you already have one on the page, the second will be ignored.

In your case, it sounds like the browser is ignoring the duplicate body (nothing specific to jquery). Rather than use the body for styling, use a containing <div> with an id or class which will be retained.

Solution 2:

It probably removes the body tag because it's not allowed! Each document can only have one body. Rather than force everyone to redo all their HTML pages, jQuery probably just grabs the contents of the body to use when you call load().

Have you thought about perhaps wrapping everything in a containing element? eg: <div class="body"> You can then apply the exact same styles to that element.

/* change this: */body { color: #f0f; etc }

/* to this: */body, div.body { color: #f0f; }

Solution 3:

You are loading the HTML into an existing document that already has a body tag. A document can only have one so it automatically filters anything and extracts only the HTML inside the body tag when using load. You should wrap your HTML in a div with a specific class and do your formatting based on that class.

From the load docs (emphasis mine):

In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector. The syntax looks something like "url #some > selector". Default selector "body>*" always applies. If the URL contains a space it should be escape()d. See the examples for more information.

Solution 4:

You might dynamically create the body tag using document.write of js as an alternative.

Solution 5:

I had the same issue, and solved it more or less as the following: instead of using load(), you can use get(), and do some smart string replacement:

var content = get("test.htm")
               .replace("<body>", "<body><div class='body'>")
               .replace("</body>", "</body>");
$("#test").replace($(content).filter(".body"));

Build Html5