Javascript classes functions

Question

I'v written a JS "class" for a jQuery framework which is like that:

(function($) {
    $.fn.dynamic = function() {
        return this.each(function() {
            $(this).on("submit", function(e) {
                var form = $(e.target);

                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: form.serialize(),
                    success : function(data, textStatus, jqXHR) {
                        // Do something
                    },
                    error : function(data, textStatus, jqXHR) {
                        // Do something
                    }
                });

                e.preventDefault();
                return false;
            });
        });
    });
})(jQuery);

in my success/errors function I'd like to make actions (display/hide autoloader, show messages, ...)

I thought the best way would be firing an event, by example:

form.trigger("formSubmitted", [data, true/false]);

And then with a listener do what I have to do.

Would it be possible to add a listener in my class dynaform and supposing I have to other classes (let's say Messages and ProgressOverlay), how would it be possible to call those classes methods and how to manage errors (imagine those classes are in an other file which cannot be loaded or other folks)

You should read about jQuery Plugin Callbacks.

Zenoo
– Zenoo

2018-02-19 13:21:00 +00:00
Commented Feb 19, 2018 at 13:21 — Zenoo
– Zenoo, Commented Feb 19, 2018 at 13:21

Zenoo · Accepted Answer · 2018-02-19 13:38:52Z

First you need to accept some parameters in your function.

For that, you need to define the callbacks in an object storing the default values for your parameters :

this.defaultOptions = {
    onSuccess: function(data, textStatus, jqXHR) {},
    onError: function(data, textStatus, jqXHR) {}
};

Then you need to merge the default options with the ones you will pass :

var settings = $.extend({}, this.defaultOptions, options);

Then, when you want to, call your callbacks :

settings.onSuccess.call(undefined, data, textStatus, jqXHR);

Then you simply need to call your plugin like this :

$('form').dynamic({
    onSuccess: function(data, textStatus, jqXHR){
        ...
    },
    onError: function(data, textStatus, jqXHR){
        ...
    }
});

Here is the full code :

(function($) {
  $.fn.dynamic = function(options) { // Notice the added parameter here

    //Here are the defined callbacks
    this.defaultOptions = {
      onSuccess: function(data, textStatus, jqXHR) {},
      onError: function(data, textStatus, jqXHR) {}
    };

    //Merge your options with the predefined ones
    var settings = $.extend({}, this.defaultOptions, options);

    return this.each(function() {
      $(this).on("submit", function(e) {
        var form = $(e.target);

        $.ajax({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          success: function(data, textStatus, jqXHR) {
            settings.onSuccess.call(undefined, data, textStatus, jqXHR); //Call your onSuccess callback here
          },
          error: function(data, textStatus, jqXHR) {
            settings.onError.call(undefined, data, textStatus, jqXHR); //Call your onError callback here
          }
        });

        e.preventDefault();
        return false;
      });
    });
  };
})(jQuery);

Thank you very much @Zenoo. I wanted to do that in the first times but I wondered if it was a good practice, it seems it is.

Collectives™ on Stack Overflow

Javascript classes functions

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related