JQuery的AJAX的例外只有在Firefox：＆QUOT;节点不能插在层次结构＆QUOT指定点; （HierarchyRequestError）

问题描述

很奇怪的问题：我有一个2部分的下拉列表中，其中选择一个国家会再添加第二个下拉列表让你在该国MSA区列表

。

使用jQuery的Get请求到一个控制器，返回区的列表中选择下拉列表中，像

这做的是

jQuery的（功能（$）{  //当#area_state场变化  $（＃area_state）。改变（    功能（） {      //拨打电话，并更换内容      VAR状态= $（'＃选择area_state：选择）VAL（）。      如果（国家==）状态=0;      jQuery.get（        / getmsas /+状态，        功能（数据）{$（＃MSAS）的HTML（数据）。 }      ）    返回false;    }  ）;}）

请注意 - 这code改编自这里的教程：http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/

这工作正常，在Chrome和IE，但在Firefox（13.0.1），它不工作，产生两个错误：

 错误：垃圾文档元素之后
源文件：http：//本地主机：3000 / getmsas /康涅狄格
行：2列：1
来源$ C ​​$ C：
＆LT;选择一个id =area_msaNAME =区域[MSA]＆GT;＆LT;期权价值=＆GT;选择区（可选）LT; /选项＆GT;
 

和

 错误：未捕获的异常：[异常...节点不能在指定点插入
层次结构中的code：3nsresult：0x80530003（HierarchyRequestError）的位置：
HTTP：//本地主机：3000 /资产/ jquery.js和身体= 1线：6498]
 

解决方案

所以，我蛮力强行解决这个。我真的不明白，为什么这个问题是针对Firefox的还，但可能会进行调查。

我可以通过添加的dataType参数（get方法的最后一个参数）来解决这个问题明确声明为HTML。

得到的是这里的jQuery的文档中描述： http://api.jquery.com/jQuery.get/

jQuery.get（URL [数据] [，成功（数据，textStatus，jqXHR）] [，dataType的]）

所以，code，它的工作原理是，通过添加HTML作为具体的数据类型参数：

  jQuery的（功能（$）{
  //当#area_state场变化
  $（＃area_state）。改变（
    功能（） {
      //拨打电话，并更换内容
      VAR状态= $（'＃选择area_state：选择）VAL（）。
      如果（国家==）状态=0;
      jQuery.get（
        / getmsas /+状态，
        功能（数据）{$（＃MSAS）的HTML（数据）。 }，
        HTML
        //以上线是FIX
      ）
    返回false;
    }
  ）;
}）
 

此外，我需要调查为什么这是火狐特定的;这是推动我疯了，所以希望它可以帮助别人了。

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"]

解决方案

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.

这篇关于JQuery的AJAX的例外只有在Firefox：＆QUOT;节点不能插在层次结构＆QUOT指定点; （HierarchyRequestError）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！