Как обновить контекст шаблона Django с помощью вызова AJAX (без обновления страницы)? - PullRequest
Новая
       56

Как обновить контекст шаблона Django с помощью вызова AJAX (без обновления страницы)?

0 голосов
/ 09 июля 2020

У меня есть шаблон HTML с виджетом выбора. У меня также есть контекстная переменная с именем test_instance (используется в разделе Info Card ) 

        <!-------------   TEST ID selector   ------------->
        <div class="row test-selector-row">
            <div class="col-lg-4 col-md-6">
                <select id="test-selector" class="select2 form-control custom-select" style="width: 100%; height:36px;">
                    <option></option>
                    {% for domain, tests_list in test_selection_data.items %}
                            <optgroup label={{ domain|title }}>
                                {% for test in tests_list %}
                                    <option value={{ test.test_id }}> {{ test.test_id }}: {{ test.ab_test_name }} </option>
                                {% endfor %}
                            </optgroup>
                    {% endfor %}
                </select>
            </div>
        </div>

        <!-------------   Info Card  ------------->
        <div class="row" id="validation">
            <div class="col-12">
                <div class="card wizard-content">
                    <div class="card-body" style="display:none;">
                        <div class="page-header-styling">
                            <h4 class="card-title"> Test #{{ test_instance.test_id }} - {{ test_instance.ab_test_name }} </h4>

                            {% if test_instance.end_date %}
                                <h5 class="card-subtitle" style="color: #747779;">Start Date: {{ test_instance.start_date|date:"Y-m-d" }}    /    End Date: {{ test_instance.end_date|date:"Y-m-d" }} </h5>
                                <font size="3" style="color:#00560f;"> Test was opened for {{ test_instance.start_date|timesince:test_instance.end_date }} </font>
                            {% else %}
                                <h5 class="card-subtitle" style="color: #747779;">Start Date: {{ test_instance.start_date|date:"Y-m-d" }}  </h5>
                                <font size="3" style="color:#00560f;"> Test is Still Running </font>
                            {% endif %}
                        </div>
                        <div class="release-notes-form-header-class" id="release-notes-form-header-id">
                            {% include "release_notes/release_notes_form_header.html" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

Обратите внимание, что "card-body" скрывается при загрузке страницы.

Представление views.py, которое получает элемент из БД по его идентификатору. 

# Ajax View
class GetTestInstanceAjax(APIView):
    def get(self, request, *args, **kwargs):
        test_id = kwargs.get('test_id')
        # Get test from DB
        test_instance = get_object_or_404(AbTestsListEdisonModel, pk=test_id).__dict__
        # Remove auto generated key: _state from the model
        test_instance = _remove_key_from_dict(_dict=test_instance, key='_state')
        context = {'test_instance':test_instance}
        return Response(context)

JS файл с именем getTestInstance. js: 

function getTestInstanceAJAXAndPresentForm(test_id) {
    "use strict";
    console.log("ENTERED -- release_notes/ajax/getTestInstance");
    var endpoint = 'release_notes_page/get_test_instance/'+test_id;

    $.ajax({
        method: "GET",
        url: endpoint,

        success: function(context) {
            console.log("Ajax - Success");
            setTestInstanceData(context);
        }
    });

    function setTestInstanceData(context) {
        // This conole.log generates: "test_instance request was successfully done. TEST_ID: 2186"
        // Which is really when i choose test_id: 2186.
        console.log("test_instance request was successfully done.\nTEST_ID: "+context.test_instance.test_id);
        // Show main form card
        $('#release-notes-fields-card-id').show();
    }
 }

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

jQuery(document).ready(function() {
        // For select 2
        $(".select2").select2({
            placeholder: 'Select a test...'
        });

        // Define what happen when a value is selected
        $('.select2').on('change', function() {
            // Hide main form card
            $('#release-notes-fields-card-id').hide();

            // Get value from select2 BOX
            var selectedValue = $(".select2 option:selected").val();
            // Send Ajax request to get test_instance (loader-spinner is being hidden inside the function)
            getTestInstanceAJAXAndPresentForm(selectedValue);
          });
    });

Я хочу иметь возможность выбирать элемент из селектор, передайте идентификатор элемента в функцию ajax, а затем покажите карточку с информацией о выбранном элементе

Что происходит в настоящее время: карта отображается без информации test_instance.

Например:

<h4 class="card-title"> Test #{{ test_instance.test_id }} : {{ test_instance.ab_test_name }} </h4>

дает «Тест № -» Вместо «Тест № 2186: TEST-2186-NAME»

Я пытался следить за этой веткой из 2016 года, но мне это не удалось.

...