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
• One返回空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

您可以在Bootstap文档中找到您所看到的行为的说明：

  

如果提供了远程网址，则内容将一次加载   jQuery的加载方法并注入到.modal-content div中。如果   你正在使用data-api，你也可以使用href   用于指定远程源的属性。显示了一个这样的例子   下面：

如果要使用相同的模式加载不同的内容，则必须使用Ajax。

（非常难看）解决方法是为x_list中的每个项目渲染一个模态。请注意，如果您打开两次相同的模式，则不会更新该值。

Answer 2

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

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

我更改了一个按钮的链接，因为所有的模态示例都有按钮而不是链接：）

interface Bird {
    void fly();
}

interface Duck extends Bird {
    void quack();
}

class PseudoDuck {
    void fly() {
        System.out.println("Flying");
    }

    void quack() {
        System.out.println("Quacking");
    }
}

class Tester {
    @Test
    void testDuckTyping() {
        final Duck duck
                = DuckTyper.duckType(new PseudoDuck(), Duck.class);
    }
}

Javascript（你需要js-cookie - 我用CDN）将id传递给服务器端，然后以模态显示收到的数量。

#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>

然后你需要将这一行添加到urlpatterns列表中：

$(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;
    });
});

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

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

所以这对我有用（使用一个不同的QuerySet）。 Jquery只定义一次非常重要!!!

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