单击 div 时获取类别的内容 |拉拉维尔

Question

我在 laravel 7 上工作，我有一个问题，我想在 ajax 中显示一个类别的产品内容。

我不知道为什么，但我无法在 ajax 中获取我的类别的 ID... 当我单击 div 时，我想显示每个类别的产品，如果不单击类别 div 我什么都不显示。

这是我的控制器：

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use Mail;
use App\User;
use App\Product;
use App\Category;
use App\Tva;
use App\Pricepallet;
use App\Warehouse;
use App\WarehouseProduct;
use Session;

class PagesController extends Controller {

    public function getIndex() {
        $categories = Category::all();
        $products = Product::all();
        return view('front.pages.index', compact('categories','products'));
    }

    public function getProducts($id){
        if($id!=0){
            $products = Category::find($id)->products()->select('id', 'title')->get()->toArray();
        }else{
            $products = Product::all()->toArray();
        }
        return response()->json($products);
    }

}

这是我的看法：

@extends('front.app')
@section('title', 'Administration | BDCE')
@section('content')
<div class="panier-pc">
    <table class="table-panier-pc">
        <thead class="thead-panier-pc">
            <tr>
                <th>Ma Commande</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <p style="text-align: center; font-weight: bold;">On commence par choisir sa ville:</p>
                    <form>
                        <input class="input-rech" type="text" name="search" placeholder="Rechercher ma ville...">
                    </form>
                    <br />
                    <div class="texte-panier-pc">
                    <p class="texte-panier-pc">Format:</p>
                    <p class="texte-panier-pc">Quantité:</p>
                    <hr>
                    <p class="texte-total-panier-pc">Total:</p>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="container">
    <div class="encart-ville">
        <table class="table-encart-ville">
            <thead class="thead-encart-ville">
                <tr>
                    <th>Ma Commande</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                    <form>
                        <input class="input-rech" type="text" name="search" placeholder="Rechercher ma ville...">
                    </form>
                    
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="encart-produit-pc">
        <table class="table-encart-produit-pc">
            <thead class="thead-encart-produit-pc">
                <tr>
                    <th>Mes Articles</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                    <div class="container-pc">
                    <h2>Je choisis ma catégorie</h2>
                    <div class="colonne_categorie">
                        @foreach ($categories as $category)
                            @foreach ($category->products as $product)
                            <div name="category" id="{{ $category->id }}" class="categories_produits"><img src="{{ url('/img') }}/{{ $category->image }}" alt="{{ $category->title }}"> <span class="categories_produits_texte">{{ $category->title }}</span></div><br>
                            @endforeach
                        @endforeach
                    </div>
                    <hr>
                    <div class="colonne_produit">
                    <h2>Je choisis mon type de bois de chauffage</h2><br /><br />
                    @foreach($products as $product)
                    <div name="product" class="categories_produits">
                        <span class="categories_produits_texte">{{ $product->title }}</span>
                    </div><br>
                    @endforeach
                    </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
jQuery(document).ready(function ($) {
    $('div[name=category]').on('click', function () {
        var selected = $(this).find(":selected").attr('id');
        $.ajax({
                    url: '/category/'+selected+'/products/',
                    type: 'GET',
                    dataType: 'json',

            }).done(function (data) {

                var select = $('div[name=product]');
                select.empty();
                $.each(data,function(key, value) {
                    select.append(key.id + value.title);
                });
                console.log("success");
        })
    });
});
</script>
@endsection

我当然已经制定了路线。 我认为这是我的 JS 代码的问题。

非常感谢

Answer 1

您的代码有几个问题：

• 您不能对 a 使用 name 属性，而是使用类。
• 在这种情况下你的 div 的 id 不是唯一的，将 div 放在内部循环之外
• 您的循环中也没有输入标签可供选择。

像这样的

<div id="{{ $category->id }}" class="categories_produits category">
<img src="{{ url('/img') }}/{{ $category->image }}" alt="{{ $category->title }}">
<span class="categories_produits_texte">{{ $category->title }}</span>
@foreach ($category->products as $product)
    <input> //place the inputs to select here
@endforeach
</div><br>

然后

$('.category').on('click', function () {....

Answer 2

尝试使用children

var selected = $(this).children(":selected").attr("id");

而不是

var selected = $(this).find(":selected").attr('id');