title: Sub menu not auto adding class on page load
body: <p>I have a page and I am trying to auto set the active link on the sub menu. I have the same code working on my header for the main navigation but the sub navigation is not working correctly. I have alerted the value of the url to make sure its correct and it is but its not even getting into the .each loop.</p>
  
  <p>Here is the page</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;!-- Link to CSS stylesheets --&gt;
      &lt;link href="css/main.css" type="text/css" rel="stylesheet"/&gt;
  
      &lt;!-- jQuery Hosted Library Link --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- jQuery Scripts --&gt;
      &lt;script&gt;
          $(document).ready(function(e) {
              // Get url and set navigation to the corresponding active page
              $(function(){
                  // Set active main nav tab
                  var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
  
                  if(pgurl.indexOf('?') &gt; -1){
                      pgurl = pgurl.substring(0, pgurl.indexOf('?'));
                  }
  
                  if(pgurl.indexOf('#') &gt; -1){
                      pgurl = pgurl.substring(0, pgurl.indexOf('#'));
                  }
  
                  $("#nav-main ul li a").each(function(){
                        if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
                        $(this).addClass("a-active");
                   });
  
                   resizeDiv();
  
                   // Resize the sections to fit to the window height
                   function resizeDiv(){
                       vph = $(window).height();
                       vph = vph - 111;
                       $('#left-column').css({'min-height': vph});
                       $('#right-column').css({'min-height': vph});
                   }
  
                   // Import correct side nav
                   var side = pgurl.substring(0, pgurl.indexOf('.php'));
  
                   $.ajax({
                      url: "include/nav-side-"+side+".php", success: function(result){
                          $('#nav-side').html(result);
                          }, error: function (){
                              $('#nav-side').html("&lt;p&gt;An error has occurred importing the navigation.&lt;/p&gt;");
                          }
                   });
  
                   // Set active sub nav listing
                   var suburl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
  
                   if(suburl.indexOf('#') &gt; -1){
                       suburl = suburl.substring(0, suburl.indexOf('#'));
                   }
  
                   $("#nav-side ul li a").each(function(){
                        if($(this).attr("href") == suburl || $(this).attr("href") == '' )
                        $(this).addClass("a-active");
                   });
              });
          });
      &lt;/script&gt;
  
      &lt;title&gt;Senneca Portal | Adminstration Panel&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;?php require_once("include/header.php"); ?&gt;
      &lt;section id="content"&gt;
          &lt;section id="left-column"&gt;
              &lt;img id="profile-img" src=""/&gt;
              &lt;nav id="nav-side"&gt;&lt;/nav&gt;
          &lt;/section&gt;
          &lt;section id="right-column"&gt;
              &lt;div id="content-header"&gt;
                  &lt;button id="create"&gt;Add &lt;?php echo $pageName; ?&gt;&lt;/button&gt;
                  &lt;h2&gt;&lt;?php echo $pageName; ?&gt;&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my imported navigation uls for the sub navigation.</p>
  
  <pre><code>    &lt;ul&gt;
      &lt;p class="p-nav-side-title"&gt;Admin Controls&lt;/p&gt;
      &lt;li&gt;&lt;a href="admin.php"&gt;Websites&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="admin.php?page=products"&gt;Products&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="admin.php?page=library"&gt;Library&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="admin.php?page=users"&gt;Users&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>For some reason though this is not even making it to the second .each loop for the nav-side element.</p>
  
  <p>I believe it is due to the fact its ajaxed into the page on load. How can I get this to work correctly on import?</p>