title: Creating an ID with spaces
body: <p>I know that you aren't supposed to create an ID with spaces and that</p>
  
  <pre><code>&lt;div id="id one"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>will just create a div with id of <code>id</code>.
  However a project I am doing using a json file which is set up with a bunch of data, part of the data is the name of the section the user is clicking on to retrieve more data through ajax. However the way it is set up the id for each part on the <code>descriptions.html</code> page needs to match the data in the json file.</p>
  
  <p>I don't want to hyphenate it because having "Build-a-Site" display on my webpage looks just terrible.</p>
  
  <p>We are not supposed to change the ajax or json set up but I'm willing to if there is no other way.</p>
  
  <p>Here is the javascript file that is deciding what is placed on the page, I tried replacing <code>newContent += ('&lt;a href="descriptions.html#');</code> with <code>newContent += ('&lt;a href="descriptions.html#').replace(/-/g, "");</code> but that did not remove the hyphens on the page.</p>
  
  <pre><code>// NOTE: This example will not work locally in all browsers. 
  // Please try it out on the website for the book http://javascriptbook.com/code/c08/
  // or run it on your own server.
  
  $(function() {                                    // When the DOM is ready
  
    var times;                                      // Declare global variable
    $.ajax({
      beforeSend: function(xhr) {                   // Before requesting data
        if (xhr.overrideMimeType) {                 // If supported
          xhr.overrideMimeType("application/json"); // set MIME to prevent errors
        }
      }
    });
  
    // FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
    function loadTimetable() {                    // Declare function
      $.getJSON('data/example.json')              // Try to collect JSON data
      .done( function(data){                      // If successful
        times = data;                             // Store it in a variable
      }).fail( function() {                       // If a problem: show message
        $('#event').html('Sorry! We could not load the timetable at the moment');
      });
    }
  
    loadTimetable();                              // Call the function
  
  
    // CLICK ON THE EVENT TO LOAD A TIMETABLE 
    $('#content').on('click', '#event a', function(e) {  // User clicks on event
  
      e.preventDefault();                                // Prevent loading page
      var loc = this.id.toUpperCase();                   // Get value of id attr
  
      var newContent = '';                               // Build up timetable by
      for (var i = 0; i &lt; times[loc].length; i++) {      // looping through events
        newContent += '&lt;li&gt;&lt;span class="time"&gt;' + times[loc][i].time + '&lt;/span&gt;';
        newContent += ('&lt;a href="descriptions.html#');
        newContent += times[loc][i].title.replace(/ /g, '-') + '"&gt;';
        newContent += times[loc][i].title + '&lt;/a&gt;&lt;/li&gt;';
      }
  
      $('#sessions').html('&lt;ul&gt;' + newContent + '&lt;/ul&gt;'); // Display times on page
  
      $('#event a.current').removeClass('current');       // Update selected item
      $(this).addClass('current');
  
      $('#details').text('');                             // Clear third column
    });
  
    // CLICK ON A SESSION TO LOAD THE DESCRIPTION
    $('#content').on('click', '#sessions li a', function(e) { // Click on session
      e.preventDefault();                                     // Prevent loading
      var fragment = this.href;                               // Title is in href
  
      fragment = fragment.replace('#', ' #');                 // Add space after#
      $('#details').load(fragment);                           // To load info
  
      $('#sessions a.current').removeClass('current');        // Update selected
      $(this).addClass('current');
    });
  
  
    // CLICK ON PRIMARY NAVIGATION
    $('nav a').on('click', function(e) {                       // Click on nav
      e.preventDefault();                                      // Prevent loading
      var url = this.href;                                     // Get URL to load
  
      $('nav a.current').removeClass('current');               // Update nav
      $(this).addClass('current');
  
      $('#container').remove();                                // Remove old part
      $('#content').load(url + ' #container').hide().fadeIn('slow'); // Add new
    });
  
  });
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>{
      "L1": [
          {
              "time": "Free",
              "title": "HTML"
          },
          {
              "time": "Free",
              "title": "CSS"
          },
          {
              "time": "$2.99",
              "title": "Build a Site"
          },
          {
              "time": "Free",
              "title": "Javascript"
          },
          {
              "time": "$3.99",
              "title": "Interactive Website"
          },
          {
              "time": "Free",
              "title": "PHP"
          },
          {
              "time": "$4.99",
              "title": "Node.js"
          }
      ],
      "L2": [
         {
              "time": "Free",
              "title": "Python"
          },
          {
              "time": "$2.99",
              "title": "Java"
          },
          {
              "time": "Free",
              "title": "Ruby"
          },
          {
              "time": "$1.99",
              "title": "Ruby on Rails"
          },
          {
              "time": "$2.99",
              "title": "C++"
          },
          {
              "time": "$2.99",
              "title": "C#"
          },
          {
              "time": "$4.99",
              "title": "R"
          }
      ],
      "L3": [
         {
              "time": "Free",
              "title": "SQL"
          },
          {
              "time": "$9.99",
              "title": "Unity 3D"
          },
          {
              "time": "$7.99",
              "title": "Unity 2D"
          },
          {
              "time": "$3.99",
              "title": "AngularJS"
          },
          {
              "time": "$4.99",
              "title": "Django and Flask"
          },
          {
              "time": "$4.99",
              "title": "Visual Java"
          },
          {
              "time": "$7.99",
              "title": "Go"
          }
      ]
  }
  </code></pre>