Некалькі ўваходаў у Bootbox

Як я магу мець 2 ўваходу замест аднаго ў Bootbox Bootstrap ў?

Мне трэба атрымаць 2 значэння ў мадальнасці дыялогу.

20

7 адказы

На самай справе, ёсць больш просты спосаб, які не патрабуе ад вас, каб змяніць код bootbox.

Радок вы перадаеце пры стварэнні bootbox не павінен быць толькі тэкст: ён таксама можа быць HTML-код. Гэта азначае, што вы можаце ўключаць у сябе амаль усё, што ў скрынцы.

Каб змясціць карыстацкую форму ў bootbox, вы можаце стварыць яго наступным чынам:

bootbox.confirm("<form id='infos' action=''>\
    First name:<input type='text' name='first_name' />
\ Last name:<input type='text' name='last_name' />\ </form>", function(result) { if(result) $('#infos').submit(); });
41
дададзена

I just made function for that, check it out - here

прыклад выкарыстання

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)
    }
})
7
дададзена
Крута асаблівасць! тэкставыя ўваходы разбітыя, калі вы спрабуеце дадаць запаўняльнікі, любыя планы па абнаўленні яго @kitty?
дададзена аўтар Havihavi, крыніца
Гэта дапамагло, дзякуй шмат
дададзена аўтар BoCyrill, крыніца
@Havihavi я абавязкова паглядзіце на яго, калі ласка, апішыце праблему на github.com/kittee/bootbox/ пытанні
дададзена аўтар igor, крыніца

Вы павінны напісаць сваю ўласную функцыю, якая загружае дыялогавую функцыю з bootbox.

The easiest way is to copy prompt function from source: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js

і змяніць гэтую частку для дадання новага ўваходу (ці ўсё, што трэба)

   //let's keep a reference to the form object for later
    var form = $("<form></form>");
    form.append("<input autocomplete=off type=text value='" + defaultVal + "' />");

і гэтая частка для атрымання выніку:

    var confirmCallback = function() {
        if (typeof cb === 'function') {
            return cb(form.find("input[type=text]").val());
        }
    };
2
дададзена
Вялікі адказ !! дзякуй :)
дададзена аўтар Ashok Raj, крыніца

Для мяне гэта самы чысты спосаб зрабіць гэта:

var form = $('<form><input name="usernameInput"/></form>');
bootbox.alert(form,function(){
    var username = form.find('input[name=usernameInput]').val();
    console.log(username);
});
2
дададзена

Вось просты прыклад таго, што вам трэба (з дапамогай накаўту)

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

Just add as many fields and bind them in the view model

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

1
дададзена

Стварыць схаваны DIV з формай у HTML і ўвесці гэты HTML для bootbox паведамленні. Snippet ніжэй.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>
1
дададзена

haradwaith Has the best solution for posting form data from a bootbox. Because it works, it's simple and because he demonstrates how to Actually Submit the Form. His solution:

bootbox.confirm("<form id='infos' action=''>\
    First name:<input type='text' name='first_name' />
\ Last name:<input type='text' name='last_name' />\ </form>", function(result) { if(result) $('#infos').submit(); });

перасоўванне<form> tag outside of the bootbox object allows the use of PHP when posting to self and to include hidden inputs without all the clutter.

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

Now you can check for $_POST['created']

<?php
if(isset($_POST['created'])){
     echo "Timestamp: ".$_POST['created'];//great things happen here
    }
?>

You can create the form anywhere in the body tag, it won't display because the inputs are hidden.

Hope that helps!

0
дададзена