Laravel为Zurb Foundation模态框分配动态ID问题求助

Hey there! Let's get that modal update issue sorted out—it's a super common snag when working with repeated modals, especially with Foundation's reveal component. Since your controller, routes, and model are already good, the problem is almost definitely that all your modals are using the same static ID, so clicking any edit button only triggers the first one it finds.

Here's how to fix it step by step:

1. Add Dynamic IDs to Modals & Trigger Buttons #

In your Blade template, when looping through your records, append the record's id to both the modal's ID and the button's data-open attribute. This ensures each modal is uniquely tied to its row.

Example Blade code for your table and modals:

<table class="hover">
    <thead>
        <tr>
            <th>Record Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($records as $record)
            <tr>
                <td>{{ $record->name }}</td>
                <td>
                    <!-- Edit button with dynamic data-open target -->
                    <button class="button small primary" data-open="edit-modal-{{ $record->id }}">
                        Edit
                    </button>
                </td>
            </tr>

            <!-- Unique modal for each record -->
            <div class="reveal" id="edit-modal-{{ $record->id }}" data-reveal>
                <h5>Edit {{ $record->name }}</h5>
                <form action="{{ route('records.update', $record->id) }}" method="POST">
                    @csrf
                    @method('PUT') <!-- Don't forget this for Laravel PUT requests -->

                    <!-- Form fields with dynamic IDs to avoid conflicts -->
                    <div class="grid-x grid-margin-x">
                        <div class="cell medium-6">
                            <label for="name-{{ $record->id }}">Name</label>
                            <input type="text" id="name-{{ $record->id }}" name="name" value="{{ old('name', $record->name) }}" required>
                        </div>
                        <!-- Add other fields here, using {{ $record->id }} in their IDs -->
                    </div>

                    <div class="grid-x grid-margin-x mt-3">
                        <div class="cell auto">
                            <button type="submit" class="button primary">Save Changes</button>
                        </div>
                        <div class="cell shrink">
                            <button class="close-button" data-close aria-label="Close modal" type="button">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        @endforeach
    </tbody>
</table>

2. Ensure Foundation Modal Initialization #

Foundation's reveal component usually initializes automatically on page load, but if you're loading records dynamically (like via AJAX), you'll need to reinitialize Foundation after adding new content. Add this script at the bottom of your template (or in your main JS file):

// Initialize Foundation
$(document).foundation();

// If loading content dynamically, call this after new modals are added:
// $(document).foundation('reveal', 'reflow');

3. Quick Checks to Avoid Other Issues #

• Double-check that your route('records.update', $record->id) generates the correct URL for each record (you can inspect the form's action attribute in dev tools to confirm)
• Make sure you're including @csrf and @method('PUT') in every update form—Laravel requires these to process the request securely
• Open your browser's developer console (F12) to check for JavaScript errors (like missing Foundation files or duplicate ID warnings)

That should do it! Now each edit button will trigger the exact modal tied to its record, and your update form will submit to the right endpoint.

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