AJAX Request not behaving properly inside Laravel 6.1

[billwagner3]

I think this is a bug. Here's all the data for this. I have exhausted all avenues. No response from a Stack Overflow post.

Laravel Version: 6.18.13
PHP Version: 7.3.6
Database Driver & Version:
MySQL: Amazon RDS version 5.7.22.
Driver: MySQL Connector/J 8:8.0.15[Latest]

Description: I have a form in a blade template that uses the jQuery AJAX method as well as .sortable, which is used to rearrange customers that were called from the DB. .sortable is working fine. When the "Save" button is pushed, it returns the "data" value as null. Please see my Stack Overflow post here https://stackoverflow.com/questions/62031957/laravel-ajax-data-from-blade-returns-null-but-code-is-200 --this post is not getting any responses and I've been through numerous SO posts as well as Laracasts Forum, so it looks like a Laravel bug--I did a pretty thorough job of explaining it in the post. Please take a look.

There is some additional data I want to give you that I did not include in the SO post. In the network tab of dev tools in chrome (by the way I also tested this out in Firefox, and got the same results), two POST methods are shown. One is XHR and the other is DOCUMENT. Both with status 200. This is also showing in the console upon button click: "Resource interpreted as Document but transferred with MIME type application/json".

Steps To Reproduce: In order to fully replicate this, one would need a MySQL database as it pulls customer data, which you will see from the code. Probably just using placeholders will be enough to repro.

I have attached a template (edit-route.blade.txt) that has all the JS in it (but there is one jQuery file that is NOT in the template, that only worked when being served up by webpack in the app.js file--it is this here:
datatables.js download here: https://datatables.net/download/

Template is here:
edit-route.blade.txt

Here is the Controller:
RoutesController.txt

Here's what my routes look like:

Route::get('/routes/edit-route/{id}', 'RoutesController@edit')->name('edit-route');
Route::post('/routes/edit-route/{id}', 'RoutesController@update')->name('edit-route');

This should be enough to repro the issue.

If this is indeed a bug that does not get fixed anytime soon, if you have any suggestions on how to create what I need to do, it would be very much appreciated.

Thanks in advance guys. Please let me know if you need any more information. This one has been a real head scratcher.

Best Regards,

Bill Wagner

[dsazup]

Hey, maybe try to setup a repository where someone can quickly clone and replicate the issue? Otherwise it's quite difficult to understand what issue you are facing.

[billwagner3]

I’m gonna do that later today. Thanks!

…

On Fri, May 29, 2020 at 7:15 AM Dainius ***@***.***> wrote: Hey, maybe try to setup a repository where someone can quickly clone and replicate the issue? Otherwise it's quite difficult to understand what issue you are facing. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#33004 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADIM5JUVI32JNYWYXPPF5TTRT67P7ANCNFSM4NNHUFUQ> .

[billwagner3]

Here's a repo which can be cloned to reproduce the problem I am running into. Anyone's help is much appreciated. Thank you.

https://github.com/billwagner3/ajax_issue

[dsazup]

If I understand correctly, what happens here is that you are actually trying to submit xhr request, but you don't stop the click event.

Meaning that when you click save sendOrderToServer function fires, but at the same time it tries to submit the form in a normal way and since it is just a normal request it cancels the xhr request and navigates before it can complete.

What is it that you are trying to achieve? If you want to issue xhr request on save, then you need something like onclick="sendOrderToServer(); return false;" so that it doesn't submit the form at the same time.

[billwagner3]

What I am trying to achieve is--when you rearrange the customers in the view by dragging and dropping, they are then in a different order on the page. I need to capture that new order and save it to the db in the "route_order" column. I need that new data, which is being shown in the console log. To my understanding, this data should be available in the $request variable. But this is obviously not the case. If you can tell me how to do this so I can get this data over to the controller without the event getting cancelled before it gets over there, that'd be great.

…

On Wed, Jun 3, 2020 at 1:07 AM Dainius ***@***.***> wrote: If I understand correctly, what happens here is that you are actually trying to submit xhr request, but you don't stop the click event. Meaning that when you click save sendOrderToServer function fires, but at the same time it tries to submit the form in a normal way and since it is just a normal request it cancels the xhr request and navigates before it can complete. What is it that you are trying to achieve? If you want to issue xhr request on save, then you need something like onclick="sendOrderToServer(); return false;" so that it doesn't submit the form at the same time. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#33004 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADIM5JRW5AIFCMN3FIHIXEDRUYAF5ANCNFSM4NNHUFUQ> .

[dsazup]

I already did - you need to change the save button onclick handler to onclick="sendOrderToServer(); return false;". Then it will submit via xhr and the data will be available.

[billwagner3]

Doesn't work Dainius. There is no controller action with return false. Without return false at least the form submits, but with it, it just stops.

…

On Wed, Jun 3, 2020 at 8:45 AM Dainius ***@***.***> wrote: I already did - you need to change the save button onclick handler to onclick="sendOrderToServer(); return false;". Then it will submit via xhr and the data will be available. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#33004 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADIM5JQYBUNP5NOVUAP55Q3RUZVZPANCNFSM4NNHUFUQ> .

[dsazup]

Ok I think you need to readup on how ajax requests work.
It stops because it fires ajax request. If you open devtools in your browser and inspect the requests, you should see it. If you dont want that, you should not be using $.ajax.

Maybe could put the order in a hidden input and submit it in a normal way

[billwagner3]

I do want it to fire, but I also want it available in the $request variable in the controller. That's what I'm looking for. The data I am looking for is in the console--the order of the customers, the numbers as produced by the sortable function which is above the sendOrderToServer in the blade file. I have tried numerous things that people have told me I am missing, but they have not worked. I thought James made it work, but I did exactly what he suggested, and it did not--so maybe he didnt' really understand what I am trying to get (the numerical order of the customers). All of the suggestions I have gotten have returned null. I also did an SO post on this and got zero response. So, I am looking for that order of the customers in the controller--should be spit out by the return response, but it is null. I am using AJAX because I don't see any other way of getting the JS generated order over to the controller. If you have any ideas, and maybe a doc to point me to of how to do this, it would be much appreciated. Thanks Dainius.

…

On Wed, Jun 3, 2020 at 9:21 AM Dainius ***@***.***> wrote: Ok I think you need to readup on how ajax requests work. It stops because that it fires ajax request. If tou open devtools in your browser and inspect requests, you should see it. If you dont want that, you should not be using $.ajax. You could put the order in a hidden input — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#33004 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADIM5JT5YXJC3MF3ZK63MCDRUZ2AVANCNFSM4NNHUFUQ> .

[dsazup]

Ok so first things first: you cannot submit ajax request and a form request and expect to see the data from an ajax request. That's not how it works.

If you want ajax then do what I suggested. The data is there, but as far as I understand you don't know how to see it. Open your devtools and look at requests. Click save button many times. You should see the requests being made. You can then do dd($request->input('order')); and you should see it in the dev tools.

Or another way is you can create a hidden input. Then in javascript after sorting you put the value in that hidden input and simply submit the form without ajax.

[billwagner3]

As I have said previously, I am seeing it in the dev tools in the console. The exact data I want. Yes, I admit, I do not know how to get it over to the controller.

…

On Wed, Jun 3, 2020 at 9:39 AM Dainius ***@***.***> wrote: Ok so first things first: you cannot submit ajax request and a form request and expect to see the data from an ajax request. That's not how it works. If you want ajax then do what I suggested. The data is there, but as far as I understand you don't know how to see it. Open your devtools and look at requests. Click save button many times. You should see the requests being made. You can then do dd($request->input('order')); and you should see it in the dev tools. [image: Screenshot 2020-06-03 at 17 36 04] <https://user-images.githubusercontent.com/8631224/83663724-fde26d00-a5c0-11ea-9a20-61e2cfb3ecd0.png> Or another way is you can create a hidden input. Then in javascript after sorting you put the value in that hidden input and simply submit the form without ajax. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#33004 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADIM5JV4HVLKBWMQ3XJWST3RUZ4EXANCNFSM4NNHUFUQ> .

[dsazup]

What do you mean? In my screenshot it comes from the controller.

[billwagner3]

Sorry Dainius, I thought that was the console--I didn't look close enough. Thanks man. I'll let you know how it goes.

…

On Wed, Jun 3, 2020 at 9:54 AM Dainius ***@***.***> wrote: What do you mean? In my screenshot it comes from the controller. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#33004 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADIM5JQR7D7L7ORSRTDSYZTRUZ53NANCNFSM4NNHUFUQ> .

[billwagner3]

Hey Dainius, The key was the preview tab under network in the console. I did not know that a dump and die command would output there, or anything else for that matter. So I was getting the data I needed all along, even though it didn't output it in the actual UI--that's what was throwing me--coming back null. Anyway, I got everything working now, including the db save and that whole function is now a done deal. Thanks a lot Danius. Regards, Bill Wagner

…

On Wed, Jun 3, 2020 at 10:05 AM BILL WAGNER ***@***.***> wrote: Sorry Dainius, I thought that was the console--I didn't look close enough. Thanks man. I'll let you know how it goes. On Wed, Jun 3, 2020 at 9:54 AM Dainius ***@***.***> wrote: > What do you mean? In my screenshot it comes from the controller. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#33004 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ADIM5JQR7D7L7ORSRTDSYZTRUZ53NANCNFSM4NNHUFUQ> > . >