django url标签没有被调用

Question

我有一个类似于这样的模板结构:

    #X_List.html
    <div class="row">
        {% include './X_List_Table.html' %}
    </div>
    <div id="confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="testmodal" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content"></div>
    </div>
</div>

    #X_List_Table.html
    <table>
      <thead>
        <tr>
          <th>Desc</th>
          <th>Activate</th>
        </tr>
      </thead>
      <tbody>
        {% for item in x_list %}
          <tr>
            <td>{{ item.id }}</td>
            <td><a data-toggle="modal" href="{% url 'x:x_quantity' item.id %}" data-target="#confirm">Click me</a></td>
          </tr>
        {% endfor %}    
      </tbody>
    </table>

我的观点定义为:

#views.py
def x_quantity(request, id):
  return render(request, 'modal.html', {'quantity': X.objects.filter(pk=id).count()}

和modal.html:

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h3>Attention</h3>
</div>
<div class="modal-body">
    <p>The number of elements is {{ quantity }}</p>
</div>
<div class="modal-footer"></div>

问题是:

假设我在表格中有2个元素,他们的网址将是:

• 'x/x_quantity/1'
• 'x/x_quantity/2'

考虑一下这些元素:

• 一个返回一个具有至少1个元素的QuerySet
• 一个返回一个空的QuerySet

当我点击链接时,它应该运行视图,quantity根据id元素获取,将其作为上下文变量返回到模态,以便可以显示它.

问题是:

当我单击链接时,将使用id元素调用视图,可以通过查看服务器shell来确认[06/Apr/2018 17:00:23] "GET /x/x_quantity/1 HTTP/1.1" 200 898.

如果我点击其他元素,视图没有被调用,则没有请求出去.

我打算做的是显示一个quantity单击元素的模态.

对于我{% url 'app:app_view' var %}应该如何应对href或者我不应该这样做而且应该使用AJAX,这是我的混淆吗？

也许这与"刷新"上下文变量有关？

Answer 1

首先我要澄清一下，在这个例子之前我从未使用过 Bootstrap。我发现你的问题很有趣，所以我玩了一下 Bootstrap CDN。另外，我不使用大量 Javascript，因此每个人都可以随意纠正任何不好的做法。

我认为你想要的使用 AJAX 是可行的，所以这是我的解决方案：

我更改了按钮的链接，因为所有模式示例都有按钮而不是链接:)

#X_List.html
<table>
  <thead>
    <tr>
      <th>Desc</th>
      <th>Activate</th>
    </tr>
  </thead>
  <tbody>
    {% for x in x_list %}
      <tr>
        <td>{{ x.id }}</td>
        <td><button id="{{ x.id }}" type="button" class="btn btn-info modal-btn">Click me</button></td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;      </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Javascript（您将需要js-cookie - 我使用 CDN）将 id 传递到服务器端，然后在模式末尾显示收到的数量。

$(document).ready(function() {

    $(".modal-btn").click(function(event) {
        var x_id = $(event.target).attr('id');

        $.ajax({
            url : "/ajaxquantity/",
            type : "POST",
            dataType: "json",
            data : {
                x_id : x_id,
                csrfmiddlewaretoken: Cookies.get('csrftoken')
            },
            success : function(json) {
                var quantity = json.quantity;
                $(".modal-title").text('Id: ' + x_id);
                $(".modal-body").text('Quantity: ' + quantity);
                $('#myModal').modal('show');
            },
            error : function(xhr,errmsg,err) {
                alert(xhr.status + ": " + xhr.responseText);
            }
        });
        return false;
    });
});

然后您需要将此行添加到 urlpatterns 列表中：

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

最后是服务器端。我不知道你的模型是什么样子，所以在这里我使用了你的问题中的查询。

# views.py
def ajaxquantity(request):
    if "x_id" in request.POST:
        response_dict = {}
        x_id = request.POST.get('x_id')
        quantity = X.objects.filter(pk=id).count()
        response_dict.update({'quantity': quantity})
        return JsonResponse(response_dict)

    else:
        return render(request, 'yourapp/X_List.html')

所以这对我有用（有一点不同的查询集）。非常重要的是，Jquery 只定义一次！

请记住，这是一个最小的工作示例。