fire a modal and populate the form inside it using a controller method

Question

As the title already says, I'd like to have a button that will open a modal and call a controller method at the same time. The method will return a JSON object.

How can I link the button so it will call the method and display the modal? Subsequently, I'd like to use the object returned by the function to populate the modal.

<i data-toggle="modal" data-target="#modal-default" class="fa fa-pencil-square-o"></i>

Modal:

    <div class="modal fade" id="modal-default">
     <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Default Modal</h4>
        </div>
        <div class="modal-body">
          <form class="form-group">
            <div class="row">
              <label class="col-xs-2" for="first">First Name: </label>
              <input type="text" class="form-control col-md-2" id="first" name="" value="">
            </div>
            <div class="row">
              <label class="col-xs-2" for="last">Last Name: </label>
              <input type="text" class="form-control col-md-2" id="last" name="" value="">
            </div>
            <div class="row">
              <label class="col-xs-2" for="email">Email: </label>
              <input type="text" class="form-control col-md-2" id="email" name="" value="">
            </div>
            <div class="row">
              <label class="col-xs-2" for="phone">Phone: </label>
              <input type="text" class="form-control col-md-2" id="phone" name="" value="">
            </div>
            <div class="row">
              <label class="col-xs-2" for="status">Status: </label>
              <input type="text" class="form-control col-md-2" id="status" name="" value="">
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Answer 1

您应该将open modal事件绑定到另一个函数，该函数对服务器进行异步调用以检索数据

Answer 2

You can use jquery the show event:

$('#modal-default').on('shown', function (){
     //use $.get('path/to/controller').done(function(resp){
                 console.log(resp); })
     //|| $.ajax() || $.post()
})

or you can bind an id:

<i data-toggle="modal" data-target="#modal-default" class="fa fa-pencil-square-o" id="async_id"></i>

And use a listener:

$('#async_id').on('click', function(){
     //use $.get('path/to/controller').done(function(resp){
                 console.log(resp); })
     //|| $.ajax() || $.post()
})

EDIT:

use

$('#modal-default').on('shown.bs.modal', function (e) {...

for bootstrap 3

Answer 3

首先使用$ .ajax发出请求，然后使用.done通过setTimeout调用模式