Question

大家好我在我的网站上使用Django CMS，我为页面创建了一个模板，现在使用ajax在此模板的一部分中加载index.html ...

一切正常......但我的索引html调用style.css文件和hpc.js文件，当我用ajax加载时我看不到它。

我用它来加载index.html

中的文件

{% addtoblock "css" %}
  <link rel="stylesheet" type="text/css" href="{% static 'health/css/stylehealth.css' %}" />
{% endaddtoblock %}

这适用于我的js.file

{% addtoblock "js" %}
  <script src="{% static 'health/js/health.js' %}"></script>
{% endaddtoblock %}

我的index.html

{% load cms_tags menu_tags sekizai_tags %}
{% load static %}
{% block title %}{% page_attribute "page_title" %}{% endblock title %}

{% block content %}
  {% placeholder "content" %}

{% addtoblock "css" %}
  <link rel="stylesheet" type="text/css" href="{% static 'health/css/stylehealth.css' %}" />
{% endaddtoblock %}
  <div class="selector_healthApp">
    <div class="selector_area">
      <div class="row">
        <form action="#">
         {% for list in new_object_list %}
            <div class="col-xs-3">
              <select class="form-control" id="item_project">
                <option>{{ 'Select Categoty' }}</option>
                {% for item_list in list.select_opc %}
                  <option value="{{ list.url }}">{{ item_list }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-xs-3">
              <input type="text" class="form-control" id="start_rank" value="{{ list.start }}" placeholder="Start Rank">
            </div>
            <div class="col-xs-3">
              <input type="text" class="form-control" id="display_count" value="{{ list.count }}" placeholder="Display Count">
            </div>
            <div class="col-xs-3">
              <input type="submit" class="btn btn-primary execute_value" name="" value="Update">
            </div>
          {% endfor %}
        </form>
      </div>
    </div>
  </div>

  <div class="healthChart">
    <div class="container">
      <div class="row">
        <div class="graphic"></div>
      </div>
    </div>

  </div>


{% addtoblock "js" %}
  <script src="{% static 'health/js/health.js' %}"></script>
{% endaddtoblock %}

{% endblock content %}

所以像{% %}这样的所有标记都不会加载到页面中。

任何想法如何加载此文件...

提前致谢！

Answer 1

（A）如果您需要能够定期加载index.html以及通过AJAX加载：

使用{% extends parent %}并根据请求是否为AJAX请求设置parent变量。

常规请求的父级是包含所有资源的完整页面<html></html>，以便可以将其整合。

（B）如果您始终只使用此模板呈现对该AJAX请求的响应，则不需要区分父母。

AJAX请求的父级只需要包含块content中的代码段，包括所有必需的资源。您甚至可能不需要content块指令。这取决于您要添加到该代码段的内容。

但是，要在该部分模板中使用sekizai，您需要为CSS和JS添加render_block指令。因此，这些警告适用：

  不得将
{％render_block％}标记放在模板标记块中   （具有结束标记的模板标记，例如{％block％} ... {％   endblock％}或{％if％} ... {％endif％}）。

如果在扩展模板中使用{％addtoblock％}标记，则为标记   必须放在{％block％} ... {％endblock％}标记内。

http://django-sekizai.readthedocs.io/en/latest/#handling-code-snippets

因此，对您的代码来说，一个非常简单的解决方案是：

{% load cms_tags menu_tags sekizai_tags static %}

{# this won't work, because there is no parent template defining this block. Use JS to update the title #}
{# block title %}{% page_attribute "page_title" %}{% endblock title #}
{# e.g. send an element with ID that can be replaced in the title #}

{# do include the CSS and JS elements #}
{% render_block "css" %}

{% placeholder "content" %}

{% addtoblock "css" %}
  <link rel="stylesheet" type="text/css" href="{% static 'health/css/stylehealth.css' %}" />
{% endaddtoblock %}

{# use the element ID to replace the html #}
  <div id="index-container" class="selector_healthApp">
    <div class="selector_area">
      <div class="row">
        <form action="#">
         {% for list in new_object_list %}
            <div class="col-xs-3">
              <select class="form-control" id="item_project">
                <option>{{ 'Select Categoty' }}</option>
                {% for item_list in list.select_opc %}
                  <option value="{{ list.url }}">{{ item_list }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-xs-3">
              <input type="text" class="form-control" id="start_rank" value="{{ list.start }}" placeholder="Start Rank">
            </div>
            <div class="col-xs-3">
              <input type="text" class="form-control" id="display_count" value="{{ list.count }}" placeholder="Display Count">
            </div>
            <div class="col-xs-3">
              <input type="submit" class="btn btn-primary execute_value" name="" value="Update">
            </div>
          {% endfor %}
        </form>
      </div>
    </div>
  </div>

  <div class="healthChart">
    <div class="container">
      <div class="row">
        <div class="graphic"></div>
      </div>
    </div>

  </div>

{% render_block "js" %}
{% addtoblock "js" %}
  <script src="{% static 'health/js/health.js' %}"></script>
{% endaddtoblock %}

使用ajax Django加载div时加载css和js文件

1 个答案: