0

Tengo un pequeño formulario para registrar comentarios en una BBDD. Me gustaria poder hacerlo con Ajax pero no lo consigo ya que siempre me devuelve el error 405 "Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException No message".

A ver si podéis ayudarme, gracias de antemano!

blade file:

<form action="" method="POST" id="addCommentForm">
                            @csrf
                            <input type="hidden" id="user_id" name="user_id" value="{{Auth::user()->id}}" />
                            <input type="hidden" id="image_id" name="image_id" value="{{$image->id}}" />
                            <input type="hidden" id="token" name="_token" value="{{csrf_token()}}" />
                            <input type="text" id="commentcontent" name="commentcontent" placeholder="{{__('messages.DoComment')}}" required />
                        </form>

El código de Javascript está dentro del mismo blade

<script type="text/javascript">
    function cleanfields(){
        $("#user_id").val('');
        $("#image_id").val('');
        $("#commentcontent").val('');
    }

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#addCommentForm').submit(function(e){
        e.preventDefault();

        var user_id = $("input[name=user_id]").val();
        var image_id = $("input[name=image_id]").val();
        var CSRF_TOKEN = $ ('meta [nombre = "csrf-token"]'). attr ('contenido');
        var commentcontent = $("input[name=commentcontent]").val();
        
        
        $.ajax({
            type  :"POST",
            url     :"{{route('comment.add')}}",
            dataType:"json",
            data    :{ _token:CSRF_TOKEN, _method:'POST', user_id:user_id, image_id:image_id, commentcontent:commentcontent },
            success :function(response){
            alert("thank u");
            },
            error: function (error) {//add this also so you can get error if uccers
                 console.log(error);
            }
        });
    });
</script>

web.php: La ruta es la siguiente

Route::post('/comment-add', 'CommentController@add')->name('comment.add');

Controller: El metodo del Controller es el siguiente

public function add(Request $request) {
    $user_id = $request->input('user_id');
    $image_id = $request->input('image_id');
    $commentcontent = $request->input('commentcontent');
    
    $comment = new Comment();
    
    $comment->user_id = $user_id;
    $comment->image_id = $image_id;
    $comment->content = $commentcontent;
    
    $comment->save();
 
    return back();
}

Head layout:

    <meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('js/app.js') }}" defer></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
2
  • En el ajax a tu ruta no la deberias llamar: url ` :"{{route('/comment-add')}}"`, como la tienes declarada en el web.php? Commented el 2 sept. 2020 a las 20:54
  • Hola @LuisAlfredoSerranoDíaz, aunque lo he probado no hace falta, ya que el código del ajax no está en un .js separado y por tanto se puede poner la url por la propiedad "name". Gracias!
    – a.libori
    Commented el 3 sept. 2020 a las 5:59

1 respuesta 1

0

Finalmente he logrado que funcione. Expongo aqui los cambios.

El código javascript del archivo blade lo he pasado arriba en vez de abajo quedando finalmente así:

function afegir(image_id){
        event.preventDefault();
        
        
        var user_id = $("#user_id"+image_id).val();
        var image_id = $("#image_id"+image_id).val();
        var method = $("input[name=_method]").val();
        var CSRF_TOKEN = $ ('meta [nombre = "csrf-token"]'). attr ('contenido');
        var commentcontent = $("#commentcontent"+image_id).val();
        
        if(commentcontent == (null || "")){
        }else{
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') },
                type  :"POST",
                url     :"{{route('comment.add')}}",
                dataType:"html",
                cache:false,
                data    :{ 
                    _token:CSRF_TOKEN,
                    _method:method,
                    user_id:user_id,
                    image_id:image_id, 
                    commentcontent:commentcontent
                },
                success :function(response){
                    $("#comments"+image_id).load(" #comments"+image_id);
                    cleanfields(image_id);
                },
                error: function (error) {//add this also so you can get error if uccers
                     console.log(error);
                }
            });
        }
    }

El método del Controller queda así:

public function add(Request $request) {
    
    $user_id = $request->input('user_id');
    $image_id = $request->input('image_id');
    $commentcontent = $request->input('commentcontent');
    
    
    
    $comment = new Comment();
    
    $comment->user_id = $user_id;
    $comment->image_id = $image_id;
    $comment->content = $commentcontent;
    
    $comment->save();
 
    return response('ok');
}

Y, finalmente, el formulario del archivo blade, así:

<form onsubmit="afegir({{$image->id}})" class="form-horizontal" method="POST" id="addCommentForm{{$image->id}}">
                            {{ csrf_field() }}

                            <div class="form-group">
                                <div class="col-md-6">
                                    <input type="hidden" id="user_id{{$image->id}}" name="user_id" value="{{Auth::user()->id}}" />
                                    <input type="hidden" id="image_id{{$image->id}}" name="image_id" value="{{$image->id}}" />
                                    <input id="commentcontent{{$image->id}}" type="text" class="form-control" name="commentcontent{{$image->id}}" placeholder="{{__('messages.DoComment')}}" />
                                </div>
                            </div>
                        </form>

Espero que pueda ser de ayuda en algún momento ;)

Saludos!

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.