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

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

Итак, я только начал использовать 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");
    } 

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


person Giovanni    schedule 12.10.2018    source источник


Ответы (1)


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

person Giovanni    schedule 12.10.2018