Как правильно принять данные JSON в модальное окно Bootstrap3?

Question

[Viktor Grachev]

Добрый день! Подскажите пожалуйста как мне правильно принять данные в модальное окно Bootstrap? У меня есть таблицы с пользователями и в каждой строке кнопки для редактирования пользователя. Они имеют такой вид:

<a class="btn btn-mini btn-success" data-toggle="modal" data-target="#myModal" href="/users/permission/{{$user->id}}"><i class="fa fa-user"></i></a>
<a class="btn btn-mini btn-info" data-toggle="modal" data-target="#myModal" href="/users/edit/{{$user->id}}"><i class="fa fa-pencil"></i></a>
<a class="btn btn-mini btn-warning" data-toggle="modal" data-target="#myModal" href="/users/password/{{$user->id}}"><i class="fa fa-key"></i></a>
<a class="btn btn-mini btn-danger" data-toggle="modal" data-target="#myModal" href="/users/block/{{$user->id}}"><i class="fa fa-eye-slash"></i></a>
<a class="btn btn-mini btn-danger" data-toggle="modal" data-target="#myModal" href="/users/delete/{{$user->id}}"><i class="fa fa-times"></i></a>

В работе я использую фреймворк Laravel 4. При нажатии на кнопку редактирования идет запрос к контроллеру который возврящает данные нужного пользователя по его id. Данные возвращаются в модальное окно в формате JSON и вместо полноценного окна с данными такого вида:

Я получаю окно заполненного данными JSON:

Подскажите пожалуйста что я делаю не верно отправляю данные не в верном формате или я не верно их принимаю в модальное окно? Как мне принять данные в поля формы, чтобы я мог их редактировать?

Answer 1

[Сергей Гладковский]

Во-первых, подгрузка данных в модальное окно через remote с версии 3.3.0 уже помечено как устаревший функционал. В 4й версии bootstrap его удалят вовсе.

Во-вторых, что следует так же и из первого, используйте события 'show.bs.modal'/'shown.bs.modal', подгружайте ajax-ом данные с сервера по этим событиям и формируйте уже modal-body на основе полученных данных...

Comments

[Viktor Grachev]

Да вы совершенно правы что этот функционал будет удален в 4 версии, я читал этот момент в документации bootstrap. Я правильно понимаю мне необходимо создать событие которое будет реагировать на нажатие по кнопке и отправлять ajax-запрос и принимать его уже в форме? Вы случайно не подскажите где можно почитать примеры подобных решений, тк с jquery и ajax я знаком совсем мало)

[Сергей Гладковский]

Cобытие создавать не нужно - нужно слушать его у кнопки, которая вызывает модалку. Через data-аттрибуты можете передавать данные для использования в ajax запросе. Почитать можно в гугл. Да и то - не знаю, где. Логика достаточно прозрачная и на поверхности, однако, если отсутствуют знания js и jQuery, то лучше почитать сначала про них и уже по полученным знаниям делать что-то...

[Viktor Grachev]

Спасибо вам Сергей! Вы подсказали в каком направлении идти и после часа гугления решение было найдено)) Как говорится с миру по нитке и теперь все отлично работает осталось привести весь код в порядок и выложу готовое решение на Гисте. Ссылочку дам в чатик сообщества Ларавеля и выложу тут, может кому пригодится))

[Сергей Гладковский]

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

Answer 2

[Константин Феофантов]

1) Вешаем на кнопку или на открытие модального окна событие
2) Аяксом загружаем нужную информацию с сервера
3) Парсим
4) Вписываем данные в форму
5) Профит!

Все действия происходят на клиенте с помощью js

Answer 3

[Вячеслав Барсуков]

Мало получить json, его нужно еще и распарсить. И вопрос тут больше не по laravel.