Skip to main content

Search and Top Navigation

#7225 closed bug (notabug)

Opened April 07, 2011 01:18AM UTC

Closed April 07, 2011 12:23PM UTC

Tabs: error when loading Ajax tab content from tabs in local file

Reported by: slomatt Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.11
Keywords: Cc:
Blocked by: Blocking:
Description

Summary

When I attempt to setup JQuery UI tabs to pull tab content from an external file using ajax I get the following error:

Node cannot be inserted at the specified point in the hierarchy" code: "3

This is thrown at line 5636 of the non-minified JQuery 1.5.1 source code.

fragment.appendChild( ret[i] );

Testing done using Firefox 4 with Firebug on OSX.

The following code causes the error.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" media="all" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $( function()
        {
            $( "#controller-pane" ).tabs();
        } );
    </script>
</head>
<body>

<div id="controller-pane">
    <ul class="tabs">
        <li><a href="data-pane.html">Analysis</a></li>
    </ul>
</div>

</body>
</html>
Attachments (0)
Change History (3)

Changed April 07, 2011 09:43AM UTC by rdworth comment:1

_comment0: I was only able to reproduce the error you've got in Firefox 4 by attempting your example in a local file. When I serve the file from a web server, no error. My first assumption was that Ajax from a local file isn't supported in this browser, but I wasn't able to get the same error with a minimal local file test case using only jQuery: \ \ {{{ \ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> \ <div></div> \ <script> \ $("div").load("otherfile.html"); \ </script> \ }}} \ \ It seems jQuery supports Ajax from a local file in Firefox 4, not sure if it supports it in all supported browsers, nor whether Tabs should. But the difference seems to be in Tabs using the $.ajax success callback whereas .load() uses the $.ajax complete callback. Tabs does basically this right now: \ \ {{{ \ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> \ <div></div> \ <script> \ $.ajax( $.extend( {}, undefined, { \ url: "otherfile.html", \ success: function( r ) { \ $("div").html( r ); \ } \ }) \ ); \ </script> \ }}} \ \ where if it followed the pattern in .load() it would look (minimally) something more like: \ \ {{{ \ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> \ <div></div> \ <script> \ $.ajax( $.extend( {}, undefined, { \ url: "otherfile.html", \ complete: function( jqXHR ) { \ $("div").html( jqXHR.responseText ); \ } \ }) \ ); \ </script> \ }}} \ \ When each of the last two examples are served from a web server in Firefox 4, no error, and you see the content from otherfile.html. When the same are run from a local file, the first has the error noted by slomatt while the second displays the Ajax-from-local-file content of the otherfile.html. Perhaps we should see if this inconsistency is considered a bug by jQuery.1302171052683281
description: '''Summary''' \ When I attempt to setup JQuery UI tabs to pull tab content from an external file using ajax I get the following error: \ \ Node cannot be inserted at the specified point in the hierarchy" code: "3 \ \ This is thrown at line 5636 of the non-minified JQuery 1.5.1 source code. \ \ fragment.appendChild( ret[i] ); \ \ Testing done using Firefox 4 with Firebug on OSX. \ The following code causes the error. \ \ \ {{{ \ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> \ <html> \ <head> \ <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" media="all" /> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> \ \ <script type="text/javascript"> \ $( function() \ { \ $( "#controller-pane" ).tabs(); \ } ); \ </script> \ </head> \ <body> \ \ <div id="controller-pane"> \ <ul class="tabs"> \ <li><a href="data-pane.html">Analysis</a></li> \ </ul> \ </div> \ \ </body> \ </html> \ }}} \ '''Summary''' \ When I attempt to setup JQuery UI tabs to pull tab content from an external file using ajax I get the following error: \ \ Node cannot be inserted at the specified point in the hierarchy" code: "3 \ \ This is thrown at line 5636 of the non-minified JQuery 1.5.1 source code. \ \ fragment.appendChild( ret[i] ); \ \ Testing done using Firefox 4 with Firebug on OSX. \ The following code causes the error. \ \ \ {{{ \ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> \ <html> \ <head> \ <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" media="all" /> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> \ \ <script type="text/javascript"> \ $( function() \ { \ $( "#controller-pane" ).tabs(); \ } ); \ </script> \ </head> \ <body> \ \ <div id="controller-pane"> \ <ul class="tabs"> \ <li><a href="data-pane.html">Analysis</a></li> \ </ul> \ </div> \ \ </body> \ </html> \ }}} \ \ So it seems there is some inconsistency in how well jQuery's $.ajax success and complete callbacks work depending on whether the original file is local. We should see if that's considered a jQuery bug before going any further.
summary: Issue with JQuery UI tabs loading tab content using AJAXTabs: error when loading Ajax tab content from tabs in local file

I was only able to reproduce the error you've got in Firefox 4 by attempting your example in a local file. When I serve the file from a web server, no error. My first assumption was that Ajax from a local file isn't supported in this browser, but I wasn't able to get the same error with a minimal local file test case using only jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div></div>
<script>
$("div").load("otherfile.html");
</script>

It seems jQuery supports Ajax from a local file in Firefox 4, not sure if it supports it in all supported browsers, nor whether Tabs should. But the difference seems to be in Tabs using the $.ajax success callback whereas .load() uses the $.ajax complete callback. Tabs does basically this right now:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div></div>
<script>
$.ajax({
  url: "otherfile.html",
  success: function( r ) {
    $("div").html( r );
  }
});
</script>

where if it followed the pattern in .load() it would look (minimally) something more like:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div></div>
<script>
$.ajax({
  url: "otherfile.html",
  complete: function( jqXHR ) {
    $("div").html( jqXHR.responseText );
  }
});
</script>

When each of the last two examples are served from a web server in Firefox 4, no error, and you see the content from otherfile.html. When the same are run from a local file, the first has the error noted by slomatt while the second displays the Ajax-from-local-file content of the otherfile.html. Perhaps we should see if this inconsistency is considered a bug by jQuery.

Changed April 07, 2011 09:44AM UTC by rdworth comment:2

description: '''Summary''' \ When I attempt to setup JQuery UI tabs to pull tab content from an external file using ajax I get the following error: \ \ Node cannot be inserted at the specified point in the hierarchy" code: "3 \ \ This is thrown at line 5636 of the non-minified JQuery 1.5.1 source code. \ \ fragment.appendChild( ret[i] ); \ \ Testing done using Firefox 4 with Firebug on OSX. \ The following code causes the error. \ \ \ {{{ \ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> \ <html> \ <head> \ <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" media="all" /> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> \ \ <script type="text/javascript"> \ $( function() \ { \ $( "#controller-pane" ).tabs(); \ } ); \ </script> \ </head> \ <body> \ \ <div id="controller-pane"> \ <ul class="tabs"> \ <li><a href="data-pane.html">Analysis</a></li> \ </ul> \ </div> \ \ </body> \ </html> \ }}} \ \ So it seems there is some inconsistency in how well jQuery's $.ajax success and complete callbacks work depending on whether the original file is local. We should see if that's considered a jQuery bug before going any further.'''Summary''' \ When I attempt to setup JQuery UI tabs to pull tab content from an external file using ajax I get the following error: \ \ Node cannot be inserted at the specified point in the hierarchy" code: "3 \ \ This is thrown at line 5636 of the non-minified JQuery 1.5.1 source code. \ \ fragment.appendChild( ret[i] ); \ \ Testing done using Firefox 4 with Firebug on OSX. \ The following code causes the error. \ \ \ {{{ \ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> \ <html> \ <head> \ <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" media="all" /> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> \ \ <script type="text/javascript"> \ $( function() \ { \ $( "#controller-pane" ).tabs(); \ } ); \ </script> \ </head> \ <body> \ \ <div id="controller-pane"> \ <ul class="tabs"> \ <li><a href="data-pane.html">Analysis</a></li> \ </ul> \ </div> \ \ </body> \ </html> \ }}} \

Changed April 07, 2011 12:23PM UTC by scottgonzalez comment:3

resolution: → invalid
status: newclosed

jQuery doesn't suport ajax over the file protocol.