CODEWITHSUNDEEP
javascriptjqueryjsonajaxdjango
Theodore Howell
Theodore Howell

Reputation: 428

Django AJAX prevent reload of element among templates

EDIT: Added base.html and cleaned up title

EDIT 2: Example of what I mean is the ticker will say x y z, then cycle to a, b, c and so on. How can I keep the place of the ticker when switching pages so that if its on a, b, c it doesn't revert back to x, y, z but instead proceed to d, e, f. It fetches the JSON one time and then iterates through the alerts and once its done, it does it over.

I have a site with a ticker bar at the top that is fetching JSON from my server based on stations current status (running, off etc). This part of the site needs to be in my base.html file, and I need it to last everywhere in the site. Im using AJAX to fetch the JSON, however when I switch to another page it resets unless I use AJAX for literally all of my links and pages. I feel like I am going about this wrong and really would like some input on how to better manage this. This green tiles in the top of the image below is the ticker im talking about, they change every 10 seconds and the data is constantly changing. Is there a better way to keep this in my base.html and not have it reload when switching template views?

Example Page

    {% load static %}
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base/nav.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base/content.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base/shortcuts.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base/ticker.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/views/customers.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/views/customer-stations.css' %}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>TruStar Energy Home</title>
    <script src="{% static 'js/ajax-shortcuts.js' %}"></script>
</head>
<body>
    <div class="left fixed side-nav-container">
        <div class="left relative logo-container">
            <a href="{% url 'dashboard_app:home' %}">
                <img class="left fixed logo" src="{% static 'images/tse-logo-white-green.png' %}">
            </a>
        </div>
        <div class="left relative side-nav">
            {% block nav_content %}
            <ul class="nav-list">
                <li><a href="#" onclick="GetAndInjectContentDivHtml('{% url 'dashboard_app:customers' %}')">Customers</a></li>    
                <li><a href="{% url 'dashboard_app:station_status' %}">Station Status</a></li>
                {% comment %}
                <li><a href="{% url 'dashboard_app:log_extractor_toolkit' %}">Log Extractor</a></li>
                <li><a href="{% url 'dashboard_app:log_analytics_toolkit' %}">Log Analytics</a></li>
                <li><a href="{% url 'dashboard_app:contact_us' %}">Contact Us</a></li>
                <li><a href="{% url 'dashboard_app:logout' %}">Logout</a></li>
                {% endcomment %}
            </ul>
        {% endblock %}
        </div>
    </div>
    <div class="left fixed top-nav-container">
        <iframe src=""></iframe>
    </div>
    <div id="content_div" class="left fixed overflow content-container">
        {% block content %} {% endblock %}
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    {% block javascript %} {% endblock %}
    <script>
        function grab_status_json(first_itr_flag) {
            var xmlhttp = new XMLHttpRequest();
            var url = 'http://dev.trustarenergy.biz:10000';
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var status_json = JSON.parse(this.responseText);
                    parse_status_json(status_json, first_itr_flag);
                }
            };
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }
        window.onload = function () {
            grab_status_json(true);
        }
        function parse_status_json(status_json, first_itr_flag) {
            //Gather the tiles from the top of the menu nav
            var ticker_tile_list = document.getElementsByClassName("ticker-tile");
            var num_of_tiles = ticker_tile_list.length;
            var num_of_status_event = status_json.length;
            var status_index = 0;
            var tile_index;
            var itr_data = status_json.slice(0, num_of_tiles);
            status_json = status_json.slice(num_of_tiles, status_json.length)
            if (first_itr_flag) {
                var delay = 0;
            }
            else {
                var delay = 5000;
            }

            if (num_of_tiles > 0) {
                setTimeout(function () {
                    //for (status_index = 0; status_index < num_of_status_event; status_index += num_of_tiles){
                    for (tile_index = 0; tile_index < num_of_tiles; tile_index++) {
                        tile_html = '<p>' + itr_data[tile_index + status_index].station_name + ' ' + itr_data[tile_index + status_index].time + '</br>' +
                            itr_data[tile_index + status_index].device + ' ' + itr_data[tile_index + status_index].compressor_status + '</br>' +
                            itr_data[tile_index + status_index].alarm_code + ' ' + itr_data[tile_index + status_index].alarm_message + '</p>';
                        ticker_tile_list[tile_index].innerHTML = tile_html;
                    }
                    //}
                    if (status_json.length) {
                        parse_status_json(status_json, false);
                    }
                    else {
                        grab_status_json(false);
                    }
                }, delay);
            }
            //    out += '<a href="">' + status_json[i].station_name + "</a>"
        }
    </script>
</body>
</html>

Upvotes: 0

Views: 96

Answers (1)

Tiago Peres
Tiago Peres

Reputation: 15441

Instead of having it on the page directly, you can use a block having that AJAX functionality.

The advantages are: you can just plug the block into every needed page later on AND only have to program it once.

Upvotes: 1

Related Questions