How can I loop through element's data using jQuery and build these settings?

Question

I'm using MagnificPopup to open a popup form to edit a subscription. I'm passing the values to the form via post, and the values are pulled from the element's data attributes.

The "edit" element that opens popup when clicked:

<a class="editSubscription" href="frmEditSubscription.cfm" 
    data-startdate="#startDate#" data-enddate="#endDate#" data-accounttypeid="#accountTypeID#" 
    data-demo="#demo#" data-comment="#comment#" data-adddate="#adddate#">
        <img src="../images/edit_icon.png" />
</a>

The code to invoke MagnificPopup and pass in all the data attributes:

$('.editSubscription').magnificPopup({
    type: 'ajax',
    preloader: false,
    ajax: {
        settings: {
            type: "POST"
        }
    },

    callbacks:{
        // set data to be posted to popup when loading (can't be done in settings as we need access to current object)
        beforeOpen: function(){
            var instance = $.magnificPopup.instance;
            var currEl = instance.st.el;
            instance.st.ajax.settings.data = {
                startDate: currEl.data("startdate"),
                endDate: currEl.data("enddate"),
                accountTypeID: currEl.data("accounttypeid"),
                demo: currEl.data("demo"),
                comment: currEl.data("comment"),
                addDate: currEl.data("adddate")
            };              
        }   
    }
});

This code works; what I'd like to accomplish is to dynamically build the list of values to be passed in the post by looping through all the data attributes, instead of hardcoding.

This code works to loop through the data attributes:

$.each(currEl, function(i, e) {
   alert('name='+ i + ' value=' +e);
});

However, I can't figure out how to use this loop to actually build settings.data. How can I structure this?

Rory McCrossan · Accepted Answer · 2015-06-22 08:54:02Z

1

jQuery provides all data attributes on an object when you call the data() method with no parameters. You can then provide this object to the instance. Try this:

beforeOpen: function() {
    var instance = $.magnificPopup.instance;
    var $currEl = $(instance.st.el);
    instance.st.ajax.settings.data = $currEl.data();              
}

Assuming that instance.st.el provides a jQuery object, you could even shorten this:

beforeOpen: function() {
    var instance = $.magnificPopup.instance;
    instance.st.ajax.settings.data = instance.st.el.data();              
}

answered Jun 22, 2015 at 8:54

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

froadie Over a year ago

getting error TypeError: 'toString' called on an object that does not implement interface HTMLAnchorElement. I think this may be because the magnificPopup object seems to also be added as a data attribute... how can I remove that when passing the data object?

Rory McCrossan Over a year ago

In that case the code you have in the question is the best method. If you used a loop you would need to restrict the attributes used by naming only those you want to retrieve, which would probably be longer than what you already have.

froadie Over a year ago

I'm using this code for several edit popups and do not want to have to hardcode all the parameters each time, would like to write a single reusable function for it. So need a way to pass the data attributes dynamically

froadie Over a year ago

I want to retrieve all the data attributes besides the magnificPopup one that is placed there by the plugin.

froadie Over a year ago

hmmmm. If I use currEl.clone().data() it seems to copy everything besides the magnificPopup object, and I can then pass it and it works. Any reason not to do this?

|

Collectives™ on Stack Overflow

How can I loop through element's data using jQuery and build these settings?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related