title: jQuery load url into div and replace current content pass url to function
body: <p>I'm trying to call a function called <code>loadPage</code> on click of an <code>a</code> tag and pass it a URL to replace the current content in a <code>div</code> called <code>main</code> via Ajax. </p>
  
  <p>However, my code isn't replacing the content already in the main div or even making the Ajax call as far as I can see and I can't see where it's going wrong.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function () {
      function loadPage(urlToLoad) {
          $.ajax({
              type: "POST",
              alert(urlToLoad);
              url: urlToLoad,
              data: dataString,
              success: function (returnedData) {
                  $('#main').html(returnedData);
              }
          });
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a onclick="loadPage('load.php');" href="javascript:void(0)" class="nav"&gt;&lt;img src="news.png" alt="Latest news" width="81" height="61" class="navImage" /&gt;Latest news&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div id="main"&gt;
      &lt;section id="mainContent"&gt;abc&lt;/section&gt;
  &lt;/div&gt;
  </code></pre>