1

Estoy intentando crear un modal que registre a una persona con su número de celular, lo quiero hacer con Ajax para que no me recargue la página ya que mas adelante habrá un select que se alimentará en simultáneo con la info de la base de datos.

Esto es lo que tengo:

Ruta

Route::post('turnos/addDeliveryModal', [App\Http\Controllers\TurnoController::class, 'addDeliveryModal'])->name('turnos.addDeliveryModal');

Controlador

public function addDeliveryModal(Request $request){
    $delivery = New Delivery();

    $delivery->nombDelivery = $request->nombDelivery;
    $delivery->celDelivery = $request->celDelivery;

    $delivery->save();

    return response()->json($delivery);
}

Formulario modal

<form method="POST" id="addDeliveryModal">
                    @csrf                
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-control-label">Nombre del Delivery</label>
                            <input type="text" name="nombDelivery" class="form-control form-control-alternative" required>                    
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Telefono o Celular</label>
                            <input type="text" name="celDelivery" class="form-control form-control-alternative" required>                    
                        </div>
                    </div>            
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">Guardar</button>
                        <button type="button" class="btn btn-danger  ml-auto" data-dismiss="modal">Cerrar</button>
                    </div>  
                </form> 

Ajax

$("#addDeliveryModal").submit(function(e){
        e.preventDefault();

        let nombDelivery = $("#nombDelivery").val();
        let celDelivery = $("#celDelivery").val();
        let _token = $("input[name=_token]").val();

        $.ajax({
            url: "{{route('turnos.addDeliveryModal')}}",
            type: "POST",
            data:{
                nombDelivery:nombDelivery,
                celDelivery:celDelivery,
                _token:_token
            },
            success:function(response)
            {
                if(response){
                    console.log("hola");
                }else{
                    console.log("hola2");
                }
            }
        });
    });

Screenshot del Formulario introducir la descripción de la imagen aquí

Screenshot del error que me bota

introducir la descripción de la imagen aquí

El error claramente me dice que no esta registrada con el metodo POST, cuando si lo esta, ya recargue las rutas y el problema persiste Espero puedan hecharme una mano.

2 respuestas 2

3

tengo varios puntos que te marcaría (siempre para aprender).

Si tu página se está actualizando es probable que el submit se esté realizando sobre un action inexistente. Es decir, se está enviando un post a la misma url. Te recomiendo que pruebes agregando:

<form action="#" ...>

Si eso funciona significa que tu código de javascript que intercepta el formulario, está retornando un valor true. Podés cancelar al final de tu función javascript haciendo esto:

return false;

Algunas recomendaciones:

En laravel existen métodos que facilitan la creación de los objetos. Te recomiendo que leas esta documentación. Podés generar tu función de un modo mucho más legible.

public function addDeliveryModal(Request $request)
{
    $delivery = Delivery::create([
        'nombDelivery' => $request->nombDelivery;
        'celDelivery' => $request->celDelivery;
    ]);

    return response()->json($delivery);
}

Te recomiendo que a tus funciones de creación con datos que ingresa el usuario sean siempre validadas. Debés controlar y mostrar los errores si el usuario intenta escribir una cadena de texto de 5000 caracteres en un campo que permite 100 (por ejemplo).

public function addDeliveryModal(Request $request)
{
    $validated = $request->validate([
        'nombDelivery' => 'required|max:255',
        'celDelivery' => 'required|numeric',
    ]);
    // ...
}

Si entrás en el modo de desarrollador de tu browser, y elegís la pestaña "network" podrás tener más información acerca de tus llamadas vía ajax. Quizás ahí encuentres muchos de tus errores (esto era lo que te iba a pedir pero dada la foto veo que el formulario se está enviando normal más allá del ajax).

Imagen de la pestaña network

1
  • Tenias muchas razon querido amigo! Muchas Gracias por tu apoyo
    – KaoX
    Commented el 11 may. 2021 a las 10:11
0

Es muy probable que aunque en tu archivo de rutas lo tienes definido de esta manera:

Route::post('turnos/addDeliveryModal', [App\Http\Controllers\TurnoController::class, 'addDeliveryModal'])->name('turnos.addDeliveryModal');

Laravel espere una estructura diferente.

Una forma de validar como está esperando la ruta de lado de Laravel es utilizando el comando:

php artisan route:list

Aquí puedes revisar algunos ejemplos de uso. Uso de route list command

También podrías cambiar la forma de construir tu ruta post en el archivo de rutas:

Route::get('turnos/addDeliveryModal', 'TurnoController@addDeliveryModal')->name('turnos.addDeliveryModal');

Aquí la doc de Laravel especifica el uso de rutas. introducir la descripción del enlace aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.