Access data attribute from function made as property in jQuery

Question

I'm trying to pass data attribute to function that made ass attribute.

I have a button:

<button class="login-btn" type="button" name="button">Log in</button>

And some button handler:

$(".login-btn").modalForm(
    {formURL: "/login/",
     redirect: '/admin/}
 );

Modal form handler:

$.fn.modalForm = function (options) {
    var defaults = {
        // ...
        formURL: null,
    };

    var settings = $.extend(defaults, options);
    if (options.redirect != null) {
        settings.formURL = settings.formURL + '?redirect=' + options.redirect
    };

    return this.each(function () {
        $(this).click(function (event) {
            newForm(
                // ...
                settings.formURL
                // ...);
        });
    });
};

This works fine but i want to implement redirect as data attribute, something like:

<button class="login-btn" type="button" data-redirect="admin" name="button">Log in</button>

I've tried to modified button handler like:

$(".login-btn").modalForm(
    {formURL: "login",
     redirect: $(this).data("redirect")}
);

but it doesn't work. What is the best way to get param from data attr of button and pass it to my modalForm function?

Answer 1

Change $(this) to $(".login-btn") :

$(".login-btn").modalForm({
  formURL: "login",
  redirect: $(".login-btn").data("redirect")
});

When you call function modalForm , scope of this is not scope of $(".login-btn") . But, you can use this in modalForm function:

...
return this.each(function () { 
  $(this).click(function (event) {
     ...
     var redirect = $(this).data("redirect")
     ...
  });
});

Answer 2

Modify plugin code to work with a callback function or add an additional option to work based on an attribute(extract value from an attribute inside plugin code).

Plugin Code :

$.fn.modalForm = function(options) {
  return this.each(function() {
      var defaults = {
        // ...
        formURL: null,
      };

      var settings = $.extend(defaults, options);
      if (options.redirect != null) {
        if (typeof options.redirect === 'string')
          settings.formURL = settings.formURL + '?redirect=' + options.redirect
        else if (typeof options.redirect === 'function') {
          settings.formURL = settings.formURL + '?redirect=' + options.redirect.apply(this)
        }
      };

      $(this).click(function(event) {
          newForm(
            // ...
            settings.formURL
            // ...);
          });
      });
  });
}

CODE :

$(".login-btn").modalForm({
     formURL: "login",
     redirect: function() { return $(this).data("redirect"); }
});

---

If you don't have access to plugin code then iterate over the elements and initialize individually.

$(".login-btn").each(function(){
  $(this).modalForm({
     formURL: "login",
     redirect:  $(this).data("redirect"); 
  })
});

---

Or in case you just have one element then just use $(".login-btn") to get the element, get data attribute and set value.

$(".login-btn").modalForm({
  formURL: "login",
  redirect: $(".login-btn").data("redirect")
});