Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.09.2019, 12:37
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

Как получить данные из БД и вывести в модальном окне
Доброго дня всем.
Пытаюсь сделать карточку быстрого просмотра товара, как сделано тут - https://likadress.ru/
Повесил событие на кнопку
$(".element-view").on("click", function(){
        let id_product = $(this).attr("id_product");

            $.ajax({
                url: laroute.route('product.show', {id_product}),
                type: 'GET',
                dataType: "json",
                data:{id:id_product},
                success: function(response){
                    console.log("OK");
                    $(".modal_details").addClass("show-modal");
                },
                error: function (response) {
                    console.log("NO")
                }
            });
    });

В консоли получаю ответ ОК.
В контроллере написал (все это дело хочу реализовать на Laravel):
public function show($id)
    {

        $product = Product::find($id);
        return response()->json($product);
    }


Вопрос - как получить переменную в модальном окне и как потом вывести данные о товаре? Может кто ткое уже делал? Поделитесь опытом.
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 19.09.2019, 13:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LingVist
как получить переменную в модальном окне
Какую переменную? Вот это - return response()->json($product);, должно быть выводом в браузер, а данные из response получить, поместить в соответствующие элементы $(".modal_details"), который потом показать.
Ответить с цитированием
  #3 (permalink)  
Старый 19.09.2019, 13:50
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

Может я неправильно выразился. Говоря о переменной, я и имел в виду $product.
Сообщение от laimas
а данные из response получить, поместить в соответствующие элементы $(".modal_details"), который потом показать.
Вот именно с этим у меня и трудности - как эти данные получить и показать? Файл достаточно большой, чтобы описывать его в скрипте
Ответить с цитированием
  #4 (permalink)  
Старый 19.09.2019, 14:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LingVist
я и имел в виду $product
Никак, это переменная на сервере, а итогом обращения к методу show контроллера должен быть вывод в браузер. При этом если вывести в консоль на клиенте ответ сервера console.log(response), то это должен быть объект, если $product, это ассоциированный массив, либо массив, если если $product, это индексный массив. А далее данные этого массива нужно поместить на страницу. Например, панель "modal_details" имеет элемент с id "test", а $product содержит ключ "test", значение которого нужно поместить в этот элемент. Значит на клиенте нужно выполнить $('#test').text(response.test).

Вот так получая значения свойств объекта response (ключей $product) непосредственно или обходом в цикле и помещайте их в нужное. А что там у вас в $product/response, что из него во что помещать никто ведь не знает на форуме, поэтому конкретно никто ничего и не скажет.
Ответить с цитированием
  #5 (permalink)  
Старый 19.09.2019, 15:06
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

Вывод console.log(response) показывает пустые скобки {}
Может я неправильно ajax-запрос написал?
Ответить с цитированием
  #6 (permalink)  
Старый 19.09.2019, 15:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ну в самом запросе нет ошибок, а верен ли путь и данные запроса, этого я не знаю. Что касается {} в консоли, то это означает, что $product, то есть то что возвращено Product::find($id), является пустым объектом, то есть на клиент будет отдан json "{}". Причину искать нужно на сервере, либо не те параметры в запросе передает клиент.
Ответить с цитированием
  #7 (permalink)  
Старый 19.09.2019, 16:30
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

URL неправильно написал. Теперь нормально, в консоли выдает
{"id":53,"title":"\u0411\u0440\u044e\u043a\u0438 LB 52-071","alias":"bruki-LB-52-071-","meta_title":"\u0411\u0440\u044e\u043a\u0438 LB 52-071","meta_description":"","meta_keywords":"","status":"","sizes":null,"price":560,"articul":"","category_id":7,"category_alias":"womans","created_at":null,"updated_at":null}


Но когда пишу
success: function (response) {
                    $(".modal_details h1").html(response.title);
                    $('.modal_details').addClass("show-modal");
                },

Опять что-то не так?
Ответить с цитированием
  #8 (permalink)  
Старый 19.09.2019, 17:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LingVist
Опять что-то не так?
А что не так, панель появляется, а заголовок пуст? Я же не знаю всю html-структуру панели modal_details, как я могу знать что не так. Вероятно, что селектор ".modal_details h1" не верный.
Ответить с цитированием
  #9 (permalink)  
Старый 20.09.2019, 11:29
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

Все получилось, данные выводятся, спасибо Вам за помощь.
Но теперь встала другая проблема - картинки к товару хранятся в другой таблице, связанной с первой. Я получил значения и отправил из контроллера две переменные так
return response()->json([$images, $product]);

В итоге получаю массив, в консоли это выглядит так:
(2) [{…}, Array(5)]
0: {id: 53, title: "Брюки LB 52-071", alias: "bruki-LB-52-071-", meta_title: "Брюки LB 52-071", meta_description: "", …}
1: Array(5)
0: {id: 1, img: "01.jpg", product_id: 53, created_at: null, updated_at: null}
1: {id: 2, img: "02.jpg", product_id: 53, created_at: null, updated_at: null}
2: {id: 3, img: "03.jpg", product_id: 53, created_at: null, updated_at: null}
3: {id: 4, img: "04.jpg", product_id: 53, created_at: null, updated_at: null}
4: {id: 5, img: "05.jpg", product_id: 53, created_at: null, updated_at: null}


Из первого массива получаю значения в срипте таким образом:
$(".product-title h1").text(response[0].title);
...


Все получается нормально. А вот с картинками беда - их нужно выводить в цикле. В шаблоне это выглядит так

<ul class="product-preview">
                                @foreach($product->image as $item)
                                    <li class="">
                                        <img src="{{ asset('img') }}/catalog/{{ $product->category_alias }}/{{ $item->img }}" alt="">
                                    </li>
                                @endforeach
                            </ul>


Как мне все это дело правильно написать в скрипте?

Спасибо.
Ответить с цитированием
  #10 (permalink)  
Старый 20.09.2019, 11:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LingVist
В шаблоне это выглядит так
Это РНР код, серверный, а это 0: {id: 1, img: "01.jpg", product_id: 53, created_at: null, updated_at: null}... JS объект. Вопрос - если шаблон уже выводит на странице изображения, то зачем получать объект с информацией о них? Или это иные изображения?

PS. Кстати, зачем у foreach "собака" (надеюсь знаете для чего она) если родитель (UL) выводится без проверки наличия изображений, а $product->image по идее либо пустой массив/объект должен быть, что не вызовет ошибки, либо null, что не мешало бы проверить до цикла?

Последний раз редактировалось laimas, 20.09.2019 в 11:42.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вывести данные JSON в аттрибут data-* wintersoft Общие вопросы Javascript 7 09.08.2018 10:15
как получить данные с другого сайта? dobush jQuery 2 19.01.2013 17:39
Как убрать боковой скрол в модальном окне? pahannew Элементы интерфейса 6 08.01.2013 13:13
Как получить данные переданные методом POST? layla Общие вопросы Javascript 3 13.12.2010 10:16
как получить данные из reader.xmlData lfs2008 ExtJS 3 02.11.2010 19:12