Как обновить вывод данных после ajax?

Question

[Creed1234]

Есть вывод товаров

<section id="index" class="content">
............
<th data-id="какое то число" id="sort">Название</th>
...............
@foreach($products as $product)
         {{ $product->title }}
..............
@endforeach
...............
</section>

По нажатию на заголовок таблицы "название" проиходит

$("#sort").on('click', function (e) {
    const test = e.target.getAttribute('data-id')
    $.ajax({
        url: 'products/sort',
        type: 'get',
        data: {test: test},
        success: function (res) {
 console.log(res)
            $("#index").html(res)
},
        error: function () {
            console.log('Нет')
        }
    })

Контроллер

public function sort() {
        $test = \request()->get('test');
        $products = Product::query()
            ->where('id', '>', $test)
            ->get();
        return $products;

    }

В итоге секция с id ="index" просто пустая. Почему не происходит обновление???

Comments

[Kovalsky]

Запрос к 'products/sort' ушел? Ответ пришел? В res лежит нужный текст?

[Creed1234]

Да ответ приходит

(3) [{…}, {…}, {…}]
0: {id: 33, title: "3233131313", category_id: 124, slug: "3233131313", price: 34, …}
1: {id: 34, title: "Тестовый продукт 2", category_id: 123, slug: "testovyi-produkt-2", price: 1, …}
2: {id: 35, title: "2313131", category_id: 126, slug: "2313131", price: 231, …}
length: 3
__proto__: Array(0)

В консоли он есть. Но в html не вставляется.

[Kovalsky]

Creed1234, ну тогда покажите вывод этого кода:

console.log(typeof res, $("#index").length, $("#index").html());
$("#index").html(res);
console.log($("#index").length, $("#index").html());

И нажимайте кнопку "Ответить" если хотите написать мне, потому что в противном случае я не узнаю что вы написали

[Creed1234]

Kovalsky,

console.log(typeof res, $("#index").length, $("#index").html());

выводит лишком много кода. Всю страницу.

$("#index").html(res);
            console.log($("#index").length, $("#index").html());

main.js:228 1 ""

[Kovalsky]

Creed1234, ну да, это я чересчур. Тогда так:

console.log(typeof res, $("#index").length, $("#index").html().length);
$("#index").html(res);
console.log($("#index").length, $("#index").html().length);

[Creed1234]

Kovalsky,

object 1 9839 main.js:225
1 0 main.js:227

[Kovalsky]

Creed1234, ну во первых вы уже видите наверное что typeof res === object, а это не очень хорошо, потому что метод .html() принимает на вход строку, а не объект. Можете например сделать так: .html(JSON.stringify(res)), или в .ajax укажите dataType: 'html', тогда вам по идее в res строка придёт.

[Creed1234]

Kovalsky, dataType: 'html',

console.log(typeof res, $("#index").length, $("#index").html().length);
            $("#index").html(res);
            console.log($("#index").length, $("#index").html().length);

На экране появился вывовод в виде строки [{"id":33,"title":"3233131313","category_id":124,"slug":"3233131313","price":34,"description":"2","old_price":null,"is_new":1,"is_hit":1,"content":null,"keywords":null,"img":"no-image.png","view":17,"created_at":"2021-01-13T09:53:58.000000Z","updated_at":"2021-01-13T07:25:50.000000Z"},{"id":34,"title":"\u0422\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 2","category_id":123,"slug":"testovyi-produkt-2","price":1,"description":"3","old_price":2,"is_new":1,"is_hit":1,"content":"4","keywords":"5","img":"82fca3a5450c2f15b941f21c988921df.png","view":1,"created_at":"2021-01-13T09:57:01.000000Z","updated_at":"2021-01-13T07:28:49.000000Z"},{"id":35,"title":"2313131","category_id":126,"slug":"2313131","price":231,"description":"12","old_price":null,"is_new":0,"is_hit":0,"content":null,"keywords":null,"img":"4261ddaec9dbda33d33fac8a7f78c016.png","view":0,"created_at":"2021-01-13T07:28:40.000000Z","updated_at":"2021-01-13T07:28:40.000000Z"}]

Вывод в консоле

string 1 9839

1 983

("#index").html(JSON.stringify(res));

[Kovalsky]

Creed1234, ну вот, прекрасно, значит данные вам приходят и вы их можете вывести на страницу. Если нужно чтоб вёрстка была такая же как в исходной странице, то выводите данные на страницу в том же шаблоне который вы привели в начале вопроса

[Creed1234]

=)) Самое интересное, что верстка не меняется. В начале топика я привел ее краткий вариант. Похоже, что здесь и кроется какая-то ошибка. Kovalsky,

[Kovalsky]

Creed1234, ну да, не меняется. А что значит ошибка? Не понимаю, вроде нет никакой ошибки. Просто берёте и по этому же шаблону выводите ваши данные

[Creed1234]

Kovalsky,

Я новичок и, возможно, что то не понимаю, НО

в виде я через foreach перебераю свои $products и вывожу его параметры.

После ajax я получаю обновленный $products и снова его перебираю.

И еще, когда я преобразую ответ в .html(JSON.stringify(res)) я получаю просто строку, которую неполучается разбить на параметры это просто кусок текста =(

Но, к сожалению, как надо это не работает.

[Kovalsky]

Creed1234, "После ajax я получаю обновленный $products и снова его перебираю" - нет, в ответ на запрос к products/sort вы просто получаете объект с данными и нигде его не перебираете. По крайней мере у вас в коде так: вы говорите "снова его перебираю", но я вижу только $("#index").html(res), это же не перебор

[Creed1234]

Kovalsky, но раз я его вставляю в код $("#index").html(res), это не означает, что будет снова выполняться ???

@foreach($products as $product)
         {{ $product->title }}
..............
@endforeach

[Kovalsky]

Creed1234, ну конечно нет, это вообще не связанные куски кода выполняющиеся на разных платформах и в разные моменты времени. Приведенный вами код это код шаблона, этот шаблон обрабатывается на сервере и заполняется данными только при первичной загрузке. Это ж php, он на сервере выполняется, к клиенту никакого отношения не имеет, только данные отдаёт и всё,

Вы либо реализуете обновление данных с перезагрузкой страницы, либо на клиенте дублируете обработку шаблона при получении данных, либо просите сервер прислать вам не данные а конкретно вот этот вот шаблон только с новыми данными

[Creed1234]

Kovalsky, спасибо за Вашу помощь! Завтра со свежей головой попробую все это переосмыслить.
Потом отпишусь. Еще раз спасибо!

[Creed1234]

Kovalsky, Разобрался, Ваши замечания помогли найти решение! Спасибо!

Answer 1

[Creed1234]

Решено