Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

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

    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:
    Code:
    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:
    Code:
        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:
    Code:
    (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:
    Code:
    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.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •