Dynamically Loading Single Category View - jpjohnsonjr/learning-notes GitHub Wiki

About 'the hook'

The category-snippet.html file contains this hook to load content dynamically:

<a href="#" onclick="$dc.loadMenuItems('{{short_name}}');"> 

The hook will link up to a "rest API end point" called menu_items.json.

When the user clicks on this, it passes the menu short name into this Javascript snippet:

dc.loadMenuItems = function (categoryShort) { 
  showLoading("#main-content");
  $ajaxUtils.sendGetRequest( 
    menuItemsUrl + categoryShort,
    build AndShowMenuItemsHTML);
};

Note how it concatenates the menu items URL together with categoryShort, which is drawn from the JSON file.

Later in the page, script.js loops over the menu items array to display the menu items and their properties such as proportion name and price.