1
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ To, hopefully, prevent further close votes: This topic IS on topic. The code works, he simply had an issue getting it to that point. Read all the way through the post please. \$\endgroup\$ – mseancole Oct 23 '12 at 19:14
2
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ Hey thanks a lot for the response..To your point about having to have an if statement for each new event...That's actually not the case. If I change the event type to mouseover, keyup, etc, I still only need one code block to handle all events...The issue I was running into was when I tried to bind a handler to the Window's page 'load' event. If $('body').bind('load', function() {}); worked, I'd be in business, i would only need one code block to handle all events. \$\endgroup\$ – elgarcon Oct 22 '12 at 2:37
  • \$\begingroup\$ @elgarcon Not quite sure, I follow you, but I think I found reason you're having trouble with the load-event; you should be using $(window).bind('load', ...); - you're quoting 'window'. You should also be using .on rather than .bind, by the way. Or .load. Or simply $(function () { ... }); \$\endgroup\$ – Flambino Oct 22 '12 at 2:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.