ejemplo - modal popup jquery example
¿Por qué no puedo activar un botón de envío desde el diálogo de jQuery UI? (13)
EDITAR:
Algunas personas han sugerido llamar enviar directamente en el formulario. Esto no es lo que estoy tratando de lograr. Quiero, específicamente, poder invocar el evento click () en un tipo de entrada = ''enviar'' y hacer que envíe el formulario como lo haría normalmente. El cuadro de diálogo de jQuery UI parece estar interfiriendo con este comportamiento normal. Consulte el enlace jsFiddle que he creado, ya que el problema se puede volver a crear allí.
(En primer lugar, ya he visto esta pregunta en StackOverflow, pero la respuesta no funciona en mi situación: jQuery UI Dialog con devolución de botón de ASP.NET )
Comportamiento deseado:
En mi página tengo un campo oculto y un botón de enviar (que está oculto a través de CSS).
Lo que quiero hacer es usar JavaScript para hacer clic en este botón, haciendo que el formulario sea enviado. Lo más importante ... Quiero activar todo esto desde dentro de un diálogo de interfaz de usuario de jQuery. Básicamente, el usuario hará una selección dentro del diálogo de jQuery UI que hará que la página completa sea enviada y recargada.
Planteamiento del problema
Activar un botón, hacer clic de esta manera normalmente funciona bien para enviar el formulario. Sin embargo, falla cuando la acción se desencadena desde un diálogo de jQuery UI.
Como puede ver en mi código jsFiddle , llamo a la función click () de jQuery en el botón de enviar ... ¡pero el formulario en realidad no se envía! De hecho, JavaScript hace clic en el botón, pero el "comportamiento de envío del formulario" no ocurre por sí mismo. La página no está publicada.
Creo que el diálogo de jQuery UI interfiere de algún modo con el comportamiento de envío de formularios del botón con el que trato de hacer clic.
La razón por la que deseo activar el botón por botón en el botón de programación:
No puedo hacer que los botones ubicados dentro del cuadro de diálogo presenten botones. En mi caso, he creado un control de JavaScript reutilizable que envuelve un diálogo de jQuery UI. Este control JS permite a los usuarios elegir un empleado. Sin embargo, cuando un empleado es elegido, el comportamiento deseado no siempre será : enviar formulario. (A veces es posible que desee mostrar el empleado elegido en la página y aún no realizar una presentación).
Detalles adicionales:
Este problema no es específico de ASP.NET, pero aquí hay algunos detalles adicionales para ayudar a explicar por qué estoy intentando todo esto. Estoy escribiendo una aplicación ASP.NET Web Forms usando .NET 4.5. He comenzado a usar JavaScript cada vez más para mis páginas, pero en esta página en particular quiero activar una devolución de datos real al servidor para poder manejar un evento de clic de botón desde el ciclo de vida de la página ASP.NET y rellenar un GridView. Es por eso que quiero poder usar JavaScript para hacer clic en un botón asp: que, a su vez, hace que se envíe un formulario.
Y lo más importante ... Pruébelo usted mismo ---> Vea el enlace jsFiddle a continuación .....
De nuevo, este problema no es específico de ASP.NET. He podido recrear el mismo problema aquí en JsFiddle usando HTML y jQuery UI. Aquí está el enlace JsFiddle:
Como puede ver en el código, ya intenté usar la "solución" para mover el cuadro de diálogo de la interfaz de usuario de jQuery dentro del formulario a través de la manipulación DOM de jQuery. Esto no parece solucionar el problema.
¡Gracias! ¡Agradezco cualquier ayuda!
HTML
<html>
<head></head>
<body>
<form action="http://www.google.com/index.html" method="post">
<input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
<br /><br /><br />
The button below submits the form correctly if you click it.<br />
However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
</b><br />
<input type="submit" value="Submit Form" id="btnSubmitForm" />
<input type="hidden" id="hdnEmployeeChosen" value="" />
</form>
<div id="divPopup" class="dialogClass" style="display: none;">
Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
<br /><br />
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
Weird Al Yankovic
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
Count Dracula
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="David" />
David Copperfield
</div>
</div>
</body>
JavaScript
$(document).ready(function ()
{
var jqueryDialog = $(''#divPopup'')
.dialog({
autoOpen: false,
modal: true,
title: ''My Dialog'',
width: 300,
height: 300,
draggable: false,
resizable: false
});
// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));
$(''#btnOpenDialog'').click(function () {
jqueryDialog.dialog(''open'');
});
$(''.pickButton'').click(function () {
// Put picked value into hidden field
var pickedEmployee = $(this).attr(''employeeName'');
$(''#hdnEmployeeChosen'').val(pickedEmployee);
// Try to cause a submit (ASP.NET postback in my case)
// THIS PART DOES NOT WORK.................
$(''#btnSubmitForm'').click();
//alert($(''#hdnEmployeeChosen'').val());
});
});
CSS
form {
margin: 5px;
border: 1px solid black;
background-color: #EEE;
padding: 15px 5px;
}
.dialogClass {
border: 1px solid black;
padding: 5px;
margin: 5px;
background-color: LightBlue;
font-size: 14px;
}
.pickButton {
margin-right: 5px;
}
.divOptions {
margin-bottom: 3px;
}
Asigna un atributo id a tu formulario:
<form id="myForm" action="http://www.google.com/index.html" method="post">
luego envíe el formulario:
$(''.pickButton'').click(function (e) {
e.preventDefault();
$(''#myForm'').submit();
// more code
}
Esto podría ser un error, depende de tu versión de jQuery
mira este artículo sobre el mismo problema
En todo caso, como quiera enviar su formulario, la forma más corta es usar el método .submit() .
No veo el código para el evento Click del botón Enviar.
En lugar de
$(''#btnSubmitForm'').click();
Tratar
$(''form'').submit();
O envíe el formulario en el controlador de evento click de su botón de envío.
Si alguien todavía está buscando una respuesta, aquí hay algo que funcionó para mí.
setTimeout ("$ (''#" + id + "'') .click ();", 0);
id es e.currentTarget.id donde el evento es clic del botón de enviar. Pase esa identificación al método que tiene que desencadenar el evento click.
.trigger ("click") no activa la devolución de datos, pero el código anterior sí lo hace.
porque copia Múltiple oject. para que pueda usar: $(''[id="btnCreate"]'').last().trigger(''submit'');
último método obtener el último elemento.
actualiza $(''#btnSubmitForm'').click();
intente esto: $(''[id="btnSubmitForm"]'').last().trigger(''click'');
$(''[id="btnSubmitForm"]'') obtiene la misma ID para btnSubmitForm.
por ejemplo:
$("#dialog").dialog({
autoOpen: false,
//maxWidth: 600,
//maxHeight: 500,
minWidth: 580,
width: 580,
height: 500,
title: "titleDemo",
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
modal: true,
buttons: {
"Create": {
text: "OK",
id: "btnCreates",
click: function (event) {
$(''[id="btnCreate"]'').last().trigger(''submit'');
}
},
Cancel: function () {
$(this).dialog("close");
}
}
});
El problema se debe al uso de un elemento id como selector ... Cuando se llama al diálogo jquery ui, se copia en el bloque deseado en un contenedor generado, esto significa que los identificadores específicos como #form_name ahora tendrán duplicados que confunden el selector jquery ...
mi solución sería cambiar a un identificador de clase, luego usar una ruta más específica para seleccionar el botón ex: $ (jQuery_dialog_box. class name) .submit () (o haga clic en ())
El diálogo de IU de Jquery por defecto evita que se envíen botones (al menos en base a mi experiencia hasta el momento). Dicho esto, me di cuenta de que si cambias el "comportamiento de envío" en cualquier botón a "False" a través de Visual Studio, entonces funciona. Sé que esto es totalmente contrario a lo que debería ser, pero si haces esto, los botones dentro del cuadro de diálogo de JQuery UI se publicarán y funcionarán.
También descubrí después de un par de horas que los campos dentro de un cuadro de diálogo JQUI no son reconocidos en ASP.net en la parte posterior de la publicación, a menos que invoque el método de destrucción en el objeto de diálogo JQ UI de Jquery.
Realmente me gustaba este control hasta que comencé a entrar en los detalles de usarlo con una aplicación real y que no sean ventanas emergentes básicas. No estoy seguro de que este control esté totalmente listo para el horario estelar.
Acabo de tener un problema similar en el que podía pasar por la ejecución del botón de envío correcto, pero el formulario simplemente no se enviaba. Después de pasar por el código de diálogo de jquery y no encontrar cómo evitar que el evento se propague, decidí hacer lo obvio y ocultar el cuadro de diálogo justo antes del envío. Funciona en tu violín también: http://jsfiddle.net/Q4GgZ/1/
jqueryDialog.dialog(''close''); // <- THIS WORKS
$(''#btnSubmitForm'').click();
Como mencionó LouD, la solución es cerrar el cuadro de diálogo antes de "hacer clic" en el botón. En cuanto a por qué esto arregla algo, necesita profundizar en el origen de JQuery UI. En la versión 1.8.9 hay este código para la superposición modal:
events: c.map("focus,mousedown,mouseup,keydown,keypress,click".split(","), function (a) {
return a + ".dialog-overlay"
}).join(" "),
...
c(document).bind(c.ui.dialog.overlay.events, function (d) {
if (c(d.target).zIndex() < c.ui.dialog.overlay.maxZ) return false
})
Se devuelve falso (básicamente, preventDefault() ) para todos los eventos de entrada en los elementos "debajo" de él. No es solo un div gigante que impide que el usuario haga clic en las cosas al estar "sobre" ellos. También bloquea manualmente todos los eventos de entrada, ya sea que el usuario o su JS los haya generado.
Al cerrar su cuadro de diálogo modal se destruye la superposición, lo que permite que los eventos de clic de JS se propaguen por completo y envíen el formulario.
Llegué aquí con un problema muy similar, pero como perdí algunas horas con este problema, lo publico para futuros lectores.
Hay algunos problemas con este código:
Si el diálogo es modal, parece que no puede activar eventos para otros elementos fuera del diálogo. Si haces el diálogo con la opción modal: falso, el disparador funcionará bien. Quiero que el diálogo sea modal, por lo que esta solución no es una opción.
Como el diálogo es modal, debe colocar el botón dentro del cuadro de diálogo. Puedes ocultarlo y disparar a través de tus botones clasificados. Modifico la sección de Java y probé el violín y funcionó para su caso.
HTML
<form action="http://www.google.com/index.html" method="post">
<input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
<br /><br /><br />
The button below submits the form correctly if you click it.<br />
However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
</b><br />
<input type="hidden" id="hdnEmployeeChosen" value="" />
<div id="divPopup" class="dialogClass" style="display: none;">
Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
<br /><br />
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
Weird Al Yankovic
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
Count Dracula
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="David" />
David Copperfield
</div>
<input type="submit" value="Submit Form" id="btnSubmitForm" style="display:none"/>
</div>
</form>
</body>
JAVASCRIPT
$(document).ready(function ()
{
var jqueryDialog = $(''#divPopup'')
.dialog({
autoOpen: false,
modal: true,
title: ''My Dialog'',
width: 300,
height: 300,
draggable: false,
resizable: false
});
// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));
$(''#btnOpenDialog'').click(function () {
jqueryDialog.dialog(''open'');
});
$(''.pickButton'').click(function () {
// Put picked value into hidden field
var pickedEmployee = $(this).attr(''employeeName'');
$(''#hdnEmployeeChosen'').val(pickedEmployee);
console.log("click button dialog");
// Try to cause a submit (ASP.NET postback in my case)
// THIS PART DOES NOT WORK.................
$(''#btnSubmitForm'')[0].click();
console.log("after click");
//alert($(''#hdnEmployeeChosen'').val());
});
});
Puedes ver en el violín aquí
La solución simple a este problema es establecer el evento de envío después de abrir el diálogo. No es necesario cerrar el diálogo antes de que se active el evento de envío.
Cuando el diálogo se superpone durante el método .open (), todos los eventos están deshabilitados. Configure los eventos que necesita después de abrir el diálogo.
$(''#btnOpenDialog'').click(function () {
jqueryDialog.dialog(''open'');
// now setup events
$(''#btnSubmitForm'').on(''click'', function() {
// process submit event
});
});
Se hace clic en el botón Enviar. Agregué el siguiente código a tu script ...
$("#btnSubmitForm").on("click", function() {
console.log("submit!");
});
y eso muestra que se hace clic en el botón.
Como dijo Sushanth, use el método submit() del formulario, o si desea desencadenar la devolución de datos para asp.net, luego mire en __doPostBack()
Tuve el mismo problema y las siguientes sugerencias me funcionaron.
- Adjunte el cuadro de diálogo al formulario
$(this).parent().appendTo("form:first"); - Adjunte el cuadro de diálogo al formulario dentro de la opción
opendel diálogo
El crédito va a Homam y su comentario sobre otra pregunta .
Vea abajo JavaScript
var jqueryDialog = $(''#divPopup'')
.dialog({
autoOpen: false,
modal: true,
title: ''My Dialog'',
width: 300,
height: 300,
draggable: false,
resizable: false,
open: function() {
$(this).parent().appendTo(''form:first'');
}
});