Home AJAX not updating database query as intended
Reply: 0

AJAX not updating database query as intended

user4485
1#
user4485 Published in April 26, 2018, 1:47 pm

I have pages that use both django context variables and json data. The first page is the "master page" that just displays all available data. The other pages however, are loaded upon submission of a dropdown form where the user can select a specific account to view. When the user selects an account and submits the dropdown form, two things are designed to happen:

The form action goes to a django view function that makes several queries to the database, then passes context variables upon rendering the template. Next however Chart data is supposed to be loaded via Ajax from a certain url that returns a JSONResponse with the data. The chart data seems to load fine for the "master" page, since all data is shown when I visit the url where the data is sent. Upon selecting a specific account however, I want to pass a request to a url to filter the database based on the selection, thereby producing specific chart data. This is the part that doesn't seem to work, as when I select a specific account, I cant seem to get the chart data for only that specific account to show. Here is my code:

urls.py

from django.conf.urls import url, include
from . import views
from .views import get_master_data, get_specific_data

views.py

### SELECTED METER DATABASE DATA PULL ###
def get_specific_data(request, *args, **kwargs): ### This isn't working as intended ###

if request.method == 'POST':

    selected_meter = request.POST.get('selected_meter')

    usage_data = list(MeterData.objects.filter(name=selected_meter).order_by('date').values_list('usage', flat=True))
    #### A bunch of other similar queries ####

    data = {
        "usage_data": usage_data,
        #### corresponding parts for other queries not shown ####
    }
    return JsonResponse(data)

else:

    usage_data = list(MeterData.objects.order_by('date').values_list('usage', flat=True))
    ##### A bunch of other similar queries #####

    data = {
        "usage_data": usage_data,
        #### corresponding parts for other queries not shown ####
    }
    return JsonResponse(data)

template.html

// This script is what gets the chart data. This works on the master page //
<script>
    var categories = [];
    var data = [];
    var endpoint = '/properties/api/chart/data/'
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function(data){
            categories = data.dates
            usageData = data.usage_data
            OldCostsData = data.oldCosts_data
            NewCostsData = data.newCosts_data
            OldRatesData = data.oldRates_data
            NewRatesData = data.newRates_data
            savingsData = data.savings_data
            Chart.defaults.global.defaultFontFamily = "Gotham-Black";
            var usageCanvas = document.getElementById("usageChart");
            var ratesCanvas = document.getElementById("ratesChart");
            var costsCanvas = document.getElementById("costsChart");
            var savingsCanvas = document.getElementById("savingsChart");
        }
    });
</script>

// This is supposed to post the dropdown menu selection on submission before loading the new template thus querying specific chart data //
<script>
    var meterForm = $('#property-select');
    var specificDataUrl = '/properties/api/specific-chart/data/';
    meterForm.submit(function(event){
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: specificDataUrl,
            data: { selected_meter: $('#property-select option:selected').val() }, // data to be sent with the post request

            success: function(data) {
                console.log(data)
            },
        });
    });;
</script>


<!-- This is the form -->
    <form method="POST" action="/properties/property-selected/" id="property-select">
            {% csrf_token %}
            <select name="meters" class="dropdown-content">
                {% for meter in user_meters %}
                <option value="{{ meter }}">{{ meter.name }}</option>
                {% endfor %}
            </select>
            <input type="submit" value="Submit" class="submit-button" style="margin-top:30px;"/>
    </form>

I'm not really sure why the specific data query for charts data isn't working. Any help would be much appreciated, thanks!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.367969 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO