2014-10-20 12 views
1

ОБНОВЛЕНОПерегрузочные DataTables AJAX с Laravel

Идея настолько, что, когда модальный открывает для создания или редактирования пользователя, проверка производится и после нажатия на кнопку отправить, он будет скрывать модальные и освежить datattable уже на странице, которая использует jquery datattabes.net. Проблема заключается в том, что после нажатия кнопки «Отправить» ничего не происходит.

Вот информация я использую, чтобы вести себя:

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

http://bootstrapvalidator.com/examples/ajax-submit/

<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 
+0

Любые сообщения об ошибках? Какие проблемы вы испытываете? – PeterKA

+0

Таблица AJAX не перезагружается, и я не смог скрыть модальность. –

ответ

2

Замените следующие строки, как показано ниже , Вам не нужно запускать событие 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.

Update:

Спасибо за предоставить больше кода, которые дают гораздо лучший контекст этого вопроса вы имеете. Есть несколько моментов, которые я хотел бы поднять.

  1. причина ваш модальный обыкновение близко, вы используете повторяющиеся идентификаторы. Как бы jquery узнать, какой #user-modal вы хотите настроить? Вместо этого используйте класс. В вашем @foreach используйте код class="user-modal" вместо id="user-modal"; то же самое касается любых других идентификаторов в этом блоке. Вы можете получить правильный модальный код в обработчике submit, используя $(this).closest('.user-modal') или $(e.target).closest('.user-modal').
  2. Не важно, но в Laravel 4 Вам не нужно {{ Form::token() }}, так как это называется автоматически через {{ Form::open(....) }}.
+0

По какой-то причине он по-прежнему не обновляется. –

+0

Не обновляет таблицу пользовательского интерфейса или таблицу БД? Вы должны уметь скрыть модальную форму, вызывая '$ ('modal-selector'). Modal ('hide');'. – PeterKA

+0

По какой-то причине после нажатия submit на форме (которая находится внутри модальной), она обновляет таблицу, если проверка проходит, но она не будет скрывать модальную или обновлять datatable с помощью ajax. Код, который я запускаю, тот, который я только что обновил на главной странице, гораздо более организован. –

0

Требуется сообщить тем, кто использует валидатор Bootstrap, чтобы обновить таблицу Ajax после нажатия кнопки отправки, необходимо использовать следующий код, который неправильно указан в документации.

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

A.api() требуется для того, чтобы он работал, как я изначально упомянул.

Смежные вопросы