Django - переменные Ajax POST JS для инициализации формы без обновления страницы - PullRequest
Новая
       7

Django - переменные Ajax POST JS для инициализации формы без обновления страницы

0 голосов
/ 14 февраля 2019

До сих пор я получил отличную помощь, но хотел опубликовать этот вопрос более четко и конкретно.

Моя ситуация:

Работая в Django, у меня есть форма Django в модальном окне.Модальное окно открывается после вызова API, чтобы собрать некоторые геологические данные.Я надеюсь заполнить эту форму геологическими данными, не обновляя страницу.Я использую ajax для создания сообщения, которое передает мой объект данных в views.py (я могу печатать данные после POST из views.py в терминал), но форма не инициализируется с данными.Вместо этого он инициализируется значениями «PRE_POST», даже после вызова API для сбора данных и отправки через ajax.

Буду очень признателен за любые мысли о том, что здесь может происходить или как их решить!

matMap.html (фрагменты) 

<!-- mineralForm Modal -->
            <div class="modal fade draggable" id="mineralFormModal" role="dialog" style="height: 100%;">
                    <!-- Modal content-->
                    <div class="modal-header">
                        <button id ="mineralFormModalClose" type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title" align="center" style="font-family: Lobster">Add New Mineral</h4>
                    </div>

                    <div class="mineralFormModal_body" id="mineralFormModal_body" style="position:absolute; top:0"> 
                    <h3>loading before modal clears</h3>
                    </div>
                    <br>

                    {{ form }}


                    <br>
                    <button id="modalSave" type="button" class="btn btn-default" data-dismiss="modal">Save</button>
                    <div class="modal-footer red lighten-3">
                        <button id="modalClose" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div> 

            </div>

(...)

$.ajax({
                    method: "POST",
                    url: '',
                    data: {

                        geology: geology,
                        latitude: x,
                        longitude: y,
                        csrfmiddlewaretoken: '{{ csrf_token }}',   
                    },
                    success: function(data){
                        console.log("AJAX POST SUCCESS!"); //grabs this entire page and all variables. 
                    },
                    error: function(error_data){
                        console.log("error");
                        console.log(error_data);
                    }


                });

views.py 

def home_view(request):
    geology = request.POST.get('geology')
    latitude = request.POST.get('latitude')
    longitude = request.POST.get('longitude')

    if request.method == "POST":
        print("!!!! POSTING from HOME !!!!" + geology + " " + latitude + " " + longitude)
       form = MineralForm(request.POST, initial={'geology': "POST_VALUE",'latitude': "POST_VALUE", 'longitude': "POST_VALUE"})
        print("NOW WE ARE POSTING: ")
        print(form)
        return render(request, 'blog/matMap.html', {'form': form}) 

    else:
        print("LOADING HOME: INITIAL STATE (BEFORE POST)")
        form = MineralForm(initial={'geology': "PRE_POST",'latitude': 'PRE_POST', 'longitude': 'PRE_POST'}) # populates form with what user tried to submit...
        return render(request, 'blog/matMap.html', {'form': form})

А вот мой вывод терминала с начальной загрузки страницы до поста AJAX: 

LOADING HOME: INITIAL STATE (BEFORE POST)
[13/Feb/2019 13:36:07] "GET / HTTP/1.1" 200 41261
Not Found: /js/scripts.js
[13/Feb/2019 13:36:07] "GET /js/scripts.js HTTP/1.1" 404 3210
Not Found: /js/scripts.js
[13/Feb/2019 13:36:08] "GET /js/scripts.js HTTP/1.1" 404 3210
[13/Feb/2019 13:36:08] "GET /api/chart/data/ HTTP/1.1" 200 4039
!!!! POSTING from HOME !!!!Miocene -119.48709 44.85346
NOW WE ARE POSTING: 
<tr><th><label for="id_mineral">Mineral:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="mineral" required id="id_mineral"></td></tr>
<tr><th><label for="id_description">Description:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><textarea name="description" cols="40" rows="10" required id="id_description">
</textarea></td></tr>
<tr><th><label for="id_geology">Geology:</label></th><td><input type="text" name="geology" value="Miocene" required id="id_geology"></td></tr>
<tr><th><label for="id_latitude">Latitude:</label></th><td><input type="text" name="latitude" value="-119.48709" required id="id_latitude"></td></tr>
<tr><th><label for="id_longitude">Longitude:</label></th><td><input type="text" name="longitude" value="44.85346" required id="id_longitude"></td></tr>
[13/Feb/2019 13:36:30] "POST / HTTP/1.1" 200 41593

Однако даже послеэто, когда я вызываю мою модальную форму, это выглядит так:

фотография моей формы django в модальном ПОСЛЕ ajax post

СПАСИБО !!!

...