SweetAlert2 и обещания

Я только что впервые закончил возиться с обещаниями внутри SWAL2 и благодаря этому добился серьезных успехов в улучшении части UX моего веб-приложения. Я много использовал модальные окна SWAL2 и обнаружил, что промисы лучше всего работают, когда пользователь вводит данные внутри модального окна SWAL и проверяет этот ввод.

Я использую JQuery 3.2.1 и PHP версии 5.6.

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

Моя общая цель состояла в том, чтобы заставить пользователей вводить остальную информацию, которая мне нужна от них, после того, как они впервые войдут в свой профиль (и/или у них есть пустые поля для необходимых значений базы данных).

Вот основа того, что я использую Promises и Ajax для выполнения на макроуровне:

swal({...}).then(function(result){ //introduction modal

    swal({...}).then(function(result){ //start getting required info

        swal({...}).then(function(result){ //get some more required info

        }, function (dismiss) {}).catch(swal.noop);

    }, function (dismiss) {}).catch(swal.noop);

}, function (dismiss) {}).catch(swal.noop);

У каждого из этих модальных окон есть разные входные данные, которые мне нужны и которые мне нужно проверить, за исключением первого.

swal({
    html:'Welcome to my web app!',
    imageUrl: '../path-to-image.png',
    imageWidth: 350,
    imageAlt: 'My Logo',
    animation: false,
    showCancelButton: false,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Complete My Profile',
    cancelButtonText: 'Cancel',
    confirmButtonClass: 'btn btn-success',
    cancelButtonClass: 'btn btn-danger',
    buttonsStyling: false,
    focusConfirm: false
    }).then(function(result) {

После моего приветствия «Добро пожаловать в веб-приложение XYZ» я сразу же начинаю свой следующий модальный режим. это супер просто. Либо вызовите следующее модальное окно, если пользователь нажмет единственную зеленую кнопку, которую он может нажать, либо отобразите другое модальное окно, если он закроется, щелкнув его. Мой код продолжается:

swal({
    title: 'Your Basic Information',
    html:
    '<div class="form-group"><input type="text" class="form-control" id="FName" name="FName" placeholder="Last Name"></div>'+
    '<div class="form-group"><input type="text" class="phone_us form-control" maxlength="14" data-mask="(000) 000-0000" id="userPhone" name="userPhone" placeholder="Phone Number"></div>'+
    '<div class="form-group"><div class="input-group"><span class="input-group-addon">$</span><input type="text" class="money form-control" id="avgPrice" name="avgPrice" data-mask="#,##0.00" data-mask-reverse="true" maxlength="5" placeholder="Average Price of your Advice"/></div></div>'+
    '<div class="form-group"><textarea class="form-control" name="FInfo" id="FInfo" rows="6" placeholder="Give people a summary of who you are and what kind of great stuff you can do for them."></textarea></div>'+
    '<div class="form-group"><label for="FType">Type of kitchen</label><select class="form-control" name="FType" id="FType"><option>--Select--</option><option>Type 1</option><option>Type 2</option><option>Type 3</option><option>Type 4</option><option>Type 5</option></select></div>',
    showCancelButton: false,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Update and Continue',
    cancelButtonText: 'Cancel',
    confirmButtonClass: 'btn btn-success',
    cancelButtonClass: 'btn btn-danger',
    buttonsStyling: false,
    focusConfirm: false,
    preConfirm: function () {

    //Set our Ajax variables in the start of preConfirm
    //We could've just made a form element as part of the html, and used a FormData class or form_name.serialize(). The current way is for illustration.
    var userPhone = $('#userPhone').val(), FName = $('#FName').val(), avgPrice = $('#avgPrice').val(), FInfo = $('#FInfo').val(), FType = $('#FType').val(), retData = [];

Все перечисленные выше переменные являются входными значениями, кроме retData. retData — это массив, который будет использоваться для хранения строк ошибок, которые я получаю от PHP. Затем я могу указать JQuery выполнить итерацию по массиву и отобразить эти ошибки в виде всплывающих уведомлений. Есть способы сделать это с помощью JSON, да.

А вот и мясо и картошка того, к чему я пытаюсь добраться. Теперь мы можем использовать Promise, чтобы продолжать выполнять наш Ajax-запрос при каждом щелчке пользователя и оставлять модальное окно открытым до тех пор, пока не будет выполнено определенное условие (вся информация проверена и нет ошибок).

return new Promise(function (resolve) {
    //Run our actual ajax request inside the promise. Keeps the SWAL2 modal open
    $.ajax({
    url: prefix+'settings_val_first_modal.php',
    type: 'POST',
    data: ({userPhone: userPhone, FName: FName, avgPrice: avgPrice, FInfo: FInfo, FType: FType}),
    success: function(show) {

        retData.push.apply(retData, show.split(","));

        //Define the condition that keeps us in the promise.

        if(Number(retData[0]) === 0){

            //Remove the zero from our error array
            retData.shift();

            $.each(retData, function(i, val){

                //Display each array element as separate toastr notification
                toastr.error(retData[i]);

            });

        } else{

            //Define the condition that breaks us out of the promise
            resolve(true);

        }
    }
  });
});
}

Затем, как только это условие выполнено, мы можем двигаться дальше по модальной цепочке, используя

}).then(function(result){

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

swal('You\'re all finished!','You now have full access to XYZ web app!','success');

затем мы обязательно определяем нашу функцию отклонения для нашего второго модального окна. В моем случае модальное окно с информацией:

}, function (dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
    if (dismiss === 'overlay') {
        swal(
            'Please Finish Your Profile',
            'You need to have a completed profile before you can start using XYZ web application',
            'info'
        );
    }
}).catch(swal.noop);

И вот оно. Я знаю, что это довольно длинное объяснение, но я считаю, что такое использование наиболее подходит для обещаний и SWAL2. Завершая код, нам нужно определить случай, когда первое модальное окно закрывается.

}, function (dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
    if (dismiss === 'overlay') {
        swal(
            'Please Contemplate Your Life',
            'Don\'t make me have to toggle this modal again! I\'d rather not!',
            'info'
        );
    }
}).catch(swal.noop);

В конце концов, я начал с одной цели: улучшить пользовательский опыт. Обещания здесь работают, потому что в противном случае модальное окно закрывалось бы после каждого нажатия кнопки, и пользователю пришлось бы заново запускать всю цепочку, если бы он сделал что-то настолько простое, как не включать @ с вводом электронной почты или что-то в этом роде.

Обещания позволяют нам держать модальное окно SWAL2 на экране до тех пор, пока не будет выполнено какое-то условие. условие может быть любым, в моем случае это была проверка формы в PHP, которая возвращала строки в javascript. Если входные данные были в порядке, строка равна «1». В противном случае строка содержит что-то вроде «0», «Неверный номер телефона», «Учетная запись уже связана с этим адресом электронной почты», «и т. д.». Затем JQuery создает массив, удаляет начальные нули и выводит всплывающие уведомления для каждой ошибки в массиве.

Я надеюсь, что это поможет вам в использовании SWAL2.