使用 django-secretballot 和 intercooler.js 制作 ajax 按钮答案

【问题标题】：making ajax button with django-secretballot and intercooler.js使用 django-secretballot 和 intercooler.js 制作 ajax 按钮
【发布时间】：2019-07-27 12:48:46
【问题描述】：

我正在使用 django-secretballot 和 django-likes 制作投票按钮，我想使用 intercooler.js 进行 ajax 调用并且不重新加载整个页面。

问题是当我点击投票按钮时，包含 (vote_total) 的元素消失并且没有任何反应，但是如果我重新加载页面，投票就会发生

图片1：没有点击的按钮

图片2：点击后的按钮

图 3：我重新加载页面后的按钮

这是 django-likes 应用上的“likes.html”模板

{% load i18n %}
{% load static %}

{% if import_js %}
   <script type="text/javascript" src="{% static 'likes/includes/likes.js' %}"></script>
   <script src="{% static 'intercoolerjs/js/jquery.js' %}"></script>
   <script src="{% static 'intercoolerjs/js/intercooler.min.js' %}"></script>
{% endif %}

{% if likes_enabled %}
  {% if can_vote %}
    <a class="liker vote rounded" ic-get-from="{% url 'like' content_type content_obj.id 1 %}" ic-target="#wrapper" ic-select-from-response="#wrapper" rel="nofollow">
        <svg width="10" height="9" viewBox="0 0 9 8" xmlns="http://www.w3.org/2000/svg" class="upvoteIcon_f942d"><path d="M9 8H0l4.5-8L9 8z" fill-rule="evenodd"></path></svg>
        <span id="wrapper" class="number" style="display: inline-block">
            <div id="target">
                {{content_obj.vote_total }}
            </div>
        </span>
    </a>
  {% else %}
    <a class="vote liked rounded">
        <svg width="10" height="9" viewBox="0 0 9 8" xmlns="http://www.w3.org/2000/svg" class="upvoteIcon_f942d"><path d="M9 8H0l4.5-8L9 8z" fill-rule="evenodd"></path></svg>
        <span class="number">
            {{content_obj.vote_total }}
        </span>
    </a>
  {% endif %}
{% endif %}

注意：如果无法让 intercooler.js 与 django-secretballot 和 django-likes 一起使用，请给我 ajax 代码以使按钮不会重新加载整个页面，谢谢

【问题讨论】：

标签： django ajax

【解决方案1】：

问题出在span的id上；它必须是唯一的，所以我这样解决它

 <a class="liker vote rounded" ic-get-from="{% url 'like' content_type content_obj.id 1 %}" ic-src="{% url 'like' content_type content_obj.id 1 %}" ic-target="#wrapper-{{  content_obj.id }}" ic-select-from-response="span" rel="nofollow">

        <span id="wrapper-{{  content_obj.id }}" class="number" style="display: inline-block">
             {{content_obj.vote_total }}
        </span>
    </a>

【讨论】：