Как запустить функцию в callback magnific popup?

366
27 декабря 2017, 22:40

На форме есть чекбокс, чек которого снимает disable с кнопки. Если форма вызывается по ajax (используется magnific popup), код не работает. Как можно его вызвать через callback? Пробовал так, не сработало.

$('.ajax-popup').magnificPopup({
        type: 'ajax',
        callbacks: {
            /*ajaxContentAdded: function() {
                var test = $('.ajax-popup').find('.js-check');
                test.on('click', function () {
                    $(this).parents('.js-check-parent').find('.js-button').prop('disabled', function(i, v) { return !v; });
                });
            }*/
            updateStatus: function(data) {
                if(data.status === 'ready') {
                    var test = $('.ajax-popup').find('.js-check');
                    test.on('click', function () {
                        $(this).parents('.js-check-parent').find('.js-button').prop('disabled', function(i, v) { return !v; });
                    });
                }
            }
        },
        ajax: {
            settings: {
                method: 'POST',
                data: {
                    ajax: true
                }
            }
        }
     });
Answer 1

Список обратных вызовов:

  beforeOpen: function() {
    console.log('Start of popup initialization');
  },
  elementParse: function(item) {
    console.log('Parsing content. Item object that is being parsed:', item);
  },
  change: function() {
    console.log('Content changed ' + this.content);
  },
  resize: function() {
    console.log('Popup resized');
  },
  open: function() {
    console.log('Popup is opened');
  },
  beforeClose: function() {
    console.log('Popup close has been initiated');
  },
  close: function() {
    console.log('Popup removal initiated (after removalDelay timer finished)');
  },
  afterClose: function() {
    console.log('Popup is completely closed');
  },
  markupParse: function(template, values, item) {
  },
  updateStatus: function(data) {
    console.log('Status changed', data);
  },
  imageLoadComplete: function() {
    console.log('Image loaded');
  },
  parseAjax: function(mfpResponse) {
    console.log('Ajax content loaded:', mfpResponse);
  },
  ajaxContentAdded: function() {
    console.log(this.content);
  }

Документация Magnific Popup Documentation - API

Вы можете определить обратные вызовы в опциях обратных вызовов callbacks. Кроме того, все события Magnific Popup отправляются с использованием triggerHandler в целевом элементе (или для документа, если элемент не существует).

Немного о функции обратного вызова updateStatus, используемой вами:

  • data - это объект, который имеет два свойства status и text
  • data.status - текущий тип состояния, может быть «loading», «error», «ready»,
  • data.text - текст, который будет отображаться (например, «Loading...»)
  • вы можете изменить эти свойства, чтобы динамически изменять текущий статус или его текст

Если в функцию обратного вызова вы попадаете, значит callback работает и ошибка кроется в коде идущем далее.

var test = $('.ajax-popup').find('.js-check');

Убедитесь, что переменная test имеет значение, а также, что полученное значение - это то, что вы ожидали. В противном случае внесите изменения в код, чтобы получить нужный элемент.

test.on('click', function () {
    $(this)
      .parents('.js-check-parent')
      .find('.js-button')
      .prop('disabled', 
          function(i, v) { 
             return !v; 
          });
});

Что-то мне подсказывает, что возможно нужно начать с простого, а именно:

.prop('disabled', 
   function(i, v) { 
      return !v; 
   });

В документации есть примечание .prop( propertyName, function):

Note: If nothing is returned in the setter function (ie. function(index, prop ){}), or if undefined is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

Перевод:

Если в сеттер функции (т.е. function( index, prop ){})) ничего не возвращается, или если возвращается undefined - текущее значение не изменяется. Это полезно для выборочной установки значений, только при выполнении определенных критериев.

Попробуйте заменить на более простой код, типа .prop('disabled', true); или .prop('disabled', false); в зависимости от вашего кода. Опять же, возможно код работает, но получаются не те элементы. Проверьте, что в $(this).parents('.js-check-parent').find('.js-button') находится нужное значние.

Для проверки достаточно написать несколько console.log(...), а также не помешает debugger - чтобы посмотреть, что происходит и какие значения в данный момент. С точки зрения кода - код вполне нормальный.

Answer 2

Соответственно документации плагина попробуйте так:

callbacks: {
    open: function() {
        // Will fire when this exact popup is opened
        // this - is Magnific Popup object
READ ALSO
Как получить стиль по классу в SVG?

Как получить стиль по классу в SVG?

Испробовал много разных способов получения стиля, в первую очередь пытался использовать getComputedStyle(), но это не помогает, вот допустим есть...

319
Как правильно задать tooltip в SVG с помощью JS

Как правильно задать tooltip в SVG с помощью JS

Как правильно задать tooltip в SVG с помощью JS, если SVG добавляется через <object>, и элементы SVG имеют только id и не имеют <title>?

241