Symfony - Ajax Select - PullRequest
Новая
       13

Symfony - Ajax Select

1 голос
/ 12 марта 2019

Я работаю над проектом Symfony, где у меня есть сущность продукта, и мне нужна строка поиска Ajax для поиска по моим продуктам и выбора некоторых из них.Проблема в том, что у меня есть панель поиска, которая дает мне живые результаты из базы данных, но если я выбираю продукт, он должен показывать данные в моей таблице.По какой-то причине я не могу показать выбранные результаты в своей таблице.

js 

 $('.js-data-example-ajax').select2({
       ajax: {
           url: '/product/api/search',
           dataType: 'json',
      }
 });

Контроллер 

public function viewActionSearch(Request $request)
{

$query = $request->get('term');

$result = [
    'results' => [],
];

if ($query !== null){
    $products = $this->productRepository->getSearchList($query);

    $result['results'];

    foreach ($products as $product) {
        $result['results'][]     = [
            'id' => $product['id'],
            'text' => $product['name'],
        ];
    }

} else {

    $products = $this->productRepository->getResultList(1);
    foreach ($products as $entity) {
        $result['results'][] = [
            'id' => $entity['id'],
            'text' => $entity['name'],
        ];
    }
}

return new JsonResponse($result);

}

ProductList 

public function getPage(Request $request)
    {
        $products = $this->productRepository->getAllProducts($currentPage);

        return $this->render(
            '@app_bar/Product/productList.twig',
            [
                'products' => $products,                   
            ]
        );
    }

Twig 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/ttskch/select2-bootstrap4-theme@master/dist/select2-bootstrap4.min.css" rel="stylesheet">


<div class="container mt-5">
    <form>
        <div class="form-group">
            <select class="js-data-example-ajax form-control"></select>
            </select>
        </div>
    </form>
</div>




<table class="table table-hover table-responsive">
    <thead>
    <tr>
        <th>id</th>
        <th>Title</th>
        <th>SKU</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    {% for product in products %}
        <tr>
            <td>
                {{ product.id }}
            </td>
            <td>
                {{ product.name }}
            </td>
            <td>
                {{ product.sku }}
            </td>
            <td>
                <a href="{{ path('app_product_getproduct', {'id': product.id}) }}" class="btn btn-success btn-sm" >
                    <span class="glyphicon glyphicon-pencil"></span>
                </a>
                <a href="{{ path('app_product_delete', {'id': product.id}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
                    <span class="glyphicon glyphicon-trash"></span>
                </a>

            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

Если я захожу на маршрут / продукт / API / поиск /, он возвращает результат, но я не могу показать эти выбранные продукты в моей таблице.

1 Ответ

1 голос
/ 12 марта 2019

Вы что-то упустили здесь.Symfony не работает как внешние интерфейсы, такие как vue.js или аналогичные.То, что вы делаете, вы выполняете серверный запрос, и после этого вы просто извлекаете данные через AJAX и ничего не делаете с этими данными.JQuery нужны инструкции о том, что делать с данными, которые вы получаете с сервера.Вы всегда можете использовать Symfony вместе с некоторыми фреймворками, но вам нужно понимать разницу, когда серверная сторона отображает ваш шаблон ветки и когда фреймворк представляет его.

http://api.jquery.com/jquery.ajax/

Подсказка: $('.js-data-example-ajax').select2({ ajax: { url: '/product/api/search', dataType: 'json', success: function (data) { $.each(response, function () { $('#mytable').append('<tr><td>' + this.product_name + '</td><td>' + this.product_price + '</td></tr>'); }); } } }); Существуют различные способы визуализации, вы можете перезагрузить всю таблицу или только нужные вам строки.

...