一个非常奇怪的问题:我有一个分为两部分的下拉菜单,其中选择一个州将添加第二个下拉菜单,为您提供该州的MSA区域列表。
使用对控制器的JQuery Get请求来完成此操作,该控制器返回Select下拉列表中的Areas列表,例如
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"]
因此,我强行提出了一个解决方案。我还不太了解为什么这个问题是特定于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的;这让我发疯,所以希望它可以帮助某人。