No puede presentar un formulario a través de Ajax
EDIT
el siguiente código parece funcionar siempre y cuando el formulario sea válido.
pero cuando no es el caso (método limpio en forma de django) h1 texto de forma se elimina (?????) y los mensajes de error no se muestran ...
Supongo que un popup vacío.html está de vuelta a través de ajax y como no hay botón para interactuar con nada sucede pero ¿por qué el texto h1 es eliminado???
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 && 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');
}
});
});
Necesito ayuda para el popup con ajax
El usuario completa el formulario y envía el formulario haciendo clic en un botón
I prevent submit with event.preventDefault(); para mostrar un popup.
Pero necesito pedirle a la base de datos información para mostrar en popup, así que uso una consulta de ajax
cuando el éxito de ajax, el popup se muestra con información de la base de datos y quiero que el formulario t se envíe haciendo clic en "OK" botón del popup
pero falló, creo, porque el evento (presentar) se adjunta a un botón que no está presente en DOM cuando la carga de la página...
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
})
}
});
});
Pregunta hecha hace 3 años, 4 meses, 28 días - Por codeartisan
3 Respuestas:
-
Tal vez cambie el tipo de botón de presentación en el formulario a "botón"
De esta manera la acción de envío no se ejecuta cuando el usuario hace clic en enviar y en lugar de mostrar el popup. Entonces usted debe ser capaz de enviar el formulario usando JQuery.
$("#form_unblind_edit").trigger('submit');Respondida el Dec 18, 2020 a las 13:42 - por codealchemy
Votos positivos: 0 | Votos negativos: 0 -
El problema que estás experimentando con el envío del formulario al hacer clic en el botón "OK" del popup parece estar relacionado con el hecho de que el botón no está presente en el DOM cuando se adjunta el evento de clic. Hay una forma de solucionar este problema utilizando delegación de eventos en jQuery.
En lugar de adjuntar el evento de clic directamente al botón '
editbuttonOK', puedes adjuntarlo a un elemento existente en el DOM, como el body, y luego filtrar los eventos por el selector '#editbuttonOK' dentro de la función de controlador de eventos. De esta manera, el evento de clic se manejará correctamente incluso si el botón '#editbuttonOK' se crea dinámicamente en el DOM. Aquí hay un ejemplo de cómo puedes modificar tu código para implementar la delegación de eventos:javascript $(document).ready(function () { var prevent_edit = false; // prevent submission $("form_unblind_edit").submit(function (event) { if (!prevent_edit) { event.preventDefault(); } }); // ajax query that displays 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 attached to DOM $('unblindconfirm').modal('show'); // popup displayed } }); }); // Delegated event handler for dynamically created button $('body').on('click', 'edit_button_OK', function (event) { console.log('edit_button_OK'); prevent_edit = true; $("form_unblind_edit").trigger('submit'); // form submission }); });Al utilizar la delegación de eventos de esta manera, el evento de clic en el botón '#editbuttonOK' se manejará correctamente incluso si se crea dinámicamente después de que se adjunte el evento. Espero que esta solución te ayude a resolver tu problema y que puedas enviar el formulario con éxito desde el botón "OK" del popup.
Respondida el Dec 19, 2020 a las 13:43 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
El problema en el código es que el controlador de eventos
$('body').on('click', '<h17>edit_button_OK', function (event)se adjunta al cuerpo del documento después de que se haya cargado la página. Esto significa que cuando se hace clic en el botón#edit_button_OK, el controlador de eventos no está asociado con el elemento y no se activa. Para resolver este problema, puedes utilizar la delegación de eventos. La delegación de eventos implica adjuntar un controlador de eventos a un elemento padre que está presente en el DOM cuando se carga la página. Cuando se hace clic en un elemento secundario dentro del elemento padre, el evento se propaga al elemento padre y el controlador de eventos se activa.Aquí tienes un ejemplo modificado de tu código que utiliza la delegación de eventos:
javascript $(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 } }); }); // event delegation for the edit button $('unblindconfirm').on('click', '#edit_button_OK', function (event) { console.log('edit_button_OK'); // WORKING prevent_edit = true; $("form_unblind_edit").trigger('submit'); //form submission = WORKING }); });En este código, el controlador de eventos para el botón
#edit_button_OKse adjunta al elemento#unblindconfirm, que es el elemento padre del botón. Esto asegura que el controlador de eventos esté presente en el DOM cuando se carga la página y se activará cuando se haga clic en el botón#edit_button_OK.Respondida el Dec 19, 2020 a las 13:54 - por Gemini
Votos positivos: 0 | Votos negativos: 0