What is the correct way to accept JSON data in a Bootstrap3 modal?

Question

JavaScript

Good afternoon! Can you please tell me how to correctly accept the data in the Bootstrap modal window? I have tables with users and in each row there are buttons to edit the user. They look like this:

<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>

In my work, I use the Laravel 4 framework. When you click on the edit button, a request is sent to the controller that returns the data of the desired user by his id. The data is returned to the modal window in JSON format and instead of a full-fledged window with data like this:

I get a window filled with JSON data:

Please tell me what I'm doing wrong, send data in the wrong format, or am I receiving it incorrectly in the modal window? How do I accept data into form fields so that I can edit them?

Answer 1

Firstly, loading data into a modal window via remote has already been marked as deprecated since version 3.3.0. In the 4th version of bootstrap, it will be removed altogether.
Secondly, which also follows from the first one, use the 'show.bs.modal'/'shown.bs.modal' events, load the data from the server with ajax on these events and form the modal-body based on the received data ...

Answer 2

It's not enough to get json, you also need to parse it. And the question here is no longer about laravel.