仅在Firefox中的JQuery AJAX异常:“节点无法插入层次结构中的指定点”(HierarchyRequestError)

时间:2012-07-11 20:32:48

标签: jquery ruby-on-rails ajax ruby-on-rails-plugins

非常奇怪的问题:我有一个两部分的下拉列表,选择一个州然后会添加第二个下拉列表,为您提供该州的MSA区域列表。

使用对控制器的JQuery Get请求来完成此操作,该控制器返回Select下拉列表中的区域列表,例如

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;
    }
  );
})

注意 - 此代码改编自此处的教程:http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/

这在Chrome和IE中运行良好,但在Firefox(13.0.1)中它不起作用,产生两个错误:

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>

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

5 个答案:

答案 0 :(得分:12)

所以我粗暴地强迫解决这个问题。我真的不明白为什么这个问题特定于Firefox,但可能会调查它。

我能够通过为dataType(get方法的最后一个参数)添加一个参数来明确地将其声明为html来解决这个问题。

Get在JQuery文档中描述:http://api.jquery.com/jQuery.get/

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

所以有效的代码是添加“html”作为dataType参数:

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;
    }
  );
})

同样,我需要调查为什么这是特定于Firefox的;这让我发疯,所以希望能帮助别人。

答案 1 :(得分:0)

不确定这只是一个不完整的复制粘贴,但

<select id="area_msa" name="area[msa]"><option value="">Select Area (Optional)</option>

需要关闭select标签,否则你的html的其余部分会嵌套在select元素中......这很糟糕。

答案 2 :(得分:0)

我在FF中遇到了同样的问题。我的Servlet返回了一个内容类型为“text”的文本。 FF将其解释为text / xml并尝试在正文中插入xml - 因此错误

我将内容类型更改为text / plain - 一切都很好

答案 3 :(得分:0)

我已经解决了这个问题

header('Content-Type: text/html; charset=utf-8');

在php中获取文件。如果没有正确设置标头,则会发生错误(当从一台服务器移动到另一台服务器时,并且在旧服务器上它工作正常,在新服务器上没有,直到我设置标头)

答案 4 :(得分:0)

我遇到了同样的问题,只有当响应为空时才会发生这种情况,例如,我期待一个有记录的表,但没有任何东西可以显示。