Side navigation
#8941 closed bug (invalid)
Opened April 21, 2011 08:58PM UTC
Closed April 22, 2011 01:24AM UTC
Last modified April 28, 2013 07:07PM UTC
script error - invalid or illegal string when calling .load() on doc with DOCTYPE
| Reported by: | jaraco@jaraco.com | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | ajax | Version: | 1.5.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I create a simple harness.xhtml to load jQuery:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#main_cont").load("widget.html");
});
</script>
</head>
<body>
<div id="main_cont">
</div>
</body>
</html>
And then I create the file widget.html:
<!DOCTYPE html> <html><body><div> Got it! </div></body></html>
When I open harness.xhtml in Firefox 4 (either from a hosted location or using a file:// url), I get the following script error:
An invalid or illegal string was specified" code: "12 https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js Line 5620
If I remove the <!DOCTYPE html> line from the widget.html, it loads as I would expect, there is no script error, and the browser displays "Got it!".
It appears that single <!DOCTYPE> declaration is sufficient to prevent firefox from loading the content dynamically.
Nothing in the docs suggests why this would be the case. In fact, the examples from the docs appear to have <!DOCTYPE html> declarations.
Attachments (0)
Change History (6)
Changed April 21, 2011 09:03PM UTC by comment:1
Changed April 21, 2011 09:14PM UTC by comment:2
I created this jsfiddle, but it doesn't reproduce the problem.
Here's the harness hosted on Dropbox where you can see the behavior.
Changed April 22, 2011 01:24AM UTC by comment:3
| resolution: | → invalid |
|---|---|
| status: | new → closed |
The XHTML doctype pledges that you are going to create valid documents. The documentation for .load() says:
>jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
The markup being inserted into the <div> isn't valid there in XHTML. You could try Ben Alman's HTMLDoc plugin: http://benalman.com/projects/jquery-misc-plugins/#htmldoc .
Changed April 25, 2011 07:51PM UTC by comment:5
| component: | unfiled → ajax |
|---|---|
| priority: | undecided → low |
Changed April 28, 2013 07:07PM UTC by comment:6
Issue for me as well.
Index page without <!DOCTYPE html> performs a load() as expected.
$(someSelector).load("locationofhtmlresource.html .targetClass", function(response){
$(this).html(); //---> EMPTY, the html fragment is the response variable but no loaded html is appended to the original selector
})
after removing <!DOCTYPE html> or simply adding some garbage like <!DOCTYPE blabla> or <!DOCTYPE>
$(someSelector).load("locationofhtmlresource.html .targetClass", function(response){
$(this).html(); //---> CORRECT, the html fragment is s appended to the original selector
})
I looked into creating a jsFiddle for this bug, but I don't see how I can create widget.html such that a jsFiddle page could load that URL. I'll try loading remotely.