Modal doesn't close while updating data with turbo-stream form rails 7

I want to work with turbo stream in rails 7. I want to update my data using turbo stream. Here I have listed the project. When I click one of the project modal form will open. After that I select the data and submit. Problem is that Modal in not closing. But when I use html format modal is closing with page refresh. My code on controller look like

def update
 respond_to do |format|
  if @top_project.update(e_project_params)
    format.turbo_stream do
      render turbo_stream: turbo_stream.update(@top_project, partial: "integration_form", locals: {project: @top_project })
    end
    format.html { redirect_to top_project_path, notice: "successfully updated." }
   else
    format.turbo_stream do
      render turbo_stream: turbo_stream.update(@top_project, partial: 'integration_form', locals: { project: @top_project })
    end
    format.html { render :edit, status: :unprocessable_entity }        
  end
   
end
end

# GET /e_projects/1/edit
def edit
 respond_to do |format|
   format.turbo_stream do
     render turbo_stream: turbo_stream.update(@top_project, partial: 
      "_integration_form", locals: { project: @top_project })
  end
end

end

Inex.html.erb file.

<tbody id="top_tal_project_table">
<% @top_projects.each do |project| %>
<tr>
  <td class="px-7 py-4 whitespace-nowrap"><%= project.name %></td>
  <td class="px-7 py-4 whitespace-nowrap"><%= project.provider_id %></td>
  <td class="px-7 py-4 whitespace-nowrap"><%= project.user.name %></td>
  <td>
    <% if project.project_id.present?%>
    <span class="bg-green-100 text-green-800 font-semibold py-1 px-3 rounded-full text-xs">
      <%= "Toptal: #{project.provider_id}" %>
    </span>
    <% else %>
    <div data-controller="modal" data-modal-allow-background-close="true">
      <%= button_to 'Identify Invoice Project', edit_tal_project_path(project) , class: "text-blue-600",data: { action: "click->modal#open"}, method: :post %>
      <!-- Modal Container -->
      <div data-modal-target="container"
        data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
        class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center"
        style="z-index: 9999;">
        <!-- Modal Inner Container -->
        <div class="max-h-screen w-full max-w-lg relative">
          <!-- Modal Card -->
          <div class="m-1 bg-white rounded shadow">
            <div class="p-8">
              <h2 class="text-xl mb-4">Select Invoice Work Project</h2>
              <hr class="mb-4">
              <div id="integration_form">
                <%= render 'integration_form', project: project %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <% end %>
  </td>
  <td class="px-7 py-4 whitespace-nowrap"><%= project.project&.name %></td>
</tr>
<% end %>

My partial form look like

<%= form_for project do |form| %>
 <div>
 <%# <%= form.label :project_id %> 
 <%= form.select :project_id, options_for_select(Project.all.map{|c|[c.name,c.id]}) 
   %>
 </div>
 <%= form.submit "Update", class: "btn btn-dark cursor-pointer focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 bg-indigo-700 focus:outline-none transition duration-150 ease-in-out hover:bg-indigo-600 rounded text-white px-8 mt-5 py-2 text-sm" %>

When I see my log the status is completed 200 ok. There is no any error when I inspect and check console

Recommand · May 14, 2022 0

Modal doesn't close while updating data with turbo-stream form rails 7

You may also like…