Rails4:Ajax.request(编辑)不返回数据

时间:2015-11-01 23:04:51

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

我发送$.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"
}

1 个答案:

答案 0 :(得分:0)

找到答案:这是一个有更新的NORMAL BEHAVIOr,客户端不应该接收状态204的任何其他内容。 但是,我可以通过写下来绕过它:

render(json: @data.to_json , status: 200)

强制状态为200并且子数据被送回