JSON jQuery Menu Problems

Question

I have created a script to add a menu to a site that I am working on, it pulls the menu data from a JSON file and inserts it into the page. When the page loads, the sub-menu doesn't open when clicked :|

So I added one to the HTML file to see if there was an issue there and that one works perfectly.

I have the dev site live here https://ketchup.dev.danielcoates.co.uk/ (No longer available 30/03/17) if you need to see more of the code.

The Menu HTML


  
    
      
        
        User Profile
      
      
        
            Profile
        
        
            Profile v2
        
        
            Profile Edit

The Menu Code

$(document).ready(function() {
  $.getJSON('/menu/menu.json', function(data) {

    // convert json into array
    var menu = [];
    $.each(data, function(k, v){
      for (var i = 0; i < v.length; i++) {
        menu.push(v[i]);
      };
    });

    for(var i=0; i < menu.length; i++) {
      if(menu[i]['type'] == 'item') {
        $('.nav-main').append('');
        $('#menu-' + menu[i][['id']]).append('\
          \
            \
            ' + menu[i]['title'] + '\
          '
        );

      } else if(menu[i]['type'] == 'header') {
        $('.nav-main').append('');
        $('#menu-' + menu[i][['id']]).append('\
          \
            ' + menu[i]['title'] + '\
          '
        );

      } else if(menu[i]['type'] == 'submenu') {
        $('.nav-main').append('');
        $('#menu-' + menu[i][['id']]).append('\
          \
            \
            ' + menu[i]['title'] + '\
          '
        )
      } else if(menu[i]['type'] == 'submenu-item') {
        $('#menu-' + menu[i]['parent']).append('Test');
      };
    };
  });
});

The JSON

{
  "menu":
  [
    { "id": 1,
      "parent": 0,
      "type": "item",
      "active": false,
      "title": "Dashboard",
      "icon": "si si-speedometer",
      "link": "/dashboard"
    },
    { "id": 2,
      "parent": 0,
      "type": "header",
      "active": false,
      "title": "Pocurement",
      "icon": false,
      "link": false
    },
    { "id": 3,
      "parent": 0,
      "type": "item",
      "active": false,
      "title": "Suppliers",
      "icon": "si si-notebook",
      "link": "/suppliers"
    },
    { "id": 4,
      "parent": 0,
      "type": "item",
      "active": true,
      "title": "Duty Calculator",
      "icon": "si si-calculator",
      "link": "/app/duty_calculator"
    },
    { "id": 5,
      "parent": 0,
      "type": "header",
      "active": false,
      "title": "Products",
      "icon": false,
      "link": false
    },
    { "id": 6,
      "parent": 0,
      "type": "submenu",
      "active": false,
      "title": "Manage Products",
      "icon": "si si-tag",
      "link": "#"
    },
    { "id": 7,
      "parent": 6,
      "type": "submenu-item",
      "active": false,
      "title": "List Products",
      "icon": false,
      "link": "/products/list"
    }
  ]
}

Daniel Coates · Accepted Answer

I have found a solution, tho not an elegant one :/

The problem seems to come from the functionality for the sub menu opening residing inside a function called uiNav inside the main \assets\js\app.js file. I think this is being initialised before the JSON menu is loaded.

By placing that code inside the menu.js call back and placing it in the uiNav function it solves the issue.

The final code that resides in the app.js file is

var uiNav = function() {
  $.getJSON('/menu/menu.json', function(data) {

    // convert json into array
    var menu = [];
    $.each(data, function(k, v){
      for (var i = 0; i < v.length; i++) {
        menu.push(v[i]);
      };
    });

    for(var i=0; i < menu.length; i++) {
      if(menu[i]['type'] == 'item') {
        $('.nav-main').append('');
        $('#menu-' + menu[i][['id']]).append('\
          \
            \
            ' + menu[i]['title'] + '\
          '
        );

      } else if(menu[i]['type'] == 'header') {
        $('.nav-main').append('');
        $('#menu-' + menu[i][['id']]).append('\
          \
            ' + menu[i]['title'] + '\
          '
        );

      } else if(menu[i]['type'] == 'submenu') {
        $('.nav-main').append('');
        $('#menu-' + menu[i][['id']]).append('\
          \
            \
            ' + menu[i]['title'] + '\
          '
        )
      } else if(menu[i]['type'] == 'submenu-item') {
        $('#menu-' + menu[i]['parent']).append('Test');
      };
    };

    // When a submenu link is clicked
    jQuery('[data-toggle="nav-submenu"]').on('click', function(e){
        // Get link
        var $link = jQuery(this);

        // Get link's parent
        var $parentLi = $link.parent('li');

        if ($parentLi.hasClass('open')) { // If submenu is open, close it..
            $parentLi.removeClass('open');
        } else { // .. else if submenu is closed, close all other (same level) submenus first before open it
            $link
                .closest('ul')
                .find('> li')
                .removeClass('open');

            $parentLi
                .addClass('open');
        }

        // Remove focus from submenu link
        if ($lHtml.hasClass('no-focus')) {
            $link.blur();
        }

        return false;
    });
  });
};

JSON jQuery Menu Problems

Answers (2)

Related Questions