Value of submit button lost after upgrate to rails_admin 3.0

[Cardyard]

Describe the bug
I use a number of submit buttons on my forms, and distinguish between them by reading the value of params[:button]. After upgrade to rails_admin 3.0, irrespective of the submit button pressed, the value of params[:button] is always true.

Reproduction steps
Have a form with submit buttons..

= button_tag('First button', type: 'submit', value: 'button_1')
= button_tag('Second button', type: 'submit', value: 'button_2')

Expected behavior
Clicking on First button should result in params[:button] returning button_1, and similarly clicking on Second button should result in params[:button] returning button_2 but they both return value of true in params[:button]

Additional context

• rails version: 6.1.5
• rails_admin version: 3.0
• rails_admin npm package version: using sprockets

Add any other context about the problem here.
In order to get rails_admin 3.0 to initialise on each form, I had to change the sprockets load to defer by copying _head.html.erb from gem into layouts/rails_admin/_head.html.erb and changing async to defer..

<% when :sprockets %>
<% handle_asset_dependency_error do %>
<%= stylesheet_link_tag "rails_admin/application.css", media: :all, data: {'turbo-track': 'reload'} %>
<%= javascript_include_tag "rails_admin/application.js", async defer: true, data: {'turbo-track': 'reload'} %>
<% end %>

I think there could be two reasons for my troubles..

1. One should only have a single submit button per form
2. sprockets is out of favour for webpacker

I tracked it down to src/rails_admin/ui.js changing my DOM - why does rails_admin 3.0 do this and is there any way of disabling this feature other than hacking out the code?
By the way thanks for maintaining this fantastic admin solution and making it rails 7 ready.

[mshibuya]

The code in ui.js is workaround for Turbo Drive not supporting sending the submit button value on a form submit. See #3468 for the context.
And I think it can be solved by using the button's value instead of just true. I'll try it later.

For the async/defer part, I didn't quite understand the issue. What happens if you use async, and what is solved with defer?

[Cardyard]

Thanks for your reply Mitsuhiro. The code in ui.js is a very elegant solution.

Regarding defer over async loading of rails_admin/application.js in _head.html.erb, I sometimes get the following errors in console when async in use, but it could be specific to my own setup. The errors are inconsistent - refreshing the page can lead to different (though similar) errors, less errors, or no errors at all. These errors occur in a local development app, and I expect they would not be a problem in production. However, I have found that no errors ever occur when using defer and I'm happy with that.

Uncaught ReferenceError: jQuery is not defined
at jquery_nested_form.self-d38045d10ebdd28aac44152cb451796232091957b86b47bedad1ab171a3a12cd.js?body=1:84:4

Uncaught TypeError: $.widget is not a function
at mouse.self-f0790a202dcf54fab051e71b042335d5346f9cceb0f645223c1dab93f349a04b.js?body=1:41:10
at mouse.self-f0790a202dcf54fab051e71b042335d5346f9cceb0f645223c1dab93f349a04b.js?body=1:32:3
at mouse.self-f0790a202dcf54fab051e71b042335d5346f9cceb0f645223c1dab93f349a04b.js?body=1:34:2

Uncaught TypeError: $.widget is not a function
at sortable.self-6e5e1f07a29b5a89ec1d359363d2800904e3ae548a38ab2f8eded36746d1adbe.js?body=1:44:10
at sortable.self-6e5e1f07a29b5a89ec1d359363d2800904e3ae548a38ab2f8eded36746d1adbe.js?body=1:40:3
at sortable.self-6e5e1f07a29b5a89ec1d359363d2800904e3ae548a38ab2f8eded36746d1adbe.js?body=1:42:2

jQuery.Deferred exception: Cannot set properties of undefined (setting 'insertFields') TypeError: Cannot set properties of undefined (setting 'insertFields')
at HTMLDocument. (http://localhost:3000/assets/rails_admin/nested-form-hooks.self-c12e5a6c476a8dddfa9b4cf1ac797b353599a4bf5a8ad401058a9ca4e73087d8.js?body=1:6:50)
at mightThrow (http://localhost:3000/assets/rails_admin/jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:3763:29)
at process (http://localhost:3000/assets/rails_admin/jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:3831:12) undefined
jQuery.Deferred.exceptionHook @ jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:4047

Uncaught ReferenceError: ledgersEdit is not defined
at state_transition.self-4b1b2de6f4d2e80e8a4b376d234ef08d2218f24ee57f2139b5ba8395675659fd.js?body=1:195:61

Uncaught TypeError: Cannot set properties of undefined (setting 'insertFields')
at HTMLDocument. (nested-form-hooks.self-c12e5a6c476a8dddfa9b4cf1ac797b353599a4bf5a8ad401058a9ca4e73087d8.js?body=1:6:50)
at mightThrow (jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:3763:29)
at process (jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:3831:12)

Above, ledgersEdit is my own custom js required in app/assets/javascripts/rails_admin/custom/ui.js and it relies on jquery, but removing it does not stop the errors.

I'll modify a version of ui.js as you suggest Mitsuhiro.
Best wishes, Mike

[Cardyard]

I copied in and modified app/assets/javascripts/rails_admin/ui.js

Line 91 was.. .attr("value", true)

Modified to.. .attr("value", $(this).attr("value"))

Worked a treat. Thanks very much Mitsuhiro!
Mike

[newfylox]

I don't know if it's related but since rails_admin 3.x, the _head.html.erb partial uses async: true to load scripts. And now I have moments that $ or jQuery is not defined using custom views (for example, adding a custom action with a custom view and using jQuery inside). Sometimes my <script> is loaded before rails_admin/application.js and sometimes not.

rails_admin/app/views/layouts/rails_admin/_head.html.erb

Line 13 in 4a8cc9e

<%= javascript_include_tag "rails_admin/application.js", async: true, data: {'turbo-track': 'reload'} %>

I have no solution to load jQuery before rails_admin template. Is there a solution for this?

[Cardyard]

I had the same problem and so copied _head.html.erb from gem into layouts/rails_admin/_head.html.erb and changing async to defer..

<% when :sprockets %>
<% handle_asset_dependency_error do %>
<%= stylesheet_link_tag "rails_admin/application.css", media: :all, data: {'turbo-track': 'reload'} %>
<%= javascript_include_tag "rails_admin/application.js", async defer: true, data: {'turbo-track': 'reload'} %>
<% end %>

[newfylox]

That's what I was planning to do at first but I would have to check every rails_admin new commits to update this file if it was originally updated from new commits. So it seems more like a patch.

It seems to me that it should not be async using sprockets. Or at least give a possibility to change it in settings or override it without having to patch it. This library should load its dependencies first or let sprockets settings to handle the order so that I can make sure jQuery is loaded when I need it even if it's async.

[mshibuya]

Thanks for the comments. I came to conclude that it would make more sense to use defer instead of async.
Now the fix is in the master, please try it.
2a40976