Как в Laravel передать данные в popup?

Question

[miniven]

У меня есть список объектов и кнопка «подробнее» у каждого.
Когда пользователь нажимает «подробнее», должно выскакивать окно с более детальной информацией именно об этом объекте. Так вот, как передать в это окно информацию именно об этом объекте?

<div class="row">
					@foreach ($objects->sortby(-'id') as $object)
						<div class="col-xs-6 col-md-4">
							<div class="text-center object">
								<div class="object__img">
									<img src="{{ $object->object_image }}" alt="Фото объекта">
								</div>
								<div class="object__info">
									<div class="text-left object__price">Цена: {{ $object->object_price }}</div>
									<div class="text-left object__space">Площадь: {{ $object->object_space }}</div>
									<p class="text-left object__description">{{ $object->object_description }}</p>
								</div>
								<button class="button object__btn description-open">Подробнее</button>
							</div>
						</div>
					@endforeach
				</div>

В контроллере:

public function index() {
        $objects = ObjectsModel::All();

    	$data = [
            'objects' => $objects
    	];

    	return view('pages.landing', $data);
    }

И в самом popup:

<div class="col-md-12">
					<h5 class="popup_obj__subtitle">
						Описание:
					</h5>
				</div>
				<div class="col-md-12">
					<p class="popup_obj__desc">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi inventore iste nesciunt modi non culpa voluptate explicabo, ipsum dolorem suscipit natus quidem ex vel eum asperiores ipsam facilis recusandae. Ut?
					</p>
				</div>
				<div class="col-md-12">
					<div class="text-left popup_obj__price">Цена: 45454 54 54 54</div>
					<div class="text-left popup_obj__space">Площадь: 46/46/46/46</div>
				</div>

Answer 1

[D']

Вариантов несколько:
1) Создать множество дивов с попапами (для каждого объекта) и показывать только нужный.
2) Выводить $objects в json на странице, и брать информацию с помощью JS от туда.
3) Делать ajax запрос при нажатии на "Подробнее" и забирать с сервера информацию об объекте.
4) Если данных в объекте, которые нужно отображать, не много, то можно записывать их в "data-*" аттрибуты, и считывать от туда.

В зависимости от кол-ва объектов можно использовать каждый из пунктов.

1 - объектов мало (до 10)
2 - объектов до 100
3 - когда объектов > 100

Comments

[miniven]

Вот интересует второй или третий. Какой попроще. Не объясните подробнее?

[D']

miniven: 2-3 идентичны в реализации. Различается лишь функция для получения данных.
Т.е для 2 варианта просто пишем на страницу:

<script>
var objects = "{{json_encode($objects)}}"; // или без ковычек, не помню точно как оно там выйдет
</script>

Потом пишем функцию

<script>
function getObject(id) {
  // тут либо получаем данные по ID через ajax, либо просто return objects[id];
}
</script>

Кнопке прописываем data аттрибут data-id и по клику на кнопку вызываем функцию:

$(--button--).on('click', function (e) {
  e.preventDefault();
  var object = getObject($(this).data('id'));
  showPopUp(object);
});