title: How to load .html files in the Home page with JQuery?
body: <p>I have created single page application. I used ColdFusion 2016, JQuery, JavaScript, HTML5 and Bootstrap 3. I tried to keep it simple and so far everything is running just fine. One thing that I would like to change is the way <code>.html</code> files are loaded in my application. Here is the current code example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Example Application&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="shortcut icon" href="favicon.ico"&gt;
          &lt;link rel="icon" type="image/gif" href="animated_favicon1.gif"&gt;
          &lt;link rel="stylesheet" href="CSS/Home.css"&gt;
          &lt;cfif SysAdmin EQ 1&gt;&lt;link rel="stylesheet" href="CSS/Admin.css"&gt;&lt;/cfif&gt;
  
          &lt;!---*** Start: JQuery 3.3.1 version. ***---&gt;
          &lt;script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!---*** End: JQuery 3.3.1 version. ***---&gt;
  
          &lt;!---*** Start: Bootstrap 3.3.7 version files. ***---&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.min.js"&gt;&lt;/script&gt;
          &lt;!---*** End: Bootstrap 3.3.7 version files. ***---&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="main-container" class="container"&gt;
              &lt;nav class="navbar navbar-custom"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;p class="navbar-text"&gt;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt; &lt;b&gt;Welcome to Example Application!&lt;/b&gt;&lt;/p&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Menu&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul id="main-menu" class="dropdown-menu"&gt;
                                  &lt;li class="active"&gt;&lt;a href="/user-page" data-container="user-container"&gt;User&lt;/a&gt;&lt;/li&gt;
                                  &lt;cfif SysAdmin EQ 1&gt;&lt;li&gt;&lt;a href="/admin-page" data-container="admin-container"&gt;Administrator&lt;/a&gt;&lt;/li&gt;&lt;/cfif&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;                        
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;JohnM&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#" data-toggle="confirmation" data-popout="true" role="button" id="log_out"&gt;
                              &lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Logout&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
              &lt;div id="user-container"&gt;&lt;cfinclude template="User.html"&gt;&lt;/div&gt;
              &lt;cfif SysAdmin EQ 1&gt;&lt;div id="admin-container"&gt;&lt;cfinclude template="Admin.html"&gt;&lt;/div&gt;&lt;/cfif&gt;  
          &lt;/div&gt;
          &lt;cfinclude template="Modal.html"&gt;
          &lt;script language="javascript" src="JS/Home.js"&gt;&lt;/script&gt;
          &lt;cfif SysAdmin EQ 1&gt;&lt;script language="javascript" src="Admin.js"&gt;&lt;/script&gt;&lt;/cfif&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then here is the function that controls which container will be displayed on the screen first and the way user can switch and show different container:</p>
  
  <pre><code>$("#main-menu li a").on('click', mainMenu);
  function mainMenu(e) {
      e.preventDefault();
      var itemID = $(e.target).attr('data-container');
      $(this).parent().addClass('active').siblings().removeClass('active');
      $('#main-container &gt; div[id="' + itemID + '"]').show();
      $('#main-container &gt; div:not([id="' + itemID + '"])').hide();
  }
  </code></pre>
  
  <p>On page load this code is triggered:</p>
  
  <pre><code>$(document).ready(function(){
      // Trigger on click function on the main menu element.
      $('#main-menu').find('a[data-container="user-container"]').trigger('click');
  });
  </code></pre>
  
  <p>I'm wondering if there is a better way to load <code>.html</code> containers in JQuery? I read one article where they showed small framework <code>Sammy.js</code>. I'm not sure if that is necessary for me to use or there is other ways to achieve this. If anyone can provide some example that would be great. Thank you. </p>