JQuery AJAX exception only in Firefox: “Node cannot be inserted at the specified point in the hierarchy” (HierarchyRequestError)

Question

Very strange problem: I have a 2-part dropdown, where selecting a State will then add a second dropdown giving you a list of MSA Areas in that State.

This is done using a JQuery Get request to a controller that returns the list of Areas in a Select dropdown, like

jQuery(function($) {
  // when the #area_state field changes
  $("#area_state").change(
    function() {
      // make a call and replace the content
      var state = $('select#area_state :selected').val();
      if(state == "") state="0";
      jQuery.get(
        '/getmsas/' + state,
        function(data){ $("#msas").html(data); }
      )
    return false;
    }
  );
})

Note -- This code was adapted from the tutorial here: http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/

This works fine in Chrome and IE, but in Firefox (13.0.1) it does not work, yielding two errors:

Error: junk after document element
Source File: http://localhost:3000/getmsas/Connecticut
Line: 2, Column: 1
Source Code:
<select id="area_msa" name="area[msa]"><option value="">Select Area (Optional)</option>

and

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point
in the hierarchy"  code: "3" nsresult: "0x80530003 (HierarchyRequestError)"  location:   
"http://localhost:3000/assets/jquery.js?body=1 Line: 6498"]

Answer 1

So I brute-forced a solution to this. I don't really understand why this issue is specific to Firefox yet, but may investigate it.

I was able to fix this by adding an argument for dataType (the last parameter of the get method) explicitly declaring it as html.

Get is described in the JQuery documentation here: http://api.jquery.com/jQuery.get/

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

So the code that works is by adding "html" as the dataType argument:

jQuery(function($) {
  // when the #area_state field changes
  $("#area_state").change(
    function() {
      // make a call and replace the content
      var state = $('select#area_state :selected').val();
      if(state == "") state="0";
      jQuery.get(
        '/getmsas/' + state,
        function(data){ $("#msas").html(data); },
        "html"
        // ABOVE LINE IS THE FIX
      )
    return false;
    }
  );
})

Again, I need to investigate why this is Firefox-specific; this was driving me crazy, so hopefully it helps someone out.

Answer 2

Not sure if this just an incomplete copy paste but

<select id="area_msa" name="area[msa]"><option value="">Select Area (Optional)</option>

needs to close out the select tag or else the rest of your html is nested within the select element... which is bad.

Answer 3

I had the same problem in FF only. My Servlet was returning back text with a content type "text". FF interprets this as text/xml and tries to insert xml in the body - hence the error

I changed the content type to text/plain - all is well

Answer 4

I have solved this adding

header('Content-Type: text/html; charset=utf-8');

in php to the fetch file. When the header is not appropriately set the bug occurs (had this when moved from one server to another and on the old server it worked fine, on the new not, until i set the headers)

Answer 5

I had the very same issue, and it was only happening when the response was empty, for instance, I was expecting a table with records, but there was nothing to display.