Ajax URL не выполняет правильную функцию в views.py, как определено в urls.py

Я использую Ajax для некоторых круговых диаграмм, но data-ajax-url не работает так, как задумано (или как я думал). Согласно urls.py, reptibase:item-update должен выполнить функцию item_update в моем файле views.py. Однако item_update никогда не выполняется, вместо этого снова выполняется та же функция, связанная с url текущей страницы.

В настоящее время я получаю ошибку парсинга, потому что HTML возвращается вместо json. Хотя json возвращается из моей функции item_update.

item.js

window.onload = function () {
        console.log("Child: ", document.getElementById("piee"))
        var ctx = document.getElementById("piee").getContext('2d');

        var rep_name = $("#pie1").attr("data-rep-name")
        var ajax_url = $("#pie1").attr('data-ajax-url')
        var _data = []
        var _labels = []

        // Using the core $.ajax() method
        $.ajax({

            // The URL for the request
            url: ajax_url,

            // The data to send (will be converted to a query string)
            data: {
                name: rep_name
            },

            // Whether this is a POST or GET request
            type: "POST",

            // The type of data we expect back
            dataType: "json",

            headers: {'X-CSRFToken': csrftoken},

            context: this
        })
            // Code to run if the request succeeds (is done);
            // The response is passed to the function
            .done(function (json) {

                if (json.success == 'success') {
                    var newMale = json.malePerc
                    var newFemale = json.femalePerc
                    console.log(newMale, newFemale)
                    _labels.push("male", "female")
                    _data.push(parseFloat(newMale), parseFloat(newFemale))
                    window.myPie.update()
                    var newUVB = json.uvbPerc
                    var newSize = json.specSize

                } else {
                    alert("Error: " + json.error);
                }
            })
            // Code to run if the request fails; the raw request and
            // status codes are passed to the function
            .fail(function (xhr, status, errorThrown) {
                alert("Sorry, there was a problem!");
                console.log("Error: " + errorThrown);
                console.log("Status: " + status);
                console.dir(xhr);
                console.warn(xhr.responseText)
            })
            // Code to run regardless of success or failure;
            .always(function (xhr, status) {
                //alert("The request is complete!");
            });

        var config = {
            type: 'pie',
            data: {
                datasets: [{
                    data: _data,
                    backgroundColor: ['#ff0000', "#0000ff"],
                    label: "Temp"
                }],
                labels: _labels,
            },
            options: {
                responsive: true
            }
        };

        console.log("data", _data);
        console.log("config", config)
        window.myPie = new Chart(ctx, config);
        console.log("window", window.myPie)
    }

urls.py

app_name = 'reptibase'
urlpatterns = [
    path('', views.index, name='home'),
    path('search', views.reptile_search, name='search'),
    path('add', views.reptile_add, name='add'),
    path('list', views.reptile_list, name='list'),
    path('listD', views.reptile_listDelete, name='listDelete'),
    #path('<int:rep_id>', views.reptile_item, name='item'),
    path('<str:scientific>', views.reptile_itemAlt, name='itemAlt'),
    path('<int:rep_id>,<int:specific_id>', views.reptile_itemAlt_Edit, name='itemAltEdit'),
    path('<str:reptile>,<int:id>', views.comments, name='comments'),
    path('update', views.item_update, name='item-update'),
    path('edit', views.reptile_edit, name='edit'),
]

itemAlt.html

<div class="pie-chart" id="pie1" data-rep-name="{{ reptile.scientific }}"
     data-ajax-url="{% url "reptibase:item-update" %}">
    <canvas id="piee"></canvas>
    <div class="graph-popout">
        <div class="data">
            <p>{{ femalePerc }}% Female, {{ malePerc }}% Male. {{ size }} Individuals</p>
        </div>
        <p><a href="#">Report Issue</a></p>
        <p><a href="#" class="share">Share</a></p>
    </div>
    <h3>Sex</h3>
    <div class="background"></div>
    <div id="slice1" class="pie-slice">
        <div class="pie"></div>
    </div>
    <div id="slice2" class="pie-slice">
        <div class="pie"></div>
    </div>
    <div id="slice3" class="pie-slice">
        <div class="pie"></div>
    </div>
</div>

Спасибо.

path('<str:scientific>', views.reptile_itemAlt, name='itemAlt'),

скорее всего будет соответствовать запросам, на которые вы хотите перейти:

path('update', views.item_update, name='item-update'),

и, соответственно, конечная точка редактирования под ней!

Переместите 'item-update'(reptibase/update) и 'edit'(repitbase/edit) выше 'itemAlt', чтобы учесть их соответствующие пути, и тогда все остальные запросы будут проходить через них и попадать в нужное представление.

См. раздел "Путь перед нами" здесь, где дается хорошее объяснение этому явлению:

https://www.mattlayman.com/understand-django/urls-lead-way/

Вернуться на верх