Opened 12 years ago

Closed 12 years ago

#7225 closed bug (notabug)

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 (last modified by rdworth)

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>

Change History (3)

comment:1 Changed 12 years ago by rdworth

Description: modified (diff)
Summary: Issue with JQuery UI tabs loading tab content using AJAX → Tabs: 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( $.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.

Version 0, edited 12 years ago by rdworth (next)

comment:2 Changed 12 years ago by rdworth

Description: modified (diff)

comment:3 Changed 12 years ago by Scott González

Resolution: → invalid
Status: new → closed

jQuery doesn't suport ajax over the file protocol.

Note: See TracTickets for help on using tickets.