custom - confirm javascript personalizado

Múltiples entradas en un Bootbox

Question

¿Cómo puedo tener 2 entradas en lugar de una en Bootstrap''s Bootbox?

Necesito recibir 2 valores en un diálogo modal.

Answer 1

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)
    }
})

Answer 2

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

http://jsfiddle.net/6vb7e224/2/

Answer 3

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>

Answer 4

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();
});

Answer 5

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);
});

Answer 6

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());
        }
    };

Answer 7

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!