时间戳

首页 > 解决方案 > 如何重新加载引导模式（不是整个页面）？

twitter-bootstrap - 如何重新加载引导模式（不是整个页面）？

问题描述

我的模态从BD获取数据，但问题是当客户端修改数据并关闭时，当它再次打开时，模态显示客户端修改的数据。发生这种情况是因为模式只是在页面加载时获取数据。我希望每次客户端单击以显示模态时模态都获取数据。就像重新加载模态一样。我怎么能那样做？

标签： twitter-bootstrap

解决方案

第一种方法是使用我们想要避免的页面重新加载，第二种方法是使用 ajax。例如，您有一个带有用户名列表（用于显示）、输入字段、提交和取消按钮的简单表单的模式。

假设输入字段是用户名。因此，当客户端打开模式时，会发送 ajax 请求。您等待响应并将其作为列表呈现在模式中。

用户输入新的用户名并提交表单。模态关闭。如果再次打开模态，则发送另一个请求，成功后首先销毁旧列表，然后使用 ajax 响应呈现新列表，然后就可以了。这是一个粗略的例子：

模态- 类似...

<div id="userName" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">User names</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <ul id="result">
        <li>userName1</li>
        <li>userName2</li>
        <li>userName3</li>
      </ul>
        <p>input field goes here.</p>
        <form id="userNameForm" action="https://farfaraway/process" method="POST">
          <input class="form-group" type="text" name="userName">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" form="userNameForm" class="btn btn-primary">Submit</button>

      </div>
    </div>
  </div>
</div>

<button class="btn btn-success" id="openModal">Inser username</button>

JQuery类似：

$('#openModal').on('click',function(){
    openUserNameModal();
});

function openUserNameModal() {
    var ueserName = $('userName').val();

  //ajax request
  $.ajax({
  url: "https://farfaraway/process", 
  method: "post",
  data:{"userName": userName},
  success: function(result){
    if(result){
      //destroy result list items with something like
      $('#result').html('');
      //render result embeded in html with something like
      $('#result').html( /*your html*/ );
      //open modal
        $('#userName').modal('show');
    }
  }});
}

或者，如果您只想删除输入字段，您可以使用类似这样的内容

$('#openModal').on('click',function(){
    $('#userNameForm input').val('');
    $('#userName').modal('show');
});

这当然是一个粗略的例子，只是为了让你继续前进。希望它会有所帮助

推荐阅读