Bootbox - как динамически добавить кнопку? - PullRequest
Новая
       52

Bootbox - как динамически добавить кнопку?

1 голос
/ 13 февраля 2020

Как только пользователь отправляет форму, должно появиться сообщение с предупреждением «Это может занять до минуты ...»

Затем, после завершения серверной работы, текст сообщения должен измениться. на «Готово» и должна появиться кнопка «ОК».

Я могу создать диалог с кнопкой, но я не уверен, как его можно динамически добавить? 

dialog = bootbox.alert({
        title: 'This might take up to a minute, please wait.',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Submitting...</p>',
        centerVertical: true,
        backdrop: true,
        size: 'large',
        callback: function() {

        }
    }

)

Как я могу это реализовать? Нужно ли создавать новый диалог или переписывать существующий?

Bootbox. js

1 Ответ

1 голос
/ 25 февраля 2020

Вот пример, основанный на вашем коде , который использует время ожидания для вызова c AJAX: 

$(function(){
    let dialog = bootbox.alert({
      title: 'This might take up to a minute, please wait.',
      message: '<p><i class="fa fa-spin fa-spinner"></i> Submitting...</p>',
      centerVertical: true,
      size: 'large',
      closeButton: false,
      buttons: {
        ok: {
          className: 'btn-primary disabled'
        }
      },
      callback: function() {

      }
    });

    setTimeout(function(){ 
        dialog.find('.bootbox-body').html('<p>Done!</p>');
        dialog.find('.bootbox-accept').removeClass('disabled');
    }, 5000);
});

Предполагается, что вы используете bootbox.alert вспомогательный, а не пользовательский диалог, кнопка ОК имеет класс .bootbox-accept, который мы можем использовать в качестве цели. Все содержимое, назначенное параметру message, помещается в элемент div с классом .bootbox-body, на который мы также можем ориентироваться.

Это по большей части тот же процесс, что и .init () пример: http://bootboxjs.com/examples.html#custom -dialog-init

Если вы хотите автоматически закрыть диалоговое окно после завершения фонового процесса, пример наложения в значительной степени только это: 

let timeout = 3000; // 3 seconds
let dialog = bootbox.dialog({
    message: '<p class="text-center mb-0">Please wait while we do something...</p>',
    closeButton: false
});

setTimeout(function () {
    dialog.modal('hide');
}, timeout);
...