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.