Change data-confirm dialog implementation to callback style.

[tanakahisateru]

To create custom dialog for yii.confirm, current design is so inconvenient.

JSe's standard confirm() function can block event handling until user input. But most of custom modal UI (for example using Bootbox.js http://bootboxjs.com/) can't control script processing. I suggest to change handling data-confirm and data-method from return-style to callback-style.

I've succeeded to create my dialog box using Bootstrap's Modal component by my callback version.

<div id="my-confirm" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary confirm-ok">OK</button>
            </div>
        </div>
    </div>
</div>

var $confirmModal = jQuery("#my-confirm");

$confirmModal.find(".confirm-ok").on("click", function() {
    var action = $confirmModal.data("ok-action");
    if (action !== undefined) {
        $confirmModal.on("hidden.bs.modal", function() {
            $confirmModal.off("hidden.bs.modal", arguments.callee);
            action();
        });
    }
    $confirmModal.modal("hide");
});

yii.confirm = function(message, action) {
    $confirmModal.find(".modal-body p").text(message);
    $confirmModal.data("ok-action", action);
    $confirmModal.modal("show");
};

[tanakahisateru]

<?= Html::a('Do Something', ['my-action', 'id' => $id], [
    'class' => 'btn btn-primary',
    'data' => [
        'confirm' => 'Are you sure you want to do?',
        'method' => 'post',
    ],
]) ?>

[Ragazzo]

i think this one can be very useful since we have default bootstrap 3 support, also can you include your guide in some of widgets guide?

[johonunu]

Have you tried this:

// ADD BOOTSTRAP DIALOGS TO CONFIRM DIALOGS
yii.allowAction = function ($e) {
  var message = $e.data('confirm');

  if($e.data('confirmed') || message === undefined) return true;

  $.confirm({
      text: message,
      confirm: function(button) {
        $e.data('confirmed','true');
        yii.handleAction($e);
      },
      cancel: function(button) {

      },
      confirmButton: '<span class="glyphicon glyphicon-ok"></span>',
      cancelButton: '<span class="glyphicon glyphicon-remove"></span>',
  });
  return false;
};

[tanakahisateru]

I've never thought such. I guessed that handleAction and allowAction are accessed as private. I thought only yii.confirm can be overridden. Calling handleAction in allowAction and ignorering confirm are right way? If so, your way is very cool for me.

I think it's a design issue for users but it also relates to development stability. Though I like clean design passing an action as callback, but in this beta phase of dev, modification may be danger.

[johonunu]

I think it could be done in better way. But this is how I implemented it in my cms, so I wanted to share ;)

[Ragazzo]

any news on this one? Also i would like to see here something with ajax update or ajax submit form, can Yii2 provide it out of the box, so we will not be searching for some good solution?

[tanakahisateru]

TODO: checking to use it with Ajax update.

[Ragazzo]

@tanakahisateru could be useful i think . Plus one that used here.

[Ragazzo]

@qiangxue @samdark maybe we should also implement ajax saving for modal too? Something like this one .

[qiangxue]

@tanakahisateru Thanks.
@Ragazzo for ajax form submission, you normally need to add callbacks to handle the ajax return, which is not appropriate to be specified via data attributes.

[Ragazzo]

i was talking only about ajax saving for modals, so they will trigger ajax request and then replace content with the given one and so on . This could be very helpful

[adiramardiani]

Sorry for my stupid question, I following Yii 2.0: Escape from Default's Yii2 Delete Confirm Box Article and the function is changed now in Dropped yii.allowAction() and modified yii.confirm()

Is there someone here, can explain custom method to override a yii confirm method to integrated with bootbox.js ?

[tanakahisateru]

Sorry in only Japanese, I wrote an article how to do it last night.
http://qiita.com/tanakahisateru/items/be28b7bed4566ce8fa99

[adiramardiani]

thanks @tanakahisateru 👍