CODEWITHSUNDEEP
javascriptjqueryparametersjquery-plugins
Erik Grosskurth
Erik Grosskurth

Reputation: 3932

Having trouble with my jQuery plugin parameters not firing correctly

I am working with many aging applications and what i need to do is tap into the applications and pull the html tables and display them on a new page and then update the code styles there. I have created a plugin for the ajax call and I want to feed it parameters for the url and the target ID then display them on the page in different sections. The problem is that it takes whatever the last parameters are in the scope and uses them across all the function calls within the doc.ready.

(function($){
    $.fn.getAppData = function(options) {
            data = $.extend({
                target: $(this),
                id: "body",
                url: "/error/404error.html",
                callback: function(){}
            }, options );
            $.ajax({
                url: data.url,
                cache: false
            })
            .done(function( html ) {
                //alert(data.id);
                $display = $(html).find('div'+data.id);
                data.target.append($display);
                options.callback.call(this);
            })
            .fail(function() {
                alert('Error loading '+data.id+' data.');
            });
        }
    }
}(jQuery));

Here is the calls in the doc.ready statement:

$(document).ready(function(e) {
    $('#bulletinBoard').getAppData({
    target: $('#bulletinBoard'),
    id: '#tabs-1',
    url: '/webapps/BulletinBoard/default.cfm',
    callback: function() {
        //manipulate the new loaded html here
    }
});
$('#VTCSchedule').getAppData({
    target: $('#VTCSchedule'),
    id: "#vtcInfo",
    url: "/webapps/VTCInfo/default.cfm",
    callback: function() {
        //manipulate the new loaded html here
    }
});
$('#askMGMT').getAppData({
    target: $('#askMGMT'),
    id: "#askMGMT",
    url: "/webapps/askthera/AskTheRIIManagement.asp",
    callback: function() {
        //manipulate the new loaded html here
    }
});
});

This is probably a bone head move but I am not seeing the problem and I do not have much time. Thanks in advance.

Upvotes: 1

Views: 30

Answers (1)

KJ Price
KJ Price

Reputation: 5964

Note your ajax url: data.url. This is always going to be "/error/404error.html" how you currently have it. You should have data.url pull from options:

 $.fn.getAppData = function(options) {
        $this = $(this);
        data = $.extend({
            id: options.id, // <- this is now dynamic
            url: options.url, // <- this is now dynamic
            callback: function(){}
        }, options );

Same thing with data.id.

Edit

I was wrong! The issue is with data =. Because you are missing var, you are assigning data to the global scope, thus overwriting it with each new call to this method. I would instead use the following:

(function($){
    $.fn.getAppData = function(options) {
            $this = $(this);
            var data = $.extend({ // <- Only available in current scope because of "var"!
                id: "body",
                url: "/error/404error.html",
                callback: function(){}
            }, options );
            $.ajax({
                url: data.url,
                cache: false
            })
            .done(function( html ) {
                //alert(data.id);
                $display = $(html).find('div'+data.id);
                $this.append($display);
                options.callback.call(this);
            })
            .fail(function() {
                alert('Error loading '+data.id+' data.');
            });
        //Also note, that there was an extra bracket "}" here
    }
}(jQuery));

Upvotes: 1

Related Questions