3

Using Magnific Popup, I'd like to access the data attributes of the calling object/link so that I can pass it in to the popup using POST. Code:

$('.editRecord').magnificPopup({
    type: 'ajax',
    preloader: false,
    ajax: {
        settings: {
            method: "POST",
            data: {
                recordID: $(this).data("recordid"),
                field1: $(this).data("field1"),
                // similar with the rest of the fields
            }
        }
    }
});

This doesn't work because $(this) seems to actually refer to the document object.

I found this question and have tried all the suggestions in the answers, but none seem to work as this is not in a callback, it's in the settings. Have tried:

recordID: $.magnificPopup.instance.st.el.data("recordid")

and

recordID: $.magnificPopup.instance.currItem.el[0].data("recordid")

But I get error messages that $.magnificPopup.instance.currItem and $.magnificPopup.instance.st are undefined. $.magnificPopup.instance is defined, but I don't see any attribute that holds the current item.

How can I access the calling object from within the MagnificPopup definition?

Community
  • 1
  • 1
froadie
  • 79,995
  • 75
  • 166
  • 235

1 Answers1

0

You may use updateStatus event and change the settings when status is loading, it fires right before the ajax call.

$('.editRecord').on('mfpUpdateStatus', function(e, statusObj) {
    if(statusObj.status === 'loading') {
        var instance = $.magnificPopup.instance,
            currEl = instance.currItem.el;

        // modify settings object
        instance.st.ajax.settings.data = {
            something: currEl.data('something') 
        };

    }
});

Above can be also added as a callback http://dimsemenov.com/plugins/magnific-popup/documentation.html#api

Dmitry Semenov
  • 4,566
  • 2
  • 36
  • 39