использование sweetalert2 с пользовательским селектором обратного вызова / jquery - PullRequest
Новая
       10

использование sweetalert2 с пользовательским селектором обратного вызова / jquery

0 голосов
/ 13 октября 2018

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

Так что я только начал использовать sweetalert2объединить с моими существующими функциями jquery (которые успешно используются уже довольно давно).Я могу заставить все работать в sweetalert2 и мои существующие обратные вызовы jquery работать ... но не вместе.По сути, порядок событий будет следующим: нажмите кнопку «Удалить» -> откроется модальное окно -> нажмите «Подтвердить» -> «Удалить изображение» -> закрыть модальное окно -> скрыть миниатюру изображения -> жизнь удалась.В качестве альтернативы можно изменить порядок закрытия модального окна и скрытия миниатюры.

Урезанный html: 

        <div class="recordC">
            <div><a data-fancybox="image_group" href="a/ path" class="showGalImg" ><img src="path/ to/ thumbnail-image"/></a></div>
             <li><a id="del-10792-01522" href="#" class="delbuttonC" >DELETE</a></li>
        </div>

Обратите внимание, что идентификаторы генерируются динамически, и существует несколько div.recordC (один длякаждое изображение)

jquery / sweetalert2: 

    $('.delbuttonC').click(function() {
    var del_id = $(this).attr("id");
    var photoId = 'id=' + del_id;
    deletePhoto(photoId);

    e.preventDefault();
  });

  function deletePhoto(photoId) {
    swal({
      title: "Are you sure?", 
      text: "Are you sure you want to delete this photo?", 
      type: "warning",
      showCancelButton: true,
      closeOnConfirm: false,
      confirmButtonText: "Yes, delete it!",
      cancelButtonColor: '#d33',
      confirmButtonColor: "#3085d6 ",
      preConfirm: function() {
          return new Promise(function(resolve) {
      $.ajax({
        url: "path/ to/ delete/ function",
        type: "GET",
        data: photoId,
        success: function() {
            swal({
                title: 'Deleted!', 
                text: 'Your file has been deleted!', 
                type: 'success'}).then(function () { 
                        $(this).parents(".recordC").animate({ backgroundColor: "#fbc7c7" }, "fast")
                        .animate({ opacity: "hide" }, "slow");
                        });
        } // success:
      }); // $.ajax
          }); // Promise()
      },  // preConfirm:
    }); // swal
  } // deletePhoto

Откроется модальное окно, работает $ .ajax и успешно работает sweetalert2.В моей оригинальной функции jquery обратный вызов также работает после удаления изображения.Но, блин, могу ли я заставить его работать с swal ().

Я также попытался: 

        success: function() {
        swal('Deleted!', 'Your file has been deleted!', 'success');
        $(this).parents(".recordC").animate({ backgroundColor: "#fbc7c7" }, "fast")
                    .animate({ opacity: "hide" }, "slow");
    }

, и я поменял местами порядок 2 обратных вызовов, а также переместил свой обратный вызов после выполнения $ .ajax (где он находится в моем текущемверсия, которая работает).Я также изменил $ (this) на $ ("#" + del_id) ... и многое другое.Все эти перестановки получены из различных вопросов, задаваемых через Интернет!В каждом внесенном мной изменении все с sweetalert2 работает, и мне удается удалить изображение ... Мне просто не удается скрыть div.recordC.Я знаю, что должен быть очень простой ответ, который я не могу найти :-(

1 Ответ

0 голосов
/ 13 октября 2018

Решил мой вопрос ... не что иное, как не добавление var del_id в функцию deletePhoto ().

...