how to pass data by ajax with laravel?

0

I have to update the status of the vehicles that are in a table, so far I have updated the status but what is not is how to send the data to my table but without reloading the entire page ie with ajax I leave my code thanks

AJAX:

function ActualizarEstadoAuto() {

    var form = $("#form-estado");
    var url =  form.attr('action').replace('id',$("#idauto").val());


    var data = form.serialize();
  var rows ='';
    $.post(url,data,function (key,value) {
        alert("EL VEHICULO CAMBIO DE ESTADO !");
        $("#estadoAuto").modal('hide');
        rows = rows + '<tr>';
        rows = rows + '<td>'+value.modelo+'</td>';
        rows = rows + '<td>'+value.categoria+'</td>';
        rows = rows + '<td>'+value.version+'</td>';
        rows = rows + '<td>'+value.precio_real_soles+'</td>';
        rows = rows + '<td>'+value.precio_real_dolares+'</td>';
        rows = rows + '<td>'+value.estado+'</td>';
        rows = rows + '</tr>';
    });

    $(

"tbody").html(rows);
}

ROUTE:

Route::post('ActualizarEstadoAuto/{cod}', 'AutoController@ActualizarEstadoAuto')->name('auto.ActualizarEstadoAuto');

Controller:

public function ActualizarEstadoAuto(Request $request){

        $auto = Auto::Find($request->cod);

        $auto->estado = $request->estadoAutoselect;

        $auto->save();


        return response()->json(
            [
                'modelo'=>$auto->modelo->nombre,
                'categoria'=>$auto->categoria->nombre,
                'version' =>$auto->version,
                'precio_real_soles' =>$auto->precio_soles,
                'precio_real_dolares'=>$auto->precio_dolares,
                'estado' =>$auto->estado

            ]
        );
    }

TABLE AND MODAL

@extends('layouts.home')
@section('content')
    @include('partials.alert')
    <div class="row">
        <div class="col-md-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Lista de autos</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">Config option 1</a>
                            </li>
                            <li><a href="#">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Modelo</th>
                            <th>Categoria</th>
                            <th>Version</th>
                            <th>Precio real en soles</th>
                            <th>Precio real en dolares</th>
                            <th>Estado</th>
                          <!--  <th>Imagen principal</th>
                            <th>Caracteristicas</th>
                            -->
                            <th>Acciones</th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php $i=1 ?>
                        @foreach($autos as $auto)
                            <tr>
                                <td>{{$i}}</td>
                                <td>{{$auto->Modelo->nombre}}</td>
                                <td>{{$auto->categoria->nombre}}</td>
                                <td>{{$auto->version}}</td>
                                <td>{{ 'S/ '.$auto->precio_soles}}</td>
                                <td>{{ '$/ '.$auto->precio_dolares}}</td>
                                <td>{{$auto->estado}}</td>

                                <!--<td><a href="#"><i class="fa fa-picture-o fa-2x" aria-hidden="true"></i></a></td>
                                <td><a href="#"><i class="fa fa-picture-o fa-2x" aria-hidden="true"></i></a></td>
                                   -->
                              <td>
                                  <a  href="{{URL::to('auto/ver')}}/{{$auto->idAutos}}" class="btn btn-outline btn-success"><i class="fa fa-eye"></i></a>

                                  <a  href="{{URL::to('auto/editar')}}/{{$auto->idAutos}}" class="btn btn-outline btn-primary"><i class="fa fa-pencil"></i></a>
                                   <button  class="btn btn-outline btn-default" onclick='cambiarEstadoAuto(<?=json_encode($auto->modelo->nombre)?>,<?=json_encode($auto->categoria->nombre)?>,<?=json_encode($auto->idAutos)?>,<?=json_encode($auto->estado)?>)' > <i class="fa fa-exchange"></i></button>

                              </td>
                            </tr>
                            <?php $i++ ?>
                        @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div>

    </div>
    @include('modals.modalEstadoAuto')
@endsection





<div class="modal fade" id="estadoAuto" tabindex="-1" role="dialog" aria-labelledby="estadoAuto" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12 b-r"><h3 class="m-t-none m-b">CAMBIAR ESTADO DEL VEHICULO</h3>

                        <div class="hr-line-dashed"></div>

                        {!! Form::open(['method' => 'POST','route' => ['auto.ActualizarEstadoAuto','id'], 'files' => true,'id'=>'form-estado']) !!}

                        <input type="hidden" id="idauto" name="idauto">
                        <div class="col-md-4 form-group"><label>Categoria</label> <input type="text" id="categoria" name="categoria" class="form-control" readonly></div>
                        <div class="col-md-4 form-group"><label>Modelo</label> <input type="text" id="modelo" name="modelo" class="form-control" readonly></div>
                        <div class="col-md-4 form-group"><label>Estado</label> <input type="text" id="estado" name="estado" class="form-control" readonly></div>

                        <div class="form-group"><label>Elija un estado</label>
                            <select onchange="mostrarprecios();" id="estadoAutoselect" name="estadoAutoselect" class="form-control">
                                <option value="" disabled>::Estados::</option>
                                <option value="2">PROMOCION</option>
                                <option value="1">NORMAL</option>
                                <option value="0">DESACTIVADO</option>
                            </select></div>

                        <div class="form-group" id="precio_so" style="display: none;"><label>Precio de descuento soles</label> <input type="text" id="precio_soles" name="precio_soles" class="form-control"></div>
                        <div class="form-group" id="precio_do" style="display: none;"><label>Precio de descuento dolares</label> <input type="text" id="precio_dolares" name="precio_dolares" class="form-control"></div>



                        {!! Form::close() !!}

                    </div>
                    <div>
                        <button onclick="ActualizarEstadoAuto();" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>REGISTRAR</strong></button>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
    
asked by ingswsm 02.01.2018 в 19:43
source

1 answer

0

Your tr cars should have a unique id and your status td a class to be able to replace it; example:

@foreach($autos as $auto)
    <tr>
        <td id='tr_auto_{{$auto->idAutos}}'>{{$i}}</td>
        <td>{{$auto->Modelo->nombre}}</td>
        <td>{{$auto->categoria->nombre}}</td>
        <td>{{$auto->version}}</td>
        <td>{{ 'S/ '.$auto->precio_soles}}</td>
        <td>{{ '$/ '.$auto->precio_dolares}}</td>
        <td class='td_auto_estado'>{{$auto->estado}}</td>
        ....
    </tr>   
@endforeach

in your controller you should also return the id of the car to be able to replace in the td state the new state of that car:

return response()->json(
            [
                'modelo'=>$auto->modelo->nombre,
                'categoria'=>$auto->categoria->nombre,
                'version' =>$auto->version,
                'precio_real_soles' =>$auto->precio_soles,
                'precio_real_dolares'=>$auto->precio_dolares,
                'estado' =>$auto->estado,
                'idAutos'=>$auto->idAutos

            ]
        );

your ajax would be like this:

$.post(url,data,function (value) {
        alert("EL VEHICULO CAMBIO DE ESTADO !");
        $("#estadoAuto").modal('hide');
        $('#tr_auto_'+value.idAutos).find('.td_auto_estado').text(value.estado);
    });
    
answered by 04.01.2018 в 00:55