[Fixed]-Load css and js file when load a div using ajax Django

by

1👍

✅

(A) If you need to be able to load the index.html regularly as well as via AJAX:

Use {% extends parent %} and set the parent variable depending on whether the request is an AJAX request or not.

The parent for the regular request is the complete page <html></html> with all resources so that it can be rendered whole.

(B) If you always ever use this template for rendering the response to that AJAX request only, don’t need to differentiate between the parents.

The parent for the AJAX request only needs to contain the snippet that is in your block content including all required resources. You might even not need the content block directives. It depends on what you want to add to that snippet.

To use sekizai inside that partial template, however, you need to add a render_block directive for CSS and JS. And thus, these warnings apply:

{% render_block %} tags must not be placed inside a template tag block
(a template tag which has an end tag, such as {% block %}…{%
endblock %} or {% if %}…{% endif %}).

If the {% addtoblock %} tag is used in an extending template, the tags
must be placed within {% block %}…{% endblock %} tags.

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

So, a very simplistic solution for your code would be:

{% 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 %}
👤Risadinha

Leave a comment