Question regarding jQuery, object literal notation and when the object is called

[johnmerlino]

Hey all,

I have a two part question but both are related.

So there is a jQuery script that defines an object (it appears to be in object literal notation) optsList which has a number of properties, one of which is a call to a function. My first question is when the rowclick property is assigned that function, is it at that moment in time the function is executed, where the list div is hidden and the detail div is displayed:

jQuery(document).ready(function(){
optsList = {order: default_order,url: "/"+resources_url, per_page: per_page, rowclick: function(id){jQuery("#list").hide();jQuery("#detail").show();}};
});

OR is the function in the object called when the object itself is passed as a parameter into a prewritten or self-defined method, as in the case of a self-defined method below:

jQuery("#list-table").listGrid(optsList);

That leads to my second question. The listGrid method identifies the same properties but with hardcoded values. So the listGRID method doesn't seem to be treated as a a generic, refactored method that could be reused or a class that is inherited. So I'm not exactly sure of its purpose:

(function($){
$.fn.listGrid = function(options) {
var defaults = {
order : 'student_num',
page : 1,
per_page : 20,
url : "/student.part",
additional: "",
rowclick: function(id){alert(id);}
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
jQuery.get(options.url,
{
order : options.order,
page : options.page,
per_page : options.per_page,
index_as_list: true
},
function(data)
{
obj.html(data);

obj.find("tr.gridrow").click(function(){
options.rowclick($(this).attr('id').replace('rowid',''));
});

obj.find("tr th.sortable").click(function(){
if($(this).hasClass('sortedasc')){
options.order = "-" + $(this).attr('id');}

if($(this).hasClass('sorteddesc')){
options.order = $(this).attr('id');}

if(!$(this).hasClass('sorteddesc') && !$(this).hasClass('sortedasc')) {
options.order = $(this).attr('id');}

obj.listGrid(options);
});

obj.find("#gridpage").change(function(){
options.page = 1;
options.per_page = $(this).val();
obj.listGrid(options);
});

obj.find("a.cpage").click(function(){
options.page = $(this).attr('id').replace('p','');
obj.listGrid(options);
});
}
);
});
};
})(jQuery);

I think it's also worth mentioning that the three variables identified in optsList object are actually assigned in the html file in the script tag:

var resources_url =
var default_order =
var per_page =

So in terms of sequence, is it that we first assign values to the variables in the html script tag, then the jquery ready function is initiated, then the optsList object's properties are assigned, then the objstList object is passed as an argument into the listGrid method, once it's passed, it is assigned the hard coded values? I think I'm not understanding something here.

Thanks for any response.

[rnd me]

object properties and valuer are access whenever the outside function executes.

so, optslist is assigned on ready(), while rowclick is a function that executes it's content later, likely as a click event on a row if i had to guess.