Question

I have a problem with creating a tool that’s provides a custom overlay on a page via a code generation plugin that is grabbed from the server once the user clicks a bookmarklet on an external site.

When calling $.getScript inside the bookmarklet, the bookmarklet gets the script successfully and starts executing the callback function. Everything is working until I start accessing the plugin itself to start generating the HTML. However, once the plugin method is called, I am unable to receive anything from console, and the overlay fails to appear.

Plugin structure (source for methods themselves omitted as it’s a company project – unfortunate, I’m aware, but sadly necessary).:

(function(jQuery){

    var methods = {
        generateHeader : function () {

        },
        generateItem : function(arguments) {

        },
        generateGridList : function(arguments) {

        },
        hideOverlay : function(){

        }
    }

    jQuery.fn.generator = function(method) {
        console.log("generator reached"); //Doesn't print.
        if(methods[method]){
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method[method] === 'object' || !method){
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.generator');
        }
    };

})( jQuery );

And my relevant bookmarklet contents:

$.getScript(<scriptURL>, function() {

    //generate data to send to server   

    //send unordered lists to server for processing
    $.ajax({
        requestType:'GET',
        url: <url>,
        dataType: 'jsonp',
        jsonp: 'callback',
        success: function(returnedData){
            //success param inside as data is required to proceed.
            $.each(returnedData.data, function(i, val){
                var htmlToAdd,
                content;

                console.log(val); //succeeeds, not null.

                htmlToAdd = $.generator('generateItem', val);

                console.log(htmlToAdd); //fails to reach log at this point

                //code to append to page
            });
        }
    });
});

All the methods do is generate HTML and CSS based on $.css and $(), var.append() and var.html() functions, and a couple of hide/remove functions to clear it on exit.

It’s late here (close to 9:30pm as of posting) and I’m losing concentration, so I’ll be double checking the methods when I arrive in the office tomorrow morning, I just wanted clarification on any pitfalls this approach has, or if I have any glaring mistakes in my AJAX request, my use of getScript() or my plugin structure. If I know it’s likely to be a method based issue, that narrows my search and allows for a potential rewrite of certain functions.

Thanks in advance,

Craig Domville.

Answer 1

I just wanted clarification on any pitfalls this approach has, or if I have any glaring mistakes in my AJAX request, my use of getScript() or my plugin structure.

I see nothing wrong with your basic approach.

Some things to consider: Before you use $.generator(...), add console.log($.generator) and see if it returns the function code you expect. Don’t assume that just because getScript callback fired, that script was executed properly. You seem to assume that $ == jQuery; maybe that is a safe assumption, maybe not.