我发送$.ajax()
编辑/更新请求以编辑群组记录,该记录应呈现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填充模态,然后正确请求json数据一次创造已经完成。
但是使用类似的代码, Ajax 编辑请求也填充了html表单的模型,但是一旦更新,数据就会被取消定义。更新正常,子数据正确设置, Ajax 请求也成功,但没有数据返回。只有xor对象。
更新1 =========
我将ajax:success parameters(他们错了)更新为
$("#edit_group").on("ajax:success", function(e, data, _status, xor){..}
并检查xor对象...返回码为204,表示无内容.. 为什么Rails 4 PATCH更新响应204 ???
xhr: {
"readyState": 4,
"responseText": "",
"status": 204,
"statusText": "No Content"
}
答案 0 :(得分:0)
找到答案:这是一个有更新的NORMAL BEHAVIOr,客户端不应该接收状态204的任何其他内容。 但是,我可以通过写下来绕过它:
render(json: @data.to_json , status: 200)
强制状态为200并且子数据被送回