Освежающий модальный форма обратной связи

Question

Я использую модальную форму для регистрации в Django. Я хочу, чтобы входные данные проверялись, а форма обновлялась, чтобы указать, что либо регистрация была успешной, либо жаловаться на то, какой вход отсутствует или некорректен. Насколько я могу судить по коду, с которым я работаю, этот формат был бы правильным, если бы я использовал обычную страницу, но это не работает с модальным. Когда я нажимаю кнопку, материал определенно становится подтвержденным за кулисами (и база данных обновляется, так что все это хорошо), но ничего не отправляется обратно на страницу в конце.

@requires_csrf_token 
def signup(request): 
error, success = '', '' 

    recap = request.POST.get('g-recaptcha-response') 
    [ETC] 

    if request.method == 'POST': 
     [CHECKING INPUTS] 

    if not error: 
     [OTHER STUFF] 
     success = "SUCCESS MESSASGE" 

    return render(request, 'signup_modal.html', 
     { 'firstname': firstname, 
      'lastname': lastname, 
      'email': email, 
      'phone': phone, 
      'error': error, 
      'success': success}) 

Я предполагаю, что проблема здесь, в конце, с битом запроса рендеринга.

Большое спасибо.

ETA:

Javascript:

<script type="text/javascript"> 
$(function() { 
$(".submit-signup").on("click", function() { 
     var data = $("#signup-form").serialize(); 
     $.post("/signup/", data, function() { 

     }); 
    }); 
}); 
</script> 

Response Tab:

<form id="signup-form"> 

    <input id="id_firstname" type="text" name="firstname" placeholder="First name" 
     value="firstname" > 
    <input id="id_lastname" type="text" name="lastname" placeholder="Last name" 
     value="lastname" > 
    <input id = "id_email" type="email" name="email" placeholder="e-mail" 
     value="user@gmail.com" > 
     <input id="id_password" type="password" name="password" placeholder="Password"> 
    <input id="id_password_repeat" type="password" name="password_repeat" placeholder="Repeat password"> 
    <div class="g-recaptcha" data-sitekey="KEY"></div> 

    <p class="success-message"> </p> 
    <p class="error-message"> Couldn't verify reCAPTCHA. Refresh the page and try again? </p> 

    <button type="button" class="submit-signup">Sign up</button>   
    </div> 
    </form> 

Answer 1

Там может быть несколько причин.

1. Ваши данные не возвращаются должным образом.
2. Ваш вызов xhr не заменяет текущие данные dom данными.

От этого вопрос ... сделаю. Ваш вызов ajax не заменяет старые данные dom новыми данными.

Чтобы проверить это. Запустите хром-консоль. Перейдите к Networks, а затем нажмите кнопку регистрации. Найдите отправленный запрос. Скорее всего, вы имеете дело с запросом ajax (xhr). Выберите этот запрос и перейдите на вкладку Response и проверьте, вернулись ли данные.

Edit после обновления вопроса:

Таким образом, наше предположение о том, что новые данные не замещаются в йоте был правильным.

Что вам нужно сделать, это:

• Измените вид вернуть JSON, такую ​​как {'status': boolean, 'form': html}
• Измените JS, чтобы проверить состояние возвращаемого ответа и обновить найти Dóm DIV, который должен быть заменен с html, который вы возвращаете.

Например:

Просмотр будет выглядеть примерно так:

def signup(request): 
    # do your stuff 
    html = render_to_string(YOUR_TEMPLATE, YOUR_CONTEXT) 
    response = {'status': true, 'form': html} 
    return JsonResponse(response) 

И ваши JS будет содержать это внутри Ajax вызова:

success: function(response) { 
    if (response['status'] == 'true') { 
     target = $('#FIND_YOUR_MODAL_DIV_BY_ID') 
     data = response['form']; 
     target.html(data); 
    } 
} 

Одним из хороших ресурсов для вещь, которую вы пытаетесь выполнить: https://impythonist.wordpress.com/2015/06/16/django-with-ajax-a-modern-client-server-communication-practise/

Answer 2

Вкладка Response отображает html при рендеринге данных об успехе, вы должны использовать JsonResponse на ваш взгляд, чтобы отправить данные для ответа на вызов AJAX. Пример использования return JsonResponse(data) об успехе вызова AJAX.

Сообщите мне, если это поможет.