Ajax plugin that binds to click and page load

Question

I have an app that has a number ajax requests and instead of writing them all out, I created a plugin that takes options based on the request I am making.

I would like the ajax requests to occur when page loads and when the user clicks, mouses over certain buttons.

I decided to use the jquery.bind() method to bind the ajax request to what event takes place. But I am running into a problem when the event is 'load' and the jquery selector is $('window') or document.

Currently, I put a conditional statement to make it work, but then I have write the same function twice just for the 'load' event like this:

(function($) {

    $.fn.getData = function(options) {

        var defaults = {
            eventType : "load",
            // more default options
        }

        var options = $.extend(defaults, options);

        if (options.eventType == "load")
        {
            $.ajax({
                // ajax object with options
            });
        }
        else {
            return this.bind(options.eventType, function() {

                $.ajax({
                    // ajax object with options
                });


            return false;

            });
        }
    }
})(jQuery);

So when on my view pages, I call the plugins like this:

// for click events
$('#selector').getData({
    eventType : 'click',
    // other default options
});

// need ajax when page loads
$('window').getData({
    eventType : 'load',
    // other default options
});

I don't know if there is anyway around writing the function twice and I'm also unsure that it's even good practice to bind event handler to the Window's page load event, but not sure else how to make this plugin flexible to work with browser events like page load and user events like click, mouseover.

Any help would be greatly appreciated. Thanks

Answer 1

Edit: The part below was, I think, me not seeing the forest for all the trees. The issue is quite simply that you're passing the string 'window' to jQuery, rather than the object window. So jQuery tries to bind an event listener to a <window> HTML element - which, obviously, does not exist.

What you want, is

$(window).bind("load", function () { .... });

or, better:

$(window).on("load", function () { .... });

or

$(window).load(function () { .... });

or, simply

$(function () { .... });

basically, anything other than trying to pass the string 'window'

---

Actually, the least flexible part of your code are the ajax requests themselves. If the ajax options are hard-coded in the plugin, you still don't have much flexibility; it's the same ajax requests each time. For instance, if you want to load ajax on a scroll event, you still have to edit the plugin to add the ajax request options and/or add an if(options.eventType === "scroll"). So you're splitting your code up, but not gaining any real flexibility.

I'd suggest making a simple function that takes an element, an event type, and some ajax options, so you can bind any event to any ajax request. Something like

function bindAjax(element, event, ajaxOptions) {
  ajaxOptions = $.extend({
    // default ajax options, if any
  }, ajaxOptions);

  $(element).on(event, function (event) {
    $.ajax(ajaxOptions);
    event.preventDefault();
  });
}

bindAjax(window, "load", { ... });

You don't gain that much by doing this, though, compared to "raw" jQuery code.