如何用JavaScript在弹出框显示关联tache的technicien与tarification表格

Got it, let's break this down into actionable steps to implement exactly what you need. I'll assume you have the basic models (Metier, Tache, Technicien, Tarification) set up with proper relationships—if not, I'll note where to adjust.

1. Add an API Route to Fetch Associated Technicians & Tarifications #

First, we need a way to pull filtered data when the user selects a Metier and Tache. Add this to your routes/web.php (or api.php if you prefer API routes):

Route::get('/get-technicians', [YourFormController::class, 'getAssociatedTechnicians'])->name('technicians.get');

Replace YourFormController with the name of your existing form controller.

2. Update Your Controller to Handle the Data Query #

Add this method to your controller. I’ll base this on common relationship setups—adjust to match your actual database structure:

public function getAssociatedTechnicians(Request $request)
{
    // Validate incoming parameters
    $request->validate([
        'metier_id' => 'required|exists:metiers,id',
        'tache_id' => 'required|exists:taches,id',
    ]);

    // Example 1: Using a pivot table (technicien_tache) with a `tarification` column
    $technicians = Technicien::whereHas('taches', function ($query) use ($request) {
        $query->where('taches.id', $request->tache_id)
              ->where('metier_id', $request->metier_id);
    })->with(['taches' => function ($query) use ($request) {
        $query->where('taches.id', $request->tache_id)
              ->select('taches.id', 'tarification'); // Grab the pivot's tarification value
    }])->get();

    // Example 2: Using a separate Tarification model linking Technicien and Tache
    // $technicians = Tarification::where('tache_id', $request->tache_id)
    //     ->whereHas('tache', function($query) use ($request) {
    //         $query->where('metier_id', $request->metier_id);
    //     })
    //     ->with('technicien')
    //     ->get();

    // Return data as JSON for the frontend
    return response()->json(['technicians' => $technicians]);
}

3. Modify Your View to Add the Table & JavaScript Logic #

Update your existing form view to include a hidden table container, then add JavaScript to handle dropdown changes, fetch data, render the table, and auto-fill form fields.

First, add the table container (place it below your dropdowns): #

<!-- Hidden table container by default -->
<div id="technician-table-container" class="mt-4 d-none">
    <h5>Available Technicians & Pricing</h5>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Technician Name</th>
                <th>Tarification</th>
            </tr>
        </thead>
        <tbody id="technician-table-body">
            <!-- Rows will be populated via JavaScript -->
        </tbody>
    </table>
</div>

Then, add the JavaScript (at the bottom of your view or a dedicated JS file): #

<script>
// Grab references to form elements
const metierDropdown = document.getElementById('metier_id');
const tacheDropdown = document.getElementById('tache_id');
const technicienDropdown = document.getElementById('technicien_id');
const tarificationField = document.getElementById('tarification'); // Adjust ID to match your form field
const tableContainer = document.getElementById('technician-table-container');
const tableBody = document.getElementById('technician-table-body');

// Function to fetch and render technicians
function loadTechnicians() {
    const metierId = metierDropdown.value;
    const tacheId = tacheDropdown.value;

    // Only run if both dropdowns have a selected value
    if (!metierId || !tacheId) {
        tableContainer.classList.add('d-none');
        tableBody.innerHTML = '';
        return;
    }

    // Send AJAX request to our route
    fetch(`{{ route('technicians.get') }}?metier_id=${metierId}&tache_id=${tacheId}`)
        .then(response => response.json())
        .then(data => {
            tableBody.innerHTML = '';

            if (data.technicians.length === 0) {
                tableBody.innerHTML = '<tr><td colspan="2" class="text-center">No technicians found for this selection</td></tr>';
                tableContainer.classList.remove('d-none');
                return;
            }

            // Populate table rows
            data.technicians.forEach(tech => {
                // Adjust based on your controller's response structure
                const tarification = tech.taches[0].tarification; // For pivot table example
                // const tarification = tech.tarification; // For separate Tarification model example

                const row = document.createElement('tr');
                row.classList.add('cursor-pointer');
                row.innerHTML = `
                    <td>${tech.nom} ${tech.prenom}</td>
                    <td>${tarification}</td>
                `;

                // Add click event to auto-fill form fields
                row.addEventListener('click', () => {
                    technicienDropdown.value = tech.id;
                    tarificationField.value = tarification;
                    // Optional: Hide the table after selection
                    tableContainer.classList.add('d-none');
                });

                tableBody.appendChild(row);
            });

            // Show the table
            tableContainer.classList.remove('d-none');
        })
        .catch(error => {
            console.error('Error loading technicians:', error);
            tableBody.innerHTML = '<tr><td colspan="2" class="text-center text-danger">Something went wrong loading technicians</td></tr>';
            tableContainer.classList.remove('d-none');
        });
}

// Listen for changes on both dropdowns
metierDropdown.addEventListener('change', loadTechnicians);
tacheDropdown.addEventListener('change', loadTechnicians);
</script>

Quick adjustments for your existing form: #

• Ensure your dropdown inputs have the correct IDs (metier_id, tache_id, technicien_id, tarification)—update the JS selectors if your IDs differ.
• If Tarification is a dropdown instead of a text field, modify the JS to set the dropdown's value instead of a text input.
• Add this CSS to make table rows look clickable:

.cursor-pointer {
    cursor: pointer;
}
.cursor-pointer:hover {
    background-color: #f8f9fa;
}

4. Test It Out! #

Now when you select a Metier and Tache, the table will appear with all associated technicians and their pricing. Clicking a row will auto-fill the Technicien dropdown and Tarification field in your form.

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