I have been working on creating an index page to display all categories with their respective names and buttons for editing and deleting each category. My goal is that when I click on the edit button, the row should transform into a form with a text field pre-filled with the category name, along with a save button. So far, I have managed to implement the functionality to display the edit form within the row upon clicking the edit button. However, when I click the save button, nothing happens - absolutely nothing at all. There are no errors in the console, no network calls being made, and no activity shown in the server log. I believed that I had included all the necessary code to handle the save action, but now I am unsure where to troubleshoot. Could someone please offer some guidance? My application uses Rails version 4.2.5.
Application.js
// Functionality for displaying edit form inside the row
document.addEventListener("turbolinks:load", function() {
$("[name='edits']").on('ajax:complete', function(event, data, status) {
$(this).parent().parent().html(data.responseText)
})
})
// Handling click on save button
document.addEventListener("turbolinks:load", function() {
$('#edit-form').on('ajax:complete', function(event, data, status){
$('#categories').html(data.responseText);
})
})
Category controller:
def edit
render partial: 'categories/edits'
end
def update
if @category.update(category_params)
flash[:success] = "Category #{@category.name} was saved successfully"
else
flash[:danger] = "There was an error, please try again!"
end
render partial: 'categories/list'
end
Edit form partial:
<div>
<%= form_tag category_path, remote: true, method: :put, name: "edit-form" do %>
<div class="form-group row text-center col-md-12">
<div class="col-md-10">
<%= text_field_tag :name, @category.name,
placeholder: "Category Name", autofocus: true,
class: "form-control" %>
</div>
<div class="col-md-2">
<%= button_tag(type: :submit, class: "btn btn-primary") do %>
Save
<% end %>
</div>
</div>
<% end %>
</div>
In reviewing the HTML, I noticed that the input field and button are placed outside the form tags. Could this factor be contributing to the issue? It currently looks like this:
<form></form>
<input>
<button></button>