Loading div sections from separate files I am loading divs from separate HTML files into a div on the index.html page.

This is being done using jQuery's .load(). There is however, a lot of repetition and I'm wondering if there is a cleaner way to achieve this.

The HTML:

&lt;nav class="menu-side"&gt;
  &lt;a href="#" id="about"&gt;About&lt;/a&gt;
  &lt;a href="#" id="help"&gt;&lt;/i&gt;Help&lt;/a&gt;
  &lt;a href="#" id="contact"&gt;Contact&lt;/a&gt;
&lt;/nav&gt;
&lt;div id="target"&gt;
  &lt;!-- content is being loaded here from other .html files --&gt;
&lt;/div&gt;


The JS:

$(document).ready( function() {
    $("#about").on("click", function() {
        $("#target").load("../pages/theAboutPage.html");
    });
    $("#help").on("click", function() {
        $("#target").load("../pages/theHelpPage.html");
    });
    $("#contact").on("click", function() {
        $("#target").load("../pages/theContactPage.html");
    });
});
ngView

First of all you described ngView from angularjs

It is what it does. It just helps to organize routing code and template loading. In next section I'll show samples from my current self-learning project.

If you need strict jQuery solution, place appropriate comment.

Angular solution

Make navigation bar with virtual links and place ng-view attribute into container div.

&lt;nav class="menu-side"&gt;
  &lt;a href="#/about"&gt;About&lt;/a&gt;
  &lt;a href="#/help"&gt;&lt;/i&gt;Help&lt;/a&gt;
  &lt;a href="#/contact"&gt;Contact&lt;/a&gt;
&lt;/nav&gt;
&lt;div class="container" ng-view&gt;&lt;/div&gt;


Mark html tag with ng-app attribute and value of you app name

&lt;html ng-app="my_app_name"&gt;


Load js at end of body. You can use cdn for angular libraries. app.js is your application source file.

&lt;script type="text/javascript" src="libs/angular/angular.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="libs/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;


Your app.js contains main routes

(function() {
  'use strict';
  angular.module('my_app_name', ['ngRoute'])
  .config([
    '$routeProvider', function($routeProvider) {
      $routeProvider.when('/about', {
        templateUrl: 'templates/about.html'
      });
      $routeProvider.when('/help', {
        templateUrl: 'templates/help.html'
      });
      $routeProvider.when('/contact', {
        templateUrl: 'templates/contact.html'
      });
    }
  ]);
}).call(this);


After that you will gen fast, scalable template rendering. Also you can read angular docs for more features.

jQuery solution

IMHO: there is no common solution, but some practices can be applied.

e.g. making configuration array for repeated code.

var navbar_selector = '#navbar',
    target_selector = '#target',
    nav_config = [
        {"id": "about", "text": "About", "url": "../pages/theAboutPage.html"},
        {"id": "help", "text": "Help", "url": "../pages/theHelpPage.html"},
        {"id": "contact", "text": "Contact", "url": "../pages/theContactPage.html"}
    ];

nav_config.forEach(function (config) {
    $('&lt;a/&gt;').attr({"id": config.id, "text": config.text}).click(function(){
        $(target_selector).load(config.url);
    }).appendTo(navbar_selector);
})


But it's steel ugly solution.