DjangoBB LoFi version

Полная версия: Как заставить обновиться часть страницы

Начало » Django » Как заставить обновиться часть страницы

Elaphe

Апрель 13, 2017 12:41:21

На странице есть форма обратной связи, которая добавляется с помощью templatetag:

 @register.inclusion_tag('module_contacts/project/tags/form.html')
def contact_me_form():
    form = ContactForm
    return {'form': form}

Данные из этой формы отправляются на сервер в Ajax-запросе. Вот код на странице:

 <aside class="widgetWrap hrShadow widget widget_popular_posts"  style="padding-top: 20px">
    <h3 class="title">Записаться на консультацию</h3>
    <div id="info"></div>
    <article>
        <form action="{% url 'project.contact_me' %}" method="post">
            {{ form.as_p }}
            <div class="sc_button sc_button_style_light sc_button_size_big squareButton fullSize light big margin_bottom_mini ico" id='send_email'>
                <span class="fa fa-check">&nbsp;Отправить</span>
            </div>
        </form>
    </article>
</aside>
<script>
            $(document).ready(function(){
                    var m = new Date().getMonth() + 1;
                    var y = new Date().getFullYear();
                    get_calendar(y, m);
                });
            $(document).on("click", "#send_email", function() {
                var name = $('#id_name').val();
                var email = $('#id_email').val();
                var phone = $('#id_phone').val();
                var message = $('#id_message').val();
                $.ajax({
                      type: "POST",
                      url: "{% url 'project.contact_me' %}",
                      data: {
                          "name":name,
                          "email":email,
                          "phone":phone,
                          "message":message,
                      }
                    })
                    .success(function( data ) {
                        data = $.parseJSON(data);
                        status = data.status;
                        if(status==0) {
                            $('#info').removeClass().addClass('sc_infobox sc_infobox_style_error');
                        } else {
                            $('#info').removeClass().addClass('sc_infobox sc_infobox_style_success');
                        }
                        $('#info').html('');
                        $('#info').append(data.info);
                        ready();
                    });
            });
        </script>

Затем они обрабатываются вот такой функцией:

 def contact_me(request):
    form = ContactForm(data = request.POST)
    if form.is_valid():
        try:
            form.send_email()
            info = u'Ваше сообщение отправлено.'
            status = 1
        except:
           info = sys.exc_info()[0]
           status = 0
    else:
        info = str(form.errors)
        status = 0
    result = json.dumps({'info':info, 'status': status})
    return HttpResponse(result)

То есть вторая функция назад отправляет json с информацией об ошибках и статусе отправки.
Проблема в том, что при таком подходе страница не обновляется. И поле с капчей не обновляется тоже. И если в форме есть ошибка, то второй раз ее уже не отправишь, т.к. капча старая уже не принимается.
Как можно обновить форму (с сохранением данных) или хотя бы только поле капча в ней, не обновляя страницу?

asmadews

Апрель 13, 2017 15:47:12

Elaphe
вторая функция назад отправляет json с информацией об ошибках и статусе отправки.
Проблема в том, что при таком подходе страница не обновляется

Само по себе в этом мире вообще ничего не происходит. Чтобы данные на Вашей странице обновились, нужно чтобы какой-то алгоритм это сделал. Собственно, Вы уже обновляете страницу частично с помощью jQuery $('#info').removeClass().addClass('sc_infobox sc_infobox_style_error'), обновите и то, что нужно.

Elaphe

Апрель 14, 2017 11:06:45

Оказалось достаточно добавить в передаваемый результат еще form:

 result = json.dumps({'info':info, 'status': status, 'form': form.as_p()})

Ну и далее обновить div, в котором расположена форма, с помощью jQuery