#ajax #forms #popup
#ajax #формы #всплывающее окно
Вопрос:
Редактировать
приведенный ниже код, похоже, работает до тех пор, пока форма действительна.
но когда это не так (метод очистки в форме django) текст формы h1 удаляется (????) и сообщения об ошибках не отображаются…
Я предполагаю, что пустой popup.html возврат осуществляется через ajax, и поскольку нет кнопки для взаимодействия, ничего не происходит, но почему текст h1 удаляется …???
var prevent_edit = false;
var prevent = false;
// popup d'informations indiquant que la levée d'insue a déjà été faite
// pour ce patient
$("#form_unblind_edit").submit(function (event) {
console.log('form_unblind_edit click - first')
console.log('prevent_edit - first', prevent_edit)
if (!prevent_edit) {
event.preventDefault();
}
});
function getCookie(name) {
var cookieValue = null;
if (document.cookie amp;amp; document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i ) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length 1) === (name '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length 1));
break;
}
}
}
return cookieValue;
}
// affichage des informations sur le patient sélectionné pour la ré-allocation
$("#unblind_edit").on("click", function (event) {
console.log('click unblind edit');
var csrftoken = getCookie('csrftoken');
var patient = $("#id_pat").val();
$.ajax({
type: "POST",
url: '/unblind/already_unblind/',
data: {
csrfmiddlewaretoken: csrftoken,
'patient': patient,
},
dataType: 'html',
success: function (data) {
console.log('success');
// var prevent_edit = false;
$("#can_unblind").html(data);
$('#unblindconfirm').modal('show');
$('body').on('click', '#edit_button_OK', function (event) {
console.log('edit_button_OK')
$('#edit_button_OK').attr("disabled", "disabled");
prevent_edit = true;
console.log('prevent_edit', prevent_edit);
$("#form_unblind_edit").submit();
})
},
error: function (resultat, statut, erreur) {
console.log('error');
}
});
});
мне нужна помощь для всплывающего окна с ajax
Пользователь заполняет форму и отправляет форму, нажав кнопку
Я запрещаю отправлять с event.preventDefault();
помощью для отображения всплывающего окна.
Но мне нужно запросить у базы данных информацию для отображения во всплывающем окне, поэтому я использую ajax-запрос
при успешном выполнении ajax отображается всплывающее окно с информацией из базы данных, и я хочу, чтобы форма была отправлена, нажав на кнопку «ОК» всплывающего окна
но, я думаю, это не удалось, потому что событие (отправка) привязано к кнопке, которой нет в DOM при загрузке страницы…
JS
$(document).ready(function () {
var prevent_edit = false;
// prevent submission
$("#form_unblind_edit").submit(function (event) {
if (!prevent_edit) {
event.preventDefault();
}
});
// ajax query that display popup
$("#unblind_edit").on("click", function (event) {
var csrftoken = getCookie('csrftoken');
var patient = $("#id_pat").val();
$.ajax({
type: "POST",
url: '/unblind/already_unblind/',
data: {
csrfmiddlewaretoken: csrftoken,
'patient': patient,
},
dataType: 'html',
success: function (data) {
$("#can_unblind").html(data); //popup html attach to DOM
$('#unblindconfirm').modal('show'); //popup displayed
$('body').on('click', '#edit_button_OK', function (event) {
console.log('edit_button_OK'); // WORKING
prevent_edit = true;
$("#form_unblind_edit").trigger('submit'); //form submission = NOT WORKING
})
}
});
});
Комментарии:
1. Вы пробовали использовать
.submit()
вместо.trigger('submit')
?2. да, но делает то же самое
3. вы пробовали консоль. войдите в функцию отправки, чтобы проверить, вызывается ли она? Также вы можете зарегистрировать prevent_edit внутри и убедиться, что для него установлено значение true
Ответ №1:
Возможно, измените тип кнопки отправки в форме на «кнопка»
<button type="button">Submit</button>
Таким образом, действие отправки не выполняется, когда пользователь нажимает кнопку отправить, и вместо этого вы показываете всплывающее окно. Затем вы должны иметь возможность отправить форму с помощью jQuery.
$("#form_unblind_edit").trigger('submit');
Комментарии:
1. спасибо за ответ, но это не решило проблему