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 us

Answer 1

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 2

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 3

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.

Answer 4

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 5

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