Rails新手求助：如何从Partial打开Materialize移除确认模态框？

Hey there! Let's work through this modal issue step by step. I see you're using Rails with Materialize (ditching jQuery, smart move!) and trying to get a confirmation modal working for removing Pokémon from your party. Let's fix those issues one by one:

1. Fix the Controller Variable Assignment #

First off, in your show_party_remove_modal controller method, you're setting @pokemon_name after the respond_to block. That means your partial won't have access to that variable! Move it up:

def show_party_remove_modal
  @pokemon_name = params[:name] # Move this BEFORE respond_to
  respond_to do |format|
    format.js { render :partial => '../javascript/party/remove.js.erb' }
  end
end

2. Ensure the Modal Partial is Loaded in the Page #

Right now, your modal partial isn't rendered anywhere in party.html.erb—so when your JS tries to open it, the DOM element doesn't exist yet. Add it to the bottom of party.html.erb:

<!-- Add this at the end of party.html.erb -->
<%= render 'path/to/your/modal_partial' %> <!-- Replace with your actual modal partial path -->

This way, the modal element is present in the DOM when the page loads, so Materialize can initialize it.

3. Fix Materialize Modal Initialization in application.js #

You had an undefined options variable here—let's clean this up:

document.addEventListener('DOMContentLoaded', function() {
  // Initialize all modal elements on page load
  const modalElems = document.querySelectorAll('.modal');
  M.Modal.init(modalElems, {}); // Pass empty object if no custom options are needed
});

4. Correct the remove.js.erb Code #

You're passing a string to M.Modal.getInstance()—it needs a DOM element instead. We'll also add dynamic content updates so the modal shows the correct Pokémon name:

// Grab the modal DOM element
const modal = document.getElementById('party_remove_modal');
// Safely insert the Pokémon name into the modal text
const pokemonName = "<%= j @pokemon_name.capitalize %>";
modal.querySelector('.modal-content p').textContent = `Are you sure you would like to remove ${pokemonName} from your party?`;
// Get or initialize the modal instance, then open it
const instance = M.Modal.getInstance(modal) || M.Modal.init(modal);
instance.open();

Note: Using j (short for escape_javascript) ensures the Pokémon name is safely inserted into the JS string without breaking syntax.

5. Simplify the Remove Link in party.html.erb #

We don't need data-toggle or data-target since we're handling the modal via JS. Keep the remote: true to trigger the JS request:

<td><%= link_to 'REMOVE FROM PARTY', pokemons_party_remove_modal_path(pok['name']), remote: true, class: 'waves-effect waves-green btn' %></td>

Bonus: Dynamically Update the AGREE Link #

If you want the "AGREE" button to point to the correct remove endpoint for each Pokémon, update its href in remove.js.erb:

// Add this after grabbing the modal element
const confirmLink = modal.querySelector('.modal-footer a');
confirmLink.href = "<%= pokemons_party_remove_path(@pokemon_name) %>";

Final Quick Checks #

• Double-check that your pokemons_party_remove_path is set up as a delete route in your config
• Clear your Rails cache with rails tmp:clear to ensure all changes load
• Check your browser's console for JS errors—this is always the first place to look when things aren't rendering!

That should get your modal showing up and working as expected. Let me know if you hit any snags!

内容的提问来源于stack exchange，提问作者simo_sultan