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

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.