5

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"]
Dave Guarino
  • 509
  • 5
  • 14
  • 1) What kind of element is `#msas`? 2) What is the value of the returned `data` if you alert/console.log it? – Mitya Jul 11 '12 at 20:43
  • @Utkanos: 1) #msas is a div with id="msas" 2) In Chrome (where it works), the data is HTML, as follows: – Dave Guarino Jul 11 '12 at 21:24

5 Answers5

12

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.

Dave Guarino
  • 509
  • 5
  • 14
  • The "html" did the trick. I read HTML files which are later on completed by tempo.js and appended to the DOM. – Michael Biermann Jan 11 '13 at 21:08
  • I found this answer: http://stackoverflow.com/questions/8159640/node-cannot-be-inserted-at-the-specified-point-in-the-hierarchy – Valamas Mar 04 '13 at 03:27
  • 1
    saved my atleast 30 minutes of brute forcing.. thanks buddy ! – Rohit Jan 17 '14 at 06:40
  • When you thought IE is the only weird kid.... Thanks for the 'html' dataType fix @DaveGuarino. Maybe some will say that it is good practice to always specify the dataType... browsers are physic to only a certain extent... :) – hatsrumandcode May 09 '16 at 08:34
0

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.

carruthd
  • 341
  • 1
  • 3
  • 8
  • Thanks, but I think this is just an artifact. The option shown here is only the default; the Get call for "data" fills in a bunch more options and then closes out the select. For reference, in Rails, the partial is: <%= label :area, :msa, 'Area' %> <%= collection_select :area, :msa, @msas, :code, :name, {:include_blank => "Select Area (Optional)"} %> – Dave Guarino Jul 11 '12 at 21:29
  • Kind of what I figured but... have to state the obvious first. The only other thing that I see that may be an issue is something that I have run into in the past... occasionally when you pass a string operation into a function you can get weird results. I would try having a variable for the url. EX: load_to = '/getmsas/'+state then use load_to in your jQuery.get() – carruthd Jul 11 '12 at 21:56
  • I found a fix. Check out my answer and let me know if you have any idea why Firefox would act differently from IE and Chrome. – Dave Guarino Jul 11 '12 at 22:21
0

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

aks
  • 255
  • 3
  • 15
0

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)

levlav
  • 1
  • 1
0

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.

303
  • 312
  • 4
  • 15