Reloading DataTables AJAX with Laravel

Question

UPDATED

The idea is so that when the modal opens to create or edit a user, the validation is made and once you click submit, it'll hide the modal and refresh the datattable already on the page, which is using jquery datattabes.net. The problem is after clicking submit, nothing happens.

Here's the info I've been using to guide myself:

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>

And the view

@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

If you are using Laravel package Yajra DataTable (https://github.com/yajra/laravel-datatables),

window.LaravelDataTables["user-table"].ajax.reload();

I hope this will helpful someone.