Question

我正在使用Django来实现一个网站，我想添加一个按钮，当有人点击它时，它会打开一个弹出窗口，其中包含一个用javascript编写的图形。由于我在Django中编写网站，我需要在views.py中调用一个函数来获取更新的数据，然后根据它绘制图形。我原本想在一个页面上更新图形，但现在我想打开一个弹出窗口。有人可以帮助我如何修改代码，以便按钮弹出一个包含我实现的图形的小窗口？谢谢！这是我在main.html中的代码：

# I first have a button that could be clicked
<div class="col-lg-4">
 <p><button class="btn btn-primary" type="button" name="display_list" id="display_list">Display List</button></p>
</div>
# here is the script I used to open up a Popup window such that the returned result would be displayed on that separate window
<script>
    $(document).ready(function(){
      $("#display_list").click(function(){
        $.get("display_list/", function(ret){
            $('#result').bPopup(); #I think probably I did this wrong?
         });
      });
    });
</script>

这是我用来在单独的html文件（show_result.html）中绘制图形的代码：

<div id="result">
<script> javascript that draws a graph on html webpage. I pass the updated variable from the corresponding function in views.py to here by calling render(). </script>
</div>

这是views.py中的我的函数：

def display_list(request):
   #some function implementation to get the result and put it in context
   return render(request, "show_result.html",context)

这是我的网址文件中的代码：

url(r'^display_list/$', views.display_list, name='display_list'),

是否可以在html中弹出一个div？在我的案例中我该怎么做？

非常感谢。

Answer 1

可以通过两种方式执行您想要的任务。这是方法。

版本1（同步方式）
假设您有一个名为/x/的网址，其中会打开main.html。因此，您可以在context来电中向GET添加任何数据，图表需求。例如：

def x(request):
    context = {}
    # Add data that is needed to draw the graph, in your context
    return render(request, "main.html",context)

现在，您可以在main.html的{{1}}中获得绘制图表所需的数据。现在您只需使用Bootstrap模式在弹出窗口中绘制图形。

context

由于Bootstrap会处理这个事件，所以<div class="col-lg-4"> <p><button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal"id="display_list">Display List</button></p> </div>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body" id="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>上不需要点击事件监听器。

#display_list

版本2（异步方式）
在这种情况下，我们已经在<script> // Put your graph logic here and use '#modal-body' to render the graph </script>打开了该页面，我们将通过/x/ /display_list/来自AJAX获取数据。

GET

因为当您单击要发送def display_list(request): ''' Function to return data in json format to ajax call ''' context = {} #Get all data required to draw the graph and put it in context return JsonResponse(context)请求的按钮然后打开模式时，您需要从按钮中删除AJAX以防止它打开。将按钮更改为：

data-toggle="modal" data-target="#myModal"

现在，您可以点击网址<p><button class="btn btn-primary" type="button" id="display_list">Display List</button></p>来获取数据。在/display_list/中添加Bootstrap模式元素，如版本1 。现在将以下Javascript添加到main.html以获取数据。

main.html

注意
记得添加Bootstrap的CSS和JS文件。

<script>
    $(document).ready(function(){
        $("#display_list").click(function(e){
            e.preventDefault();
            var modalBody = $("#modal-body");
            // AJAX call to get the data
            $.ajax({
                url: '/display_list/',
                type: 'GET',
                success: function(data, status, xhr) {
                    console.log(data);
                    // Add your graph logic here and use modalBody to draw on it
                }
            });

            //Now display the modal
            $("#myModal").modal('show');
        });
    });
</script>

示例
因此，我将在示例中使用版本1 。我使用的是提供的图表here 第1步：您的<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>应如下所示：

view x

第2步：在def x(request): context = {} links = [ {'source': "Microsoft", 'target': "Amazon", 'type': "licensing"}, {'source': "Microsoft", 'target': "HTC", 'type': "licensing"}, {'source': "Samsung", 'target': "Apple", 'type': "suit"}, {'source': "Motorola", 'target': "Apple", 'type': "suit"}, {'source': "Nokia", 'target': "Apple", 'type': "resolved"}, {'source': "HTC", 'target': "Apple", 'type': "suit"}, {'source': "Kodak", 'target': "Apple", 'type': "suit"}, {'source': "Microsoft", 'target': "Barnes & Noble", 'type': "suit"}, {'source': "Microsoft", 'target': "Foxconn", 'type': "suit"}, {'source': "Oracle", 'target': "Google", 'type': "suit"}, {'source': "Apple", 'target': "HTC", 'type': "suit"}, {'source': "Microsoft", 'target': "Inventec", 'type': "suit"}, {'source': "Samsung", 'target': "Kodak", 'type': "resolved"}, {'source': "LG", 'target': "Kodak", 'type': "resolved"}, {'source': "RIM", 'target': "Kodak", 'type': "suit"}, {'source': "Sony", 'target': "LG", 'type': "suit"}, {'source': "Kodak", 'target': "LG", 'type': "resolved"}, {'source': "Apple", 'target': "Nokia", 'type': "resolved"}, {'source': "Qualcomm", 'target': "Nokia", 'type': "resolved"}, {'source': "Apple", 'target': "Motorola", 'type': "suit"}, {'source': "Microsoft", 'target': "Motorola", 'type': "suit"}, {'source': "Motorola", 'target': "Microsoft", 'type': "suit"}, {'source': "Huawei", 'target': "ZTE", 'type': "suit"}, {'source': "Ericsson", 'target': "ZTE", 'type': "suit"}, {'source': "Kodak", 'target': "Samsung", 'type': "resolved"}, {'source': "Apple", 'target': "Samsung", 'type': "suit"}, {'source': "Kodak", 'target': "RIM", 'type': "suit"}, {'source': "Nokia", 'target': "Qualcomm", 'type': "suit"} ] context['links'] = links return render(request, 'main.html', context)中将以下内容添加到main.html代码中。

<head>

第3步：这将是<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="//d3js.org/d3.v3.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .link { fill: none; stroke: #666; stroke-width: 1.5px; } #licensing { fill: green; } .link.licensing { stroke: green; } .link.resolved { stroke-dasharray: 0,2 1; } circle { fill: #ccc; stroke: #333; stroke-width: 1.5px; } text { font: 10px sans-serif; pointer-events: none; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; } .modal-dialog { width: 63% !important; } </style>中的<body>标记，您需要拥有全局main.html变量。由于django模板标签不能在那里工作，我们无法将脚本转移到单独的文件中。

var links = {{ links|safe }}

多数民众赞成你准备好了。仔细看，你不需要在<body> <div class="col-lg-4"> <p><button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal" id="display_list">Display List</button></p> </div>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body" id="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script> var links = {{ links|safe}}; var nodes = {}; // Use elliptical arc path segments to doubly-encode directionality. function tick() { path.attr("d", linkArc); circle.attr("transform", transform); text.attr("transform", transform); } function linkArc(d) { var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; } function transform(d) { return "translate(" + d.x + "," + d.y + ")"; } // Compute the distinct nodes from the links. links.forEach(function(link) { link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); }); var width = 860, height = 500; var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkDistance(60) .charge(-300) .on("tick", tick) .start(); var svg = d3.select("#modal-body").append("svg") .attr("width", width) .attr("height", height); // Per-type markers, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -1.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5"); var path = svg.append("g").selectAll("path") .data(force.links()) .enter().append("path") .attr("class", function(d) { return "link " + d.type; }) .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); var circle = svg.append("g").selectAll("circle") .data(force.nodes()) .enter().append("circle") .attr("r", 6) .call(force.drag); var text = svg.append("g").selectAll("text") .data(force.nodes()) .enter().append("text") .attr("x", 8) .attr("y", ".31em") .text(function(d) { return d.name; }); </script> </body>添加点击事件，因为Bootstrap可以处理所有这些事件。

这是JSBin demo

Answer 2

完全有可能使用bootstrap模式，这里有关于它的文档： http://www.w3schools.com/bootstrap/bootstrap_modal.asp

示例代码：

<div class="modal fade" id="id_you_want_for_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg">
    <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" id="myModalLabel"> Title you want </h4>
      </div>
           <div class="modal-body">
               <!-- Your Graph here  -->
          </div>
    </div>
  </div>
</div>

不要忘记在项目中包含bootstrap js和css文件：

http://getbootstrap.com/getting-started/

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

希望它有所帮助！

如何打开一个包含用javascript编写的图形的弹出窗口？

2 个答案: