Создание собственного диалогового окна подтверждения с помощью ajaxConfirmMessage в octobercms - PullRequest
Новая
       5

Создание собственного диалогового окна подтверждения с помощью ajaxConfirmMessage в octobercms

0 голосов
/ 02 ноября 2019

Мне нужна помощь в том, как создать настраиваемое диалоговое окно подтверждения, используя ajaxConfirmMessage вместо подтверждения браузера по умолчанию, как указано в документации.

ajaxConfirmMessage , запущенный приобъект окна, когда опция подтверждения дана. Обработчик получает 2 параметра: объект события и текстовое сообщение, назначенное обработчику как часть опции подтверждения. Это полезно для реализации пользовательской логики / интерфейса подтверждения вместо встроенного поля подтверждения javascript.

У меня есть это сейчас 

$(window).on('ajaxConfirmMessage', function(event, message) {
    // Stop the default confirm dialog
    event.preventDefault();

    // Okay Button
    $('#okay-button').click(function() {
        // Resolve the deferred object, this will trigger whatever was being confirmed
        event.promise.resolve();
    });

    // Cancel Button
    $('#cancel-button').click(function() {
        // Reject the object, this will cancel whatever was being confirmed
        event.promise.reject();
    });

    // Return a value so the framework knows we're handling the confirm
    return true;
});

Получил это от поиска в Google.

Это моя кнопка 

 <a href="" class="btn btn-sm btn-outline-danger" data-request ="onDelete" data-request-success="alert('Successfully Deleted')" data-request-data= "record: {{ post.id }}">Delete</a>

Мне просто нужно несколько советов о том, как заставить это работать, используя модальный загрузчик, который показывает кнопки okay и cancel. Я думаю, что так оно и должно быть, или есть лучший способ.

1 Ответ

1 голос
/ 02 ноября 2019

Пожалуйста, следуйте этой структуре кода, она будет работать для вас.

Я добавляю базовую структуру, здесь вы можете изменить ее, как вам нравится. Я просто создаю страницу и добавляю этот код прямо на страницу.

  • Убедитесь, что ваш макет имеет {% scripts %}, поэтому добавленный js script using {% put scripts %} добавится в конец страницы.
  • Я предполагаю, что jQuery and bootstrap-Js уже доступно на странице.

1. HTML-раздел страницы 

<div class="container">    
    <!-- Button -->
    <button 
        type="button" 
        class="btn btn btn-primary" 
        data-request ="onAjaxCall" 
        data-request-success="alert('Successfully Deleted')" 
        data-request-confirm="test-msg"
    >
        Confirm
    </button>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="okay-button">Ok</button>
        <button type="button" class="btn btn-warning" id="cancel-button">Cancel</button>
      </div>
    </div>
  </div>
</div>

{% put scripts %}
<script>
    $(window).on('ajaxConfirmMessage', function(event, message) {
        // Stop the default confirm dialog
        event.preventDefault();    

        // open our own bootstrap modal
        $('#myModal').modal('show'); 

        // Okay Button. we will unbind if any events are attached to it first
        // reattach click event - this is required as this code will call each time
        $('#okay-button').unbind().click(function() {        
            // hide modal
            $('#myModal').modal('hide'); 
            // Resolve the deferred object, this will trigger whatever was being confirmed
            event.promise.resolve();
        });

        // Cancel Button
        $('#cancel-button').unbind().click(function() {        
            // hide modal
            $('#myModal').modal('hide'); 
            // Reject the object, this will cancel whatever was being confirmed            
            event.promise.reject();        
        });

        // Return a value so the framework knows we're handling the confirm
        return true;
    });
</script>
{% endput %}

2. Раздел кода просто возвращает фиктивный успешный ответ. 

function onAjaxCall() {
    return ['result' => 'All Good!'];
}

Он покажет вам bootstrap modal as confirm dialog.

Если есть сомнения, пожалуйста, прокомментируйте.

...