seleccionar - Recomendación para el ejemplo de diálogo simple jQuery?
selectores en jquery (3)
Aprecio las respuestas de todos, y los vi a todos trabajando en línea en JsFiddle y jqueryui.com. Para lo que buscaba, por lo que puedo decir, aquí está la solución más concisa que pude poner en marcha, utilizando todas las funciones remotas y basada en la solución en java2s.com:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript">
$(function() {
// Allows user to click Enter key in text field and it will submit the dialog
$(''#myDialog'').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
getResponse();
}
});
var cancel = function() {
$("#myDialog").dialog("close");
}
var getResponse = function() {
var answer;
/*// for radio-button selection
$("input").each(function(){
(this.checked == true) ? answer = $(this).val() : null;
});
*/
answer = $("#first_name").val();
// This adds it dynamically
// $("<p>").text(answer).insertAfter($("#poll"));
$("#result").text(answer);
$("#myDialog").dialog("close");
}
var dialogOpts = {
modal : true,
closeOnEscape : true,
buttons : {
"Done" : getResponse,
"Cancel" : cancel
},
autoOpen : false
};
$("#myDialog").dialog(dialogOpts);
$("#poll").click(function() {
$("#myDialog").dialog("open");
});
});
</script>
</head>
<body>
<button id="poll">Poll</button>
<div id="myDialog" class="flora" title="This is the title">
<p>Question?</p>
<label for="yes">Yes!</label><input type="radio" id="yes" value="yes25" name="question"><br>
<label for="no">No!</label><input type="radio" id="no" value="no" name="question">
<br/>
First Name: <input type="text" id="first_name" />
</div>
<div style=''color: green;'' id=''result''>
</div>
</body>
</html>
Buscando por todas partes las palabras clave "ejemplo de diálogo de jQuery simple" - con todas las respuestas, no he visto ningún ejemplo simple y significativo en un documento .html independiente sucinto. Incluso descargando varios libros completos en jQuery, no vi ningún ejemplo.
Los ejemplos que encontré son para un diálogo que muestra un mensaje de alerta "Hola mundo" ... no es muy útil para la interacción. Creo que el ejemplo del mundo real sería algo que captura la entrada y la envía de vuelta a la página sin necesidad de enviarla de nuevo al servidor. La publicación del servidor puede ser un paso posterior.
¿Alguien puede recomendar una referencia de código en este sentido? Gracias
EDITAR # 3
He pegado en una solución con un nuevo post a continuación. Es un archivo completamente autocontenido, con inclusión de listas para usar. Está funcionando para mí.
EDITAR # 2
Actualicé el bloque principal para contener el css faltante. El contenido del diálogo ahora no se muestra, pero aún así el cuadro de diálogo no se abre ... y no hay errores en la consola.
<style>
#dialog {
display:none;
}
</style>
EDITAR ~ INTRODUCIR # 1
Basado en la respuesta de @ rob-schmuecker, probé el siguiente código a continuación. Veo que funciona en jsFiddle, pero mi implementación no funciona. En mi navegador la consola no muestra ningún error. Pero hay dos problemas que estoy viendo:
- el contenido del cuadro de diálogo div se carga directamente en la página
- hacer clic en el botón de diálogo de carga no funciona
¿Alguna idea de lo que está mal con este código? .. es tal vez mi jquery incluye llamadas?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
//Initialize dialog
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
//Open it when #opener is clicked
$("#opener").click(function () {
$("#dialog").dialog("open");
});
//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$(''.formSaver'').on(''click'', function () {
$(''.myTarget'').text($(''.myInput'').val());
$("#dialog").dialog(''close'');
});
</script>
<style>
#dialog {
display:none;
}
</style>
</head>
<body>
<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ''x'' icon.</p>
<input class="myInput" type="text" />
<button class="formSaver">Save me!</button>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
La razón por la que no funciona es porque sus llamadas a jQuery y jQuery UI son así:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
Pero la URL para cargarla es:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
Ponga la URL correcta y funcionará.
ADICIÓN:
El problema está en su segunda llamada a jQuery:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js
Además del hecho de que jQuery se carga desde https, no hay jquery.js, es jquery.min.js.
Ok aqui va
Demostración: http://jsfiddle.net/robschmuecker/9z2ag/1/
HTML:
<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ''x'' icon.</p>
<input class="myInput" type="text" />
<button class="formSaver">Save me!</button>
</div>
<button id="opener">Open Dialog</button>
El diálogo comienza escondido con CSS:
#dialog {
display:none;
}
Entonces hacemos un poco de Javascript:
//Initialize dialog
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
//Open it when #opener is clicked
$("#opener").click(function () {
$("#dialog").dialog("open");
});
//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$(''.formSaver'').on(''click'', function () {
$(''.myTarget'').text($(''.myInput'').val());
$("#dialog").dialog(''close'');
});