I am facing an issue with a form that submits information to the database. The form is displayed on a modal popup, and upon clicking the submit button, a new popup appears with two buttons. However, these buttons remain inactive until the controller call is complete, causing a delay in showing the submitted data. To address this problem, I want to implement a spinner on the form popup when the submit button is clicked. Once the response from the controller is successful, the next popup should be displayed.
My current code snippet looks like this:
form:
= form_tag("/system/upload_form", method: 'post', enctype: 'multipart/form-data', remote: true) do
...
...
=submit_tag("Submit",id: "submit_button", class: 'btn btn-default')
controller:
sys = @system.update!(system_params)
respond_to do |format|
format.js
format.json { render :json => sys }
js:
$("#submit_button").click(function() {
$('#modal_define_system').modal('hide'); // current popup
$('#next-page').modal('show'); // next popup
});
Now I need help determining how and where to access the JSON object or value 'sys' returned from the controller.
I have attempted to add a class to the form and then bind an event, like so:
$('.form_class').bind('ajax:success', function() {
console.log(sys);
});
However, I have not been able to achieve the desired result. Any advice or additional code suggestions would be greatly appreciated. Please leave a comment if further explanation or code examples are needed.