Question

正如标题所说，我希望有一个按钮可以打开一个模态并同时调用控制器方法。该方法将返回一个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>

Answer 1

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

Answer 2

您可以使用jquery show事件：

$('#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) {...

for bootstrap 3

Answer 3

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

使用控制器方法

3 个答案: