【发布时间】：2015-11-01 23:04:50
【问题描述】：
我正在发送 $.ajax() edit/update 请求以编辑组记录，该请求应呈现 json 数据 (render :json, @data.to_json)
我只有在检查 Ajax 成功后才得到 xor 对象。
数据在服务器上设置正确，但在成功回调函数中声明为未定义。
这很奇怪，因为我为 new/create 复制了相同的代码并且运行良好。
这是编辑/更新代码：
=============================== HTML ====================================
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body class="<%= controller_name -%> <%= action_name -%>">
....
<!-- BEGIN PAGE CONTENT -->
<div id="page-content">
<div id='wrap'>
<div id= "groupRole-tableTools" class="options">
<div id="groupRole-addTool" class="btn-group visible">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">...</button>
<ul class="dropdown-menu" role="menu">
<li><a id="group-addTool" href="/groups/new">Add a group</a></li>
...
</ul>
</div>
</div>
<div id="groupRole-lineTools" class="options hidden">
...
<a data-toggle="modal" data-accessible-id="#" id="groupRole-editTool" href="#groupRoleModal">...</a>
...
</div>
<div class="panel-body collapse in">
<table class="table table-striped table-bordered datatables" id="groups">...</table>
</div>
<div class="modal fade" id="groupModal" tabindex="-1" access_level="dialog" aria-labelledby="groupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
</div> <!--wrap -->
</div> <!-- page-content -->
<!-- END PAGE CONTENT -->
<script src="/assets/administration/groups.index.js></script>
<script src="/assets/administration/init.js></script>
</body>
</html>
这里是页面加载的 groups.index.js：
================= groups.index.js ===================
$(document).ready(function() {
console.log("groups.index.js");
$.ajaxSetup({ cache: false });
var ajaxUrl = "http://" + window.location.host + "/groups.json";
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": ajaxUrl,
"success": function (data) {
var table = $('#groups').DataTable( {
select: true,
data: data.rows,
columns: [...],
columnDefs: [...]
...
} );
table
.on( 'select', function ( e, dt, type, indexes ) {
var rowData = table.rows( indexes ).data().toArray();
var companyId = rowData[0].company_id;
groupId = rowData[0].group_id;
var groupName = rowData[0].group_name;
// hide add tool
$("#groupRole-addTool" ).toggleClass( "hidden", "visible" );
// show line tool
$("#groupRole-lineTools" ).toggleClass( "hidden", "visible" );
// set line tools data in DOM
$("#groupRole-editTool").attr("data-accessible-id", accessibleId );
$("#groupRole-editTool").attr("data-accessible-url", accessibleUrl );
} )
.on( 'deselect', function ( e, dt, type, indexes ) {
// hide line tool
$("#groupRole-lineTools" ).toggleClass( "hidden", "visible" );
// show add tool
$("#groupRole-addTool" ).toggleClass( "hidden", "visible" );
} );
// Handle EDIT GROUP tool click event
$('#groupRole-editTool').on('click', function(e) {
var itemId = $(this).data('accessible-id');
var ajaxUrl = "http://" + window.location.host + accessibleUrl + itemId + "/edit";
e.preventDefault();
e.stopPropagation();
// get EDIT FORM in modal content
$.ajax({
"dataType": 'html',
"type": "GET",
"url": ajaxUrl,
"success": function (code_html, _status) {
$('#groupModal').modal('show');
$("#groupModal div.modal-content").html(code_html);
$("#edit_group").on("ajax:success", function(xhr, data, _status){
console.log("data: "+JSON.stringify(data, null, 2)); # data undefined !!!!
if (data["error"]) {
// errors back from server
$("#modalGroupAlert" ).removeClass('alert-info');
$("#modalGroupAlert" ).addClass('alert-danger');
$("#modalGroupAlert span" ).replaceWith( data["html"] );
$("#modalGroupAlert" ).toggleClass( "hidden", "visible" );
} else {
// no errors
table.row.data(data["row"]).draw();
$('#groupModal').modal('hide');
}
});
}
});
});
// Handle ADD GROUP tool click event
$('#groupRole-addTool').on('click', function(e) {
var ajaxUrl = "http://" + window.location.host + "/groups/new";
e.preventDefault();
e.stopPropagation();
// get NEW FORM in modal content
$.ajax({
"dataType": 'html',
"type": "GET",
"url": ajaxUrl,
"success": function (code_html, _status) {
$('#groupModal').modal('show');
$("#groupModal div.modal-content").html(code_html);
$("#new_group").on("ajax:success", function(xhr, data, _status){
console.log("data: "+JSON.stringify(data, null, 2)); # data defined !!!!
if (data["error"]) {
// errors back from server
$("#modalGroupAlert" ).removeClass('alert-info');
$("#modalGroupAlert" ).addClass('alert-danger');
$("#modalGroupAlert span" ).replaceWith( data["html"] );
$("#modalGroupAlert" ).toggleClass( "hidden", "visible" );
} else {
// no errors
table.row.add(data["row"]).draw();
$('#groupModal').modal('hide');
}
});
}
});
});
}
困扰我的是ADD GROUP工具点击事件正确处理Ajax请求用html填充modal，然后正确请求json数据一次创建完成。
但使用类似的代码，Ajax 编辑请求也是用 html 表单填充模型，但一旦更新，返回的数据是未定义的。更新OK，子数据设置正确，Ajax请求也成功，但是没有返回数据。只有 xor 对象。
更新 1 =========
我将 ajax:success 参数（错误）更新为
$("#edit_group").on("ajax:success", function(e, data, _status, xor){..}
并检查了 xor 对象...返回码是 204 ，这意味着 NO CONTENT .. 为什么 Rails 4 PATCH 更新响应 204 ???
xhr: {
"readyState": 4,
"responseText": "",
"status": 204,
"statusText": "No Content"
}
【问题讨论】：
-
我想知道这不是与编辑表单方法有关的问题...我会检查它，说明一个方法：PUT
标签： jquery ruby-on-rails ajax ruby-on-rails-4