触发模态并使用控制器方法填充其中的表单答案

【问题标题】：fire a modal and populate the form inside it using a controller method触发模态并使用控制器方法填充其中的表单
【发布时间】：2017-11-27 17:14:25
【问题描述】：

正如标题已经说过的，我想要一个按钮，它可以打开一个模式并同时调用一个控制器方法。该方法将返回一个 JSON 对象。

如何链接按钮以便它调用方法并显示模式？随后，我想使用函数返回的对象来填充模态。

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

模态：

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

【问题讨论】：

标签： javascript php jquery twitter-bootstrap

【解决方案1】：

您应该将打开模式事件绑定到另一个对您的服务器进行异步调用以检索数据的函数

【讨论】：

【解决方案2】：

你可以使用jquery来显示事件：

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

或者你可以绑定一个id：

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

并使用监听器：

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

编辑：

使用

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

对于引导程序 3

【讨论】：

【解决方案3】：

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

【讨论】：