Как я могу обновить sh только дочернюю страницу, которая содержит форму в Django среде - PullRequest
Новая
       6

Как я могу обновить sh только дочернюю страницу, которая содержит форму в Django среде

0 голосов
/ 17 января 2020

Я работал над формой Django. Форма находится на сайте poc_add. html. Сторона index. html содержит 

<div id="output"></div>

, который заполняется содержимым poc_add. html. Другими словами, сайт poc_add. html является частью индекса. html site.

Вот код вида: 

<form class="form">
            {% csrf_token %}
                    <fieldset>
                        <label class="mb-0" for="cmbLocation">Location</label>
                        <div style="padding-bottom: 15px;" class="row mb-1">
                            <div class="col-lg-12">
                                <select class="form-control" id="cmbLocation">
                                    {% for location in locations %}
                                        <option value="{{ location.0 }}">{{ location.1 }}</option>
                                    {% endfor %}
                                 </select>
                            </div>
                        </div>

                        <label class="mb-0" for="cmbCertification">Certification</label>
                        <div style="padding-bottom: 15px;" class="row mb-1">
                            <div class="col-lg-12">
                                <select class="form-control" id="cmbCertification">
                                     <option>Lead Prep</option>
                                     <option>Greeter</option>
                                     <option>Lead Trainer</option>
                                 </select>
                            </div>
                        </div>

......

......
<div id="divAddNewPOC" style="padding-bottom: 10px;padding-left: 2px;">
    <button class="btn btn-primary custom-btn" id="btnNewPOC" data-dismiss="modal">Save</button>
</div>

</fieldset>

</form>

Вот некоторые JavaScript коды файла po c. js, включенного в страницу poc_add. html. 

$("#btnNewPOC").click(function(){
    var selectedLocationVal = $("#cmbLocation").val();
    var selectedCertificationVal = $("#cmbCertification").val();

    console.log("Location val: " + selectedLocationVal);
    console.log("Current Objective val: " + selectedCurrentObjVal);
    console.log("Correct Uniform val: " + selectedCorrectUniformVal);

    $.post("poc_form_submit",{'location': selectedLocationVal,
                            'certification': selectedCertificationVal,
                            ......
                            ......
                            ......
                            },
        function(data) {
            .....
            .....
            .....
    }, "html");
});

Вот некоторая часть файла urls.py 

urlpatterns = [
    path('', views.login, name='login'),
    path('index', views.index, name='index'),
    ....
    ....
    ....
    path('poc_form_submit', views.poc_form_submit, name='poc_form_submit'),

]

Когда я нажимаю кнопку отправки, он обновляет индекс. html site. Мне нужно обновить sh только страницу poc_add. html. Как я могу совершить sh это?

1 Ответ

0 голосов
/ 17 января 2020

Ваше представление должно возвращать обработанный poc_add. html

и затем: 




    $("#btnNewPOC").click(function(){
            var selectedLocationVal = $("#cmbLocation").val();
            var selectedCertificationVal = $("#cmbCertification").val();

            console.log("Location val: " + selectedLocationVal);
            console.log("Current Objective val: " + selectedCurrentObjVal);
            console.log("Correct Uniform val: " + selectedCorrectUniformVal);

            $.post("poc_form_submit",
                    {'location': selectedLocationVal,
                     'certification': selectedCertificationVal,
                     ......
                     ......
                     ......},
                function(data) {
                    <b>// Rendered poc_add.html from your view
                    $("#output").html(data);</b>
                }
            );
        });
...