custom - confirm javascript personalizado
Múltiples entradas en un Bootbox (7)
Acabo de hacer una función para eso, échale un vistazo - here
Ejemplo de uso
bootbox.form({
title: ''User details'',
fields: {
name: {
label: ''Name'',
value: ''John Connor'',
type: ''text''
},
email: {
label: ''E-mail'',
type: ''email'',
value: ''[email protected]''
},
type: {
label: ''Type'',
type: ''select'',
options: [
{value: 1, text: ''Human''},
{value: 2, text: ''Robot''}
]
},
alive: {
label: ''Is alive'',
type: ''checkbox'',
value: true
},
loves: {
label: ''Loves'',
type: ''checkbox'',
value: [''bike'',''mom'',''vg''],
options: [
{value: ''bike'', text: ''Motorbike''},
{value: ''mom'', text: ''His mom''},
{value: ''vg'', text: ''Video games''},
{value: ''kill'', text: ''Killing people''}
]
},
passwd: {
label: ''Password'',
type: ''password''
},
desc: {
label: ''Description'',
type: ''textarea''
}
},
callback: function (values) {
console.log(values)
}
})
¿Cómo puedo tener 2 entradas en lugar de una en Bootstrap''s Bootbox?
Necesito recibir 2 valores en un diálogo modal.
Aquí hay un ejemplo básico de lo que necesitas (usando knockout)
<button data-bind="click: select">Button</button>
<script type="text/html" id="add-template">
<div style="display:none">
<input data-bind=''value: name'' placeholder="Name">
</div>
</script>
var viewModel = function () {
var self = this;
self.name = ko.observable();
self.select = function () {
var messageTemplate = $($("#add-template").html());
ko.applyBindings(self, messageTemplate.get(0));
messageTemplate.show();
bootbox.confirm({
title: "Add new",
message: messageTemplate,
callback: function (value) {
// do something
}
});
}
}
ko.applyBindings(new viewModel());
Solo agrega tantos campos y enlázalos en el modelo de vista
Cree div ocultos con formulario en HTML e inyecte este html en el mensaje de bootbox. Fragmento de abajo.
var buttonClick = function() {
var bootboxHtml = $(''#js-exampleDiv'').html().replace(''js-exampleForm'', ''js-bootboxForm'');
bootbox.confirm(bootboxHtml, function(result) {
console.log($(''#ex1'', ''.js-bootboxForm'').val());
console.log($(''#ex2'', ''.js-bootboxForm'').val());
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<div id="js-exampleDiv" hidden>
<form class="js-exampleForm">
<div class="col-sm-12">
<input placeholder="Example placeholder 1" id="ex1" />
</div>
<div class="col-sm-12">
<input placeholder="Example placeholder 2" id="ex2" />
</div>
</form>
</div>
<button onclick="buttonClick();">
Open bootbox confirm dialog.
</button>
En realidad, hay una forma más simple que no requiere que modifiques el código del bootbox.
La cadena que se pasa en la creación del bootbox no tiene que ser solo texto: también puede ser código html. Eso significa que puedes incluir casi todo en la caja.
Para poner un formulario personalizado en un bootbox, puede crearlo de la siguiente manera:
bootbox.confirm("<form id=''infos'' action=''''>/
First name:<input type=''text'' name=''first_name'' /><br/>/
Last name:<input type=''text'' name=''last_name'' />/
</form>", function(result) {
if(result)
$(''#infos'').submit();
});
Para mí, esta es la forma más limpia de hacerlo:
var form = $(''<form><input name="usernameInput"/></form>'');
bootbox.alert(form,function(){
var username = form.find(''input[name=usernameInput]'').val();
console.log(username);
});
Tienes que escribir tu propia función que cargará la función de diálogo desde el bootbox.
La forma más fácil es copiar la función de solicitud desde la fuente: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js
y cambia esta parte para agregar nuevas entradas (o lo que necesites)
// let''s keep a reference to the form object for later
var form = $("<form></form>");
form.append("<input autocomplete=off type=text value=''" + defaultVal + "'' />");
Y esta parte para obtener el resultado:
var confirmCallback = function() {
if (typeof cb === ''function'') {
return cb(form.find("input[type=text]").val());
}
};
haradwaith tiene la mejor solución para publicar datos de formulario desde un bootbox. Porque funciona, es simple y porque demuestra cómo presentar realmente el formulario. Su solución:
bootbox.confirm("<form id=''infos'' action=''''>/
First name:<input type=''text'' name=''first_name'' /><br/>/
Last name:<input type=''text'' name=''last_name'' />/
</form>", function(result) {
if(result)
$(''#infos'').submit();
});
Mover la etiqueta <form> fuera del objeto bootbox permite el uso de PHP cuando se publica a sí mismo e incluir entradas ocultas sin todo el desorden.
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" id="infos">
<input type=hidden form="infos" name="created" value="<?php echo date("Y-m-d H:i:s"); ?>" />
</form>
Ahora puedes verificar $ _POST [''created'']
<?php
if(isset($_POST[''created''])){
echo "Timestamp: ".$_POST[''created'']; // great things happen here
}
?>
Puede crear el formulario en cualquier parte de la etiqueta del cuerpo, no se mostrará porque las entradas están ocultas.
¡Espero que ayude!