I want to implement this view, where only a few fields are loaded, out of many... with the "Asignar" button I extract the data I need to fill in the fields of the form on the right... the issue is that when change the data and hit "Enviar IP" to update, for some reason I get the error "The GET method is not supported for this route. Supported methods: POST." But this route is configured as POST.
script from index.blade view
function updateData(){
var id = $('#id').val();
var estado = $('#estado').val();
var modalidad = $('#modalidad').val();
var inspector = $('#inspector').val();
var lugar = $('#lugar').val();
$.ajax({
type: "post",
dataType: "json",
data: {estado:estado, modalidad:modalidad, inspector:inspector, lugar:lugar},
url: "/inspecciones/update/" id,
success: function(data){
console.log('pericia asignada');
}
})
}
controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Siniestro;
use App\Models\User;
class InspeccionController extends Controller
{
public function index()
{
$users = User::all();
$data = Siniestro::all();
return view('inspecciones.index', compact('users','data'));
}
public function allData()
{
$data = Siniestro::orderBy('id', 'DESC')->get();
return response()->json($data);
}
public function editData($id)
{
$data = Siniestro::findOrFail($id);
return response()->json($data);
}
public function updateData(Request $request)
{
$data = Siniestro::findOrFail($id)->update([
"inspector" => $request->siniestro,
"estado" => $request->estado,
"modalidad" => $request->modalidad,
"lugar" => $request->lugar,
]);
return response()->json($data);
}
}
web.php - Route
Route::POST('/inspecciones/update/{id}', [InspeccionController::class, 'updateData']);
Here is mi HTML
@extends('layouts.app')
@section('content')
<section >
<div >
<h3 >Derivar IP</h3>
</div>
<div >
<div >
<div >
<div >
<div >
Inspecciones coordinadas
</div>
<div >
<table style="width:100%">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Siniestro</th>
<th scope="col">Fecha IP</th>
<th scope="col">Estado</th>
<th scope="col">Modalidad</th>
<th scope="col">Dirección</th>
<th scope="col">Localidad</th>
<th scope="col">Inspector</th>
<th scope="col">Lugar</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div >
<div >
<div >
<span id="asignarT">Asignar a perito</span>
<span id="enviarT">Enviar IP</span>
</div>
<div >
<div >
<div >
<label for="siniestro">Siniestro</label>
<input type="text" name="siniestro" id="siniestro" for="siniestro" >
</div>
</div>
<div >
<label for="">Perito</label>
<select aria-label="Default select example" id="inspector"´for="inspector" name="inspector"">
<option selected value="">--seleccionar--</option>
@foreach ($users as $user)
<option value="{{ $user->id}}">{{ $user->name }}</option>
@endforeach
</select>
</div>
<div >
<label for="estado">Estado</label>
<select aria-label="Default select example" id="estado" for="estado" name="estado">
<option selected></option>
<option value="Coordinado">Coordinado</option>
<option value="Ausente">Ausente</option>
<option value="Peritando">Derivado a inspector</option>
<option value="Baja">Baja</option>
</select>
</div>
<div >
<div >
<label for="fechaip">Fecha de IP</label>
<input type="text" id="fechaip" for="fechaip" name="fechaip">
</div>
</div>
<div >
<div >
<label for="direccion">Direccion</label>
<input type="text" id="direccion" for="direccion" name="direccion">
</div>
</div>
<div >
<div >
<label for="localidad">Localidad</label>
<input type="text" name="localidad" id="localidad" for="localidad" name="localidad">
</div>
</div>
<div >
<label for="modalidad">Tipo de inspeccion</label>
<select aria-label="Default select example" id="modalidad" for="modalidad" name="modalidad">
<option selected></option>
<option value="presencial">Presencial</option>
<option value="videollamada">Videollamada</option>
<option value="foto y presupuesto">Por foto y presupuesto</option>
<option value="foto">Por foto</option>
</select>
</div>
<div >
<label for="lugar">Lugar de inspección</label>
<select aria-label="Default select example" id="lugar" for="lugar" name="lugar">
<option selected></option>
<option value="TH">Taller homologado</option>
<option value="Taller del asegurado">Taller del asegurado</option>
<option value="Domicilio particular">Domicilio particular</option>
</select>
</div>
<input type="hidden" id="id">
<button type="submit" id="asignarButton" >Asignar a perito</button>
<button type="submit" id="enviarButton" onclick="updateData()" >Enviar IP</button>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
CodePudding user response：
Try using type="button" or prevent the default action
<button type="button" id="enviarButton" onclick="updateData()" >Enviar IP</button>
OR
<button type="submit" id="enviarButton" onclick="updateData(event)" >Enviar IP</button>
and in updateData(event) function
//accept the event as parameter
function updateData(event){
//prevent the default action
event.preventDefault();
var id = $('#id').val();
var estado = $('#estado').val();
var modalidad = $('#modalidad').val();
var inspector = $('#inspector').val();
var lugar = $('#lugar').val();
$.ajax({
type: "post",
dataType: "json",
data: {estado:estado, modalidad:modalidad, inspector:inspector, lugar:lugar},
url: "/inspecciones/update/" id,
success: function(data){
console.log('pericia asignada');
}
})
}