Question

我正在使用Django并且很新。我的目的是从模板触发异步视图并保持在同一页面，显示一个弹出的过程被触发。我经常搜索解决方案，但无法解决问题。

我能够保持在同一页面并使用Celery异步触发视图，但我的问题是我的模式显示的是我的网页内容，而不是我在模态内容中提到的内容。

我在数据目标中的锚标记href和modal中传递视图。

以下是我的模板的代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>DashBoard</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
   <nav class="navbar navbar-inverse">

      <div class="container-fluid">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="#">DashBoard</a>
        </div>

    <div class="collapse navbar-collapse" id="topNavBar">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">
                    <span class="#" aria-hidden="true"></span>&nbsp; Reports
                </a>
            </li>
            <li class="">
                <a href="#">
                    <span class="#" aria-hidden="true"></span>&nbsp; Projects
                </a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="">
                <li class="">
                    <a data-toggle="modal" href="{% url 'update-field' %}" data-target="#myModal">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp; Update-Fields
                </a>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Field Param Update</h4>
                        </div>
                        <div class="modal-body">
                            <p>Update is triggered in the backend. An email will be sent when done.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                  </div>
                </div>
            </li>
            <li class="">
                <a href="#">
                    <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; Logout
                </a>
            </li>
        </ul>
    </div>
</div>

</nav>
</body>
</html>

这里“update-field”是被调用以触发后台进程的视图。任何帮助将不胜感激。提前谢谢。

编辑： I am getting the below in my modal which is same as my webpage.

Answer 1

使用javascript / JQuery，您可以点击<a>标记触发这两个事件。使用以下命令通过JS触发模态。

$(modalid).modal("show");

首先我添加id以便在JS中轻松引用<a>标记并删除data-toggle="modal"，因为我们将通过JS触发模态。所以<a>变为：

<a id="triggerEvents" href="{% url 'update-field' %}" data-target="#myModal">

在 javascript 文件中添加以下内容。

$("#triggerEvents").on("click", function(ev){
  ev.preventDefault();
  var modalid = $(this).data("target");
  var url = $(this).attr("href");

  $(modalid).modal("show"); // Triggering bootstrap modal.

  // Do the asynchronous part here.
});

也许Celery造成了一些问题。您还可以使用jquery.ajax()来运行异步请求。

Bootstrap Modals上的文档。

Answer 2

关闭上述问题，做了以下改动：

在模板中，将模态代码移动到单独的html模板：

<li class="">
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog">
               <div class="modal-content"></div>
         </div>
     </div>
     <a data-toggle="modal" href="{% url 'update-field' %}" data-target="#myModal">
           <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp; Update-Fields
     </a>
 </li>

modal.html

<!-- Modal -->
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">{{ title }}</h4>
</div>
<div class="modal-body">
    <p>{{ body }}</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script>
    $('#myModal').on('hidden.bs.modal', function () {
        location.reload();});     // reloads the current page
</script>

在我看来：

class UpdateFields(UpdateView):
    def get(self, request):
        updateparams.delay()
        context = {
        'title': 'Initiating task...',
        'body': 'Field parameters update has started. An email will be sent when its complete.'
         }
        return render(request, 'app/modal.html', context)

urls.py：

url(r'^update/', views.UpdateFields.as_view(), name='update-field'),

Django bootstrap同时在同一个锚标签中调用视图和模态

2 个答案: