Django использование шаблонов представлений и AJAX - PullRequest
0 голосов
/ 09 октября 2018

Извините, я не смог прийти с более точным названием темы, и должен признать, что я все еще довольно новый Django.

Я пытаюсь работать с Ajax и шаблонами с разделенными представлениями, но не могудостичь того, чего я хочу, так или иначе.

Моя цель - уметь работать с визуализированными шаблонами и инструкциями jquery hide / show, но в какой-то момент мне не удается.

Вотmy urls.py:

from django.urls import path
from django.conf.urls import url
from . import views, inventory

urlpatterns = [
    path('', views.index, name='index'),
    url(r'^inventory', inventory.inventory, name='inventory'),
    url(r'^buildInventory', inventory.buildInventory, name='buildInventory'),        
]

Мой индекс просмотров отображает шаблонный "index.html" (есть контекст, который я удалил для иллюстрации):

def index(request):
    return render(request, 'myapp/index.html', context)

Мой индекс.html file:

{% extends "base.html" %}
{% load static %}
{% block delivery_form %}
    <div id="mainblock">
    ....
    </div>
{% endblock %}

И мой base.html в основном содержит мои статические данные и заголовки:

{% load static %}
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="shortcut icon" type="image/png" href="http://web-iec/favicon.ico"/>
        <link rel="stylesheet" type="text/css" href="{% static 'myapp/css/nice.css' %}">
        <script type="text/javascript" src="{% static 'myapp/js/jquery.js' %}" ></script>
        <script type="text/javascript" src="{% static 'myapp/js/jquery-ui.js' %}" ></script>
        <script type="text/javascript" src="{% static 'myapp/js/inventory.js' %}" ></script>
        <script type="text/javascript" src="{% static 'myapp/js/homepage.js' %}" ></script>
        </head>
        <body>       
        <div class="navBar">
            <span class="navBtn" id="listDeplVer" title="Inventory">Inventory</span>
        </div>    
        <div style="min-height: 100%;margin-bottom: -20px;">
            {% block delivery_form %}    
            {% endblock %}

            {% block inventory %}    
            {% endblock %}
        </div>
    </body>

</html>

Теперь то, что я пытаюсь достичь, в пределах моего инвентаря.jsя получил событие onclick, которое я пытаюсь использовать, чтобы скрыть содержимое домашней страницы и заменить его отображаемым html из моего инвентаря view.py на связанный html:

my inventory.py:

def inventory(request):
    return render(request, 'myapp/inventory.html')

и мой inventory.html:

{% extends "base.html" %}
{% load static %}
{% block inventory %}
<div id="inventoryblock">
    // html
</div>
{% endblock %}

Наконец, мой инвентарь.js ищетike:

$(document).ready(function () {
    $( "#listDeplVer" ).click( function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/myapp/inventory',
            beforeSend: function(){
                $("#mainblock").fadeOut();
            },
            success : function(output){
                $("#inventoryblock").html(output);
            },
        });
});

Итак, как я уже говорил, я ожидал, что содержимое моей страницы при клике будет заменено отображаемой страницей инвентаря, но это не работает.

При использовании инструментов веб-разработки,если я открою запрос XHR для инвентаризации в новой вкладке, он будет работать нормально, поэтому я предполагаю, что я делаю что-то неправильно.

Перед объединением всего в один файл (js, views, html &и так далее) Я хотел спросить, есть ли способ, чтобы что-то похожее на работу?

Спасибо за помощь

1 Ответ

0 голосов
/ 09 октября 2018

Ваша исходная страница не имеет блока инвентаризации.Это только на странице, которую вы загружаете через Ajax.Поэтому, когда ваша функция успеха запускается, она не знает, куда поместить вывод.

Вам нужно поместить пустой div с идентификатором «inventoryblock» в ваш index.html.

Также,ваш инвентарь.html, вероятно, не должен наследовать от чего-либо.Вам не нужен полный HTML-файл с блоком заголовка и т. Д., Вам просто нужен фрагмент, содержащий содержимое инвентарного блока, который вы можете вставить на запрашивающую страницу.Удалите все, кроме соответствующего самого HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...