重装数据表AJAX与Laravel

Question

修订

的想法是这样，当模式打开创建或编辑用户，确认是由，一旦你点击提交，它会隐藏模式，并刷新datattable已经在页面上，这是使用jquery datattabes.net。问题是点击提交后，没有任何反应。

这是我一直在使用，以指导自己的信息：

http://datatables.net/reference/api/ajax.reload()

​​

<script> 

$(document).ready(function() { 

var oTable = $('#dataTable-users').dataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": "{{ URL::to('usuarios.tabla') }}" 
}) 

$('.editUser') 
    .bootstrapValidator({ 
     excluded: [':disabled', ':hidden', ':not(:visible)'], 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      first_name: { 
       validators: { 
        notEmpty: { 
         message: 'El nombre es obligatorio y no puede quedar vacio.' 
        }, 
        stringLength: { 
         min: 3, 
         max: 100, 
         message: 'El nombre no puede tener menos de 3 letras.' 
        }, 
        regexp: { 
         regexp: /^[a-zA-Z]+$/, 
         message: 'El nombre solo puede contener letras y espacios.' 
        } 
       } 
      }, 

      last_name: { 
       validators: { 
        notEmpty: { 
         message: 'El apellido es obligatorio y no puede quedar vacio.' 
        }, 
        stringLength: { 
         min: 3, 
         max: 100, 
         message: 'El apellido no puede tener menos de 3 letras.' 
        }, 
        regexp: { 
         regexp: /^[a-zA-Z]+$/, 
         message: 'El apellido solo puede contener letras y espacios.' 
        } 
       } 
      }, 

      email: { 
       validators: { 
        notEmpty: { 
         message: 'El email es obligatorio y no puede quedar vacio.' 
        }, 
        emailAddress: { 
         message: 'La información ingresada no corresponde a un email.' 
        } 
       } 
      } 
     } 
    }) 
    .on('success.form.bv', function(e) { 
     // Prevent form submission 
     e.preventDefault(); 

     var $form = $(e.target),      // The form instance 
      bv = $form.data('bootstrapValidator'); // BootstrapValidator instance 

     // Use Ajax to submit form data 
     $.post($form.attr('action'), $form.serialize(), function(result) { 
      $('#user-modal').modal("hide"); 
      oTable.ajax.url('http://localhost:8888/adp/usuarios.tabla').load(); 
     }); 
    }); 
}); 
</script> 

和视图

@foreach($users as $key => $value) 
<div class="modal fade edit-user-modal{{ $value->id }} user-modal" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" > 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title">Editando usuario <strong>{{ $value->username }}</strong></h4> 
      </div> 
      <div class="modal-body"> 

       {{ Form::model($value, array('route' => array('usuarios.update', $value->id), 'class' => 'editUser', 'method' => 'PUT')) }} 

       <div class="form-group"> 
        {{ Form::label('password', 'Contraseña') }} 
        {{ Form::password('password', array('class' => 'form-control')) }} 
       </div> 

       <div class="form-group"> 
        {{ Form::label('first_name', 'Nombres') }} 
        {{ Form::text('first_name', Input::old('first_name'), array('class' => 'form-control')) }} 
       </div> 

       <div class="form-group"> 
        {{ Form::label('last_name', 'Apellidos') }} 
        {{ Form::text('last_name', Input::old('last_name'), array('class' => 'form-control')) }} 
       </div> 

       <div class="form-group"> 
        {{ Form::label('email', 'Email') }} 
        {{ Form::text('email', Input::old('email'), array('class' => 'form-control')) }} 
       </div> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> 
       &nbsp; 
       {{ Form::token() }} 
       {{ Form::submit('Editar usuario', array('class' => 'btn btn-primary')) }} 
       {{ Form::close() }} 
      </div> 
     </div> 
    </div> 
</div> 

@endforeach 

Answer 1

的以下行，如下所示。您不需要触发submit事件 - 它已经发生 - 并且您不需要submit该表格 - 这就是$.post()的意思。而且由于你在原始配置中没有ajax UUR，你需要指定一个。

form.submit(); // PLUS 'form' is not defined. 
    oTable.ajax.reload(); 

新代码：

oTable.ajax.url('url-to-updated-json-data').load(); 

注：既然你不使用任何地方result，你不在乎所返回的东西;因此您不需要设置json dataType。

更新：

感谢提供更多的代码，让你所遇到的问题的一个更好的环境。我想提出几点。

1. 该原因你的模态不会关闭是，你使用重复ID。 jquery如何知道你想要定位哪个#user-modal？改为使用班级。在您的@foreach代码中使用class="user-modal"而不是id="user-modal";该块中的任何其他ID也一样。您可以使用$(this).closest('.user-modal')或$(e.target).closest('.user-modal')来抓取submit处理程序中正确的模态。
2. 不重要，但在Laravel 4您不需要{{ Form::token() }}，因为它通过{{ Form::open(....) }}自动调用。

Answer 2

想让知道那些使用Bootstrap验证程序的用户在单击提交按钮后刷新Ajax表时必须使用以下代码，这在文档中没有正确提及。

oTable.api().ajax.reload(); 

.api（）是必需的，才能像我最初提到的那样工作。