Как обновить несколько идентификаторов в HTML с помощью Ajax Javascript для проекта Django
Я пытаюсь отправить 2 ответа, чтобы 2 части HTML могли быть обновлены без обновления всей страницы.
Вот ajax:
$.ajax({
type:'POST',
url:'{% url 'app:bla' %}',
data:{'active' : status, 'csrfmiddlewaretoken':'{{csrf_token}}'},
dataType:'json',
success:function(response){
$('#start').html(response['form']),
//I am trying to refresh #log_form also the same way same #start gets refreshed
//$('#log_form').html(response['form2']),
//What else should I add here to change the id of another part of the html called #log_form
console.log($('#start').html(response['form']));
},
error:function(rs, e){
console.log(rs.responseText);
},
});
Вот часть представлений, чтобы объяснить, что я делаю
def change_status(request, id):
if request.is_ajax() and request.method == 'POST':
if request.POST.get('active') == 'true':
# .......do stuff
context = {
'active': ''
}
html = render_to_string('app/button.html', context,request=request)
html2 = render_to_string('app/log_form.html', context,request=request)
return JsonResponse({'form': html}, {'form2': html2})
else:
print("Fail")
else:
print("Fail")
Теперь, когда я нажимаю определенную кнопку #start
обновляется только страница, а не вся страница.
Мой вопрос: Как я могу получить #log_form
также освежиться вместе с #start
одновременно.
Добавьте код того, как вы запускаете $.ajax()
при нажатии на определенную кнопку #start
. Вам нужно добавить event.preventDefault()
, чтобы избежать действия кнопки по умолчанию, которое может быть причиной полной перезагрузки страницы. В том же месте вы можете вызвать действие #log_form
, каким бы оно ни было
Добавьте код того, как вы запускаете $.ajax()
при нажатии на определенную кнопку #start
. Вам нужно добавить event.preventDefault()
, чтобы избежать действия кнопки по умолчанию, которое может быть причиной полной перезагрузки страницы. В том же месте вы можете вызвать действие #log_form
, каким бы оно ни было
$("#log_form").load(location.href+" #log_form >*","");
Попробуйте этот, я использовал его в похожих ситуациях, когда мне нужно было обновить div только при успехе ajax.