I have a table with data and I want to make crud from it to the DB using a modal. I tried to do it through VUE and it does not do anything, so I wrote js code, directly in a file and I make the call but nothing happens either. blade
@extends ('pagina_int_base')
@section('content_base')
<div>
<div id="crud" class="row">
<div class="col-xs-12">
<h1> Listados</h1>
</div>
</div>
<div class="col-xs-12">
<a href="#" class="btn btn-primary pull-right" id="btn_add" data-toggle="modal" data-target="#ventModal"> Crear</a>
<table id="tabla-listado" class="table table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Matricula</th>
<th>Tipo</th>
<th>Marca</th>
<th>Modelo</th>
<th>Capacidad</th>
<th>Fabricacion</th>
<th>Color</th>
<th>Estado</th>
<th>Editar</th>
<th>Borrar</th>
<th colspan="2"> </th>
</tr>
</thead>
<tbody id="vehiculos-list" name="vehiculos-list">
<tr >@foreach($vehiculo as $veh)
<td width="100px">{{ $veh->id}}</td>
<td width="100px">{{ $veh->matricula}}</td>
<td width="100px">{{ $veh->tipo}}</td>
<td width="100px">{{ $veh->marca}}</td>
<td width="100px">{{ $veh->modelo}}</td>
<td width="100px">{{ $veh->capacidad_carga}}</td>
<td width="100px">{{ $veh->año_fabricacion}}</td>
<td width="100px">{{ $veh->color}}</td>
<td width="100px">{{ $veh->estado}}</td>
<td width="10px" ><button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#ventModal">Editar</button></td>
<td width="10px"><a href="#"{{ $veh->id }}" class="btn btn-danger btn-sm">Borrar</a> </td>
</tr>@endforeach
</tbody>
</table>
<!--comienzo de ventana modal-->
<div class="modal fade" id="ventModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Vehiculos</h4>
</div>
<div class="modal-body">
<form id="formmodal" name="formmodal" class="form-horizontal" novalidate="">
<div class="form-group error">
<label for="inputName" class="col-sm-3 control-label">Matricula</label>
<div class="col-sm-6">
<input type="text" class="form-control has-error" id="matricula" name="matricula" placeholder="Matricula" value="">
</div>
</div>
<div class="form-group">
<label for="inputDetail" class="col-sm-3 control-label">Tipo</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="marca" name="marca" placeholder="Marca" value="">
</div>
</div>
<div class="form-group">
<label for="inputDetail" class="col-sm-3 control-label">Marca</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="marca" name="marca" placeholder="Marca" value="">
</div>
</div>
<div class="form-group">
<label for="inputDetail" class="col-sm-3 control-label">Modelo</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="modelo" name="modelo" placeholder="Modelo" value="">
</div>
</div>
<div class="form-group">
<label for="inputDetail" class="col-sm-3 control-label">Capacidad</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="capacidad" name="capacidad" placeholder="Capacidad" value="">
</div>
</div>
<div class="form-group">
<label for="inputDetail" class="col-sm-3 control-label">Fabricado</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="fabricado" name="fabricado" placeholder="Fecha" value="">
</div>
</div>
<div class="form-group">
<label for="inputDetail" class="col-sm-3 control-label">Color</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="color" name="color" placeholder="Color" value="">
</div>
</div>
<div class="form-group">
<label for="inputDetail" class="col-sm-3 control-label">Estado</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="estado" name="estado" placeholder="Estado" value="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" >Cerrar</button>
<button type="button" class="btn btn-primary" id="btn-save" value="add">Guardar</button>
</div>
</div>
</div>
</div>
<!--final de ventana modal-->
@endsection
<meta name="_token" content="{!! csrf_token() !!}" />
<script src="assets/app.js/"></script>
<script src="js/app.js/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script src="{{asset('js/crudvehic.js')}}"></script>-->
<script src="js/crudvehic.js"></script>
crudevehic.js
var url = "http://localhost:3306/logismart/gestionarvehiculos";
// muestra el formulario modal para la edición del producto
$(document).on('click', '.ventModal', function () {
var veh_id = $(this).val();
$.get(url + '/' + veh_id, function (data) {
//success data
console.log(data);
$('#veh_id').val(data.id);
$('#matricula').val(data.matricula);
$('#tipo').val(data.tipo);
$('#marca').val(data.marca);
$('#modelo').val(data.modelo);
$('#capacidad').val(data.capacidad_carga);
$('#fabricado').val(data.fecha_fabricacion);
$('#color').val(data.color);
$('#estado').val(data.estado);
$('#btn-save').val("update");
$('#myModalLabel').modal('show');
})
});
// muestra el formulario modal para crear un nuevo vehiculo
$('#btn_add').click(function () {
$('#btn-save').val("add");
$('#formmodal').trigger("reset");
$('#myModalLabel').modal('show');
});
// eliminar el vehiculo y eliminarlo de la lista
$(document).on('click', '.delete-vehiculo', function () {
var veh_id = $(this).val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
$.ajax({
type: "DELETE",
url: url + '/' + veh_id,
success: function (data) {
console.log(data);
$("#vehiculo" + veh_id).remove();
},
error: function (data) {
console.log('Error:', data);
}
});
});
// crear nuevo vehiculo / actualizar uno existente
$("#btn-save").click(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
e.preventDefault();
var formData = {
matricula: $('#matricula').val(),
tipo: $('#tipo').val(),
marca: $('#marca').val(),
modelo: $('#modelo').val(),
capacidad: $('#capacidad').val(),
fabricado: $('#fabricado').val(),
color: $('#color').val(),
estado: $('#estado').val(),
}
// utilizado para determinar el metodo http que se va a utilizar [add = POST], [update = PUT]
var state = $('#btn-save').val();
var type = "POST"; // para crear un nuevo vehiculo
var veh_id = $('#vehiculo_id').val();;
var my_url = url;
if (state == "update") {
type = "PUT"; // para actualizar recursos existentes
my_url += '/' + veh_id;
}
console.log(formData);
$.ajax({
type: type,
url: my_url,
data: formData,
dataType: 'json',
success: function (data) {
console.log(data);
var vehiculo = '<tr id="vehiculo' + data.id +'"><td>' + data.id + '</td><td>' + data.matricula + '</td><td>' + data.tipo + '</td><td>' + data.marca + '</td><td>' + data.modelo + '</td><td>' + data.capacidad + '</td><td>' + data.fabricado + '</td><td>' + data.color + '</td><td>' + data.estado + '</td> ';
vehiculo += '<td><button class="btn btn-warning btn-detail open_modal" value="' + data.id + '">Editar</button>';
vehiculo += ' <button class="btn btn-danger btn-delete delete-producto" value="' + data.id + '">Eliminar</button></td></tr>';
if (state == "add") { // para actualizar recursos existentes...
$('#vehiculos-list').append(vehiculo);
} else { // si el usuario actualiza un registro existente
$("#vehiculo" + vehiculo_id).replaceWith(vehiculo);
}
$('#formmodal').trigger("reset");
$('#myModalLabel').modal('hide')
},
error: function (data) {
console.log('Error:', data);
}
});
});
controller
public function index()
{
$vehiculo = Vehiculo::all();
return view('gestionarvehiculos', compact('vehiculo'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create(Request $request)
{
$vehiculo = Vehiculo::create($request->input());
return response()->json($vehiculo);//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$vehiculo = App\Vehiculo::findOrFail($id);
$vehiculo->matricula = $request->matricula;
$vehiculo->tipo = $request->tipo;
$vehiculo->marca = $request->nombre;
$vehiculo->modelo = $request->descripcion;
$vehiculo->capacidad = $request->capacidad_carga;
$vehiculo->fabricado = $request->fecha_fabricacion;
$vehiculo->color = $request->color;
$vehiculo->estado = $request->estado;
$vehiculo->save();
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$vehiculo = Vehiculo::findOrFail($id);
return response()->json($vehiculo);
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$vehiculo = Vehiculo::findOrFail($id);
return $vehiculo; o
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$vehiculo = App\Vehiculo::findOrFail($id);
$vehiculo->matricula = $request->matricula;
$vehiculo->tipo = $request->tipo;
$vehiculo->marca = $request->nombre;
$vehiculo->modelo = $request->descripcion;
$vehiculo->capacidad = $request->capacidad_carga;
$vehiculo->fabricado = $request->fecha_fabricacion;
$vehiculo->color = $request->color;
$vehiculo->estado = $request->estado;
$vehiculo->save();
return response()->json($producto);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$vehiculos = Vehiculo::findOrFail($id);
$vehiculos->delete($id);
return view('gestionarvehiculo');
}
}