Can't find the error in my route in Laravel with Ajax

Question

I'm using Laravel 5.6, and I have an error :

Whoops, looks like something went wrong. (1/1) MethodNotAllowedHttpException

and the following is my view (leads/show.blade.php):

<form method="post" id="student_form">
    {{csrf_field()}}
    <span id="form_output"></span>
    <div class="form-group">
        <label>Choose Group for Your Lead</label>
        <select name="group_id" id="group_id" class="form-control">
            @foreach($groups as $group)
                <option value="{{$group->id}}"> {{$group->name}}</option>
            @endforeach
       </select>
       <input type="hidden" name="customer_id" id="customer_id" value="{{$lead->id}}">
   </div>
   <div class="modal-footer">
       <input type="hidden" name="student_id" id="student_id" value="" />
       <input type="hidden" name="button_action" id="button_action" value="insert" />
       <input type="submit" name="submit" id="action" value="Add" class="btn btn-info" />
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</form>

Ajax request and response:

<script type="text/javascript">
           $(document).ready(function() {


               $('#student_form').on('submit', function(event){
                   event.preventDefault();
                   var form_data = $(this).serialize();
                   $.ajax({
                       url:"{{ route('leads.savegroup') }}",
                       method:"POST",
                       data:form_data,
                       dataType:"json",
                       success:function(data)
                       {
                           if(data.error.length > 0)
                           {
                               var error_html = '';
                               for(var count = 0; count < data.error.length; count++)
                               {
                                   error_html += '<div class="alert alert-danger">'+data.error[count]+'</div>';
                               }
                               $('#form_output').html(error_html);
                           }
                           else
                           {
                               $('#form_output').html(data.success);
                               $('#student_form')[0].reset();
                               $('#action').val('Add');
                               $('.modal-title').text('Add Data');
                               $('#button_action').val('insert');

                           }
                       }
                   })
               });

           });
       </script>

and the route is :

Route::post('leads/savegroup', 'LeadsController@savegroup')->name('leads.savegroup');

Please help me to find the error.

Just to be sure: have you checked through your browser's network console that the request is done using `POST`? — Nico Haase, Aug 09 '18 at 06:24
are you getting MethodNotAllowedHttpException error in new tab? You should check the exact error in developer tools network tab. — Erkan Özkök, Aug 09 '18 at 06:36
can you check Header information. which method u see? POST or else — Erkan Özkök, Aug 09 '18 at 06:40
open inspect element and check network tab. you will see there your ajax request. click on it and see what exactly result is. you can see request method in Header tab. and can preview response from ajax — Erkan Özkök, Aug 09 '18 at 06:46
hmm maybe your chrome extensions blocks this request. close ad blocker and try later. — Erkan Özkök, Aug 09 '18 at 07:05
Actually I tried to put action="{{ route('leads.savegroup') }}" from the FORM, and it is working well... so my problem in the route as well as i need to use ajax .. is it the right way I did to define the route ? — Abd AM, Aug 09 '18 at 07:06

score 0 · Answer 1 · answered Aug 09 '18 at 06:48

0

try

url:"{{ url('leads/savegroup') }}"

instead of :

url:"{{ route('leads.savegroup') }}"

maybe worked.

answered Aug 09 '18 at 06:48

Sina

41
1
5

score 0 · Answer 2 · answered Aug 09 '18 at 06:49

0

You need to setup ajax.setup:

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

and add in HTML this line:

<meta name="csrf-token" content="{{ csrf_token() }}">

because Laravel require the CSRF-TOKEN in every POST request.

answered Aug 09 '18 at 06:49

Bryan Del Bianco

49
8

{{csrf_field()}} is not enough ? – Abd AM Aug 11 '18 at 06:27
still not working even after embed the setup of ajax. The problem in route and how Laravel treat the post request as well. – Abd AM Aug 11 '18 at 06:43

score 0 · Answer 3 · answered Aug 09 '18 at 06:50

0

Check your route file.The issue may be the same name route is already defined before with other method

answered Aug 09 '18 at 06:50

Mayuri Pansuriya

934
6
13

Are you sure about that? Shouldn't there be any clear error message about that? And how could a duplicated route throw an error message like `net::ERR_BLOCKED_BY_CLIENT` which clearly is a browser error and none from the server? – Nico Haase Aug 09 '18 at 09:11

score 0 · Answer 4 · answered Aug 09 '18 at 10:15

0

Try replacing method:"POST" with _method:"POST"

answered Aug 09 '18 at 10:15

Kriogen Mihalcea

35
8

I am saying this since your error is strictly related to the method not being allowed. It might be that because you are using "method" instead of "_method" as required by Laravel to identify what method you are using, it might treat it as a GET request instead of a POST, therefore throwing the method not allowed error. – Kriogen Mihalcea Aug 09 '18 at 10:17
yes, exactly. The problem related to route (by the way Laravel treat the request) but not working even after change it to _method: " POST" – Abd AM Aug 11 '18 at 06:41
Found this on laracasts. Try using: type: "POST", instead of _method/method: "POST" – Kriogen Mihalcea Aug 14 '18 at 08:00

score 0 · Accepted Answer · answered Aug 15 '18 at 06:40

Thanks for your help

Actually I solved my problem, where the problem was in the route as well.

But let me start from the beginning, what error stages I faced and how to solve it:

first: I tried to remove Ajax, and run the form as normal with action="...", once I ensure that the form working well, so I move to next stage, to check Ajax.

Second: When I start to check Ajax, I found that Ajax is working well, but the problem, but the error still shown:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

So I open "laravel.log" in my application, and I checked the latest errors I have in my application, I found that the error maybe came from DB (SQL) or from the route as well. So I moved to check the controller, and I ensure that there is no any error in route as well, because I already use it before in other pages and it works very well.

So the last chance for me to check the route, and the problem should be in route as well. I checked my route as well, and after many time on changing the routes names and etc. I noticed that I make it in 2 groups:

The first group :

Route::group(['prefix' => 'leads'], function () {
     Route::get('/getdata', 'Controller@getdata')->name('leads.getdata');
}

and the second one without group, as following:

Route::get('leads/getdata', 'Controller@getdata')->name('leads.getdata');

So this is my problem as well. Once I moved the route from outside to inside the group > It working well and the problem solved as well.

So at the end of the day, the problem in route as well.

Thanks for yr help ;)

Can't find the error in my route in Laravel with Ajax

5 Answers5

Linked