Workshop 302, Tutorial 3, Step 3.1

inline.js

// handle successful retrieval of Merchandise records
function onSuccessSfdcMerchandise(response) {
    // avoid jQuery conflicts
    var $j = jQuery.noConflict();
    
    // debug info to console 
    SFHybridApp.logToConsole("onSuccessSfdcMerchandise: received " + response.totalSize + " merchandise records");
    
    // clear div_merchandise_list HTML
    $j("#div_merchandise_list").html("");
    
    // set the ul string var to a new UL
    var ul = $j('<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a"></ul>');
    
    // update div_merchandise_list with the UL
    $j("#div_merchandise_list").append(ul);
    
    // set the first li to display the number of records found, formatted using list-divider
    ul.append($j('<li data-role="list-divider">Merchandise records: ' + response.totalSize + '</li>'));
    
    // add an li for the merchandise being passed into the function via response
    // create an array to store record information for click listener creation below
    inventory = new Array();
    // loop through each record, using vars i and merchandise
    $j.each(response.records, function(i, merchandise) {
        // create an array element for each merchandise record, used below for listeners
        inventory[merchandise.Id] = merchandise;
        // create a new li with the record's Name; use the detailLink class and a record-specific data-id
        var newLi = $j("<li class='detailLink' data-id='" + merchandise.Id + "'><a href='#'>" + merchandise.Name + "</a></li>");
        ul.append(newLi);
    });
    
    // render (create) the list of Merchandise records
    $j("#div_merchandise_list").trigger( "create" );
    // send the rendered HTML to the log for debugging
    SFHybridApp.logToConsole($j("#div_merchandise_list").html());
    
    // set up listeners for detailLink clicks
    $j(".detailLink").click(function() {
        // get the unique data-id of the record just clicked
        var id = $j(this).attr('data-id');
        //  using the id, get the record from the array created above
        var record = inventory[id];
        
        // use this info to set up various detail page information
        $j("#name").html(record.Name);
        $j("#quantity").val(record.Quantity__c);
        $j("#price").val(record.Price__c);
        $j("#detailpage").attr("data-id",record.Id);

        // change the view to the detailpage, tracking the location change
        $j.mobile.changePage('#detailpage', {changeHash: true});
        
    });
    
}