title: Replacing Div contents with results of an href click
body: <p>Complete newbie but learning!</p>
  
  <p>I have a php file presenting my menu ie</p>
  
  <pre><code>&lt;li&gt;&lt;a href="printers3.php" class="ajaxLink" name="Printer area" title="Printers3"&gt;Printers3&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>and I am trying to include the output from printers3.php (the final line is echo $table; ) later on in the code within div id="MiddleColumnWrapper"</p>
  
  <p>I have put the following code in my Head</p>
  
  <pre><code>&lt;script&gt;
  $( function() {
      $( ".ajaxLink" ).on( "click", function() {
          var ajaxUrl = $( this ).attr( "href" );
          $.get({
              ajaxUrl,
              function( response ) {
                  $( "#MiddleColumnWrapper" ) .html( response );
              }
          });
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>But at the moment I just get the result of $table in a new window.
  Have I missed something or just not on the right track?
  Thanks</p>
  
  <p>Top code bit of the linking script</p>
  
  <pre><code>&lt;script&gt;
  $( function() {
      $( ".ajaxLink" ).on( "click", function() {
          $.get({
              url : 'printers3.php',
              function( response ) {
                  $( "#MiddleColumnWrapper" ) .html( response );
              }
          });
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="SiteWrapper"&gt;
  &lt;?php
      /* Output the header */
      include 'includes/header.php';
  ?&gt; 
  
  &lt;div id="MiddleColumnWrapper"&gt;
  &lt;p&gt;Middle column&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>