Как создать таблицу свертывания с ответом jQuery Ajax - PullRequest
Новая
       10

Как создать таблицу свертывания с ответом jQuery Ajax

0 голосов
/ 08 октября 2019

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

<script>
    $('.js-ajax').select2({
        ajax: {
            url: '/product/api/elasticsearch',
            dataType: 'json',
            width: 'resolve', // need to override the changed default
            minimumResultsForSearch: -1,
            dropdownCssClass: 'select2-hidden',

            success: function (data) {
                var returnedData = data;
                // clear table
                $('#products tbody').empty();

                for(let i = 0; i < returnedData.results.length; i++){
                    $("#products").find('tbody')
                        .append($('<tr>')
                            .append($('<td>')
                                .text(returnedData.results[i].id)
                            )

                            .append($('<td class="columt">')
                                .text(returnedData.results[i].text)
                            )

                            .mouseover(returnedData.results[1].text)

                            .append($('<td class="columnp">')
                                .text(returnedData.results[i].sku)
                            )
                            .append($('<td class="colum7">')
                                .text(returnedData.results[i].vendor)
                            )
                        );
                }
            }
        }
    });
</script>

Я могу поместить ответ в таблицу, но как я могу поместить ответ всвернуть таблицу? Я думаю, что я должен создать цикл foreach и пометить каждый продукт.

Я пробовал это, но оно не работает 

function addProducts(products) {
  products.forEach(fucntion(product) {
                   var template = $('#products').text();//get template
                    template = template.replace('{id}', product.id);//replace placeholders to data
                    template = template.replace('{title}', product.title);
                    template = template.replace('{price}', product.id);
                    //...other data
                    $('#search-result').append(template);//add to box
                    bindProduct(product.id);//add event  
                   });
}

function bindProduct(productID) {
  $('#'+productID).on('mouseover', function() {//or another event
    showPopup();//justs add opened class or what you want
  });
}

В приведенном выше коде произошла синтаксическая ошибка, которую я не смог найти.

Первая идея состояла в том, чтобыположить данные в таблицу с помощью мыши. Но так как это не сработает, как ожидалось, на маленьком экране, я решил поместить данные в коллапс, но я застрял

1 Ответ

0 голосов
/ 08 октября 2019

вы неправильно написали функцию как функция. попробуй: 

function addProducts(products) {
  products.forEach(function(product) { //here was the "fuction" misspell
                   var template = $('#products').text();//get template
                    template = template.replace('{id}', product.id);//replace placeholders to data
                    template = template.replace('{title}', product.title);
                    template = template.replace('{price}', product.id);
                    //...other data
                    $('#search-result').append(template);//add to box
                    bindProduct(product.id);//add event  
                   });
}

function bindProduct(productID) {
  $('#'+productID).on('mouseover', function() {//or another event
    showPopup();//justs add opened class or what you want
  });
}
...