title: Creating links that update iframe using ajax
body: <p>I have created a simple template here:
  <a href="http://jsfiddle.net/sfntz/" rel="nofollow">http://jsfiddle.net/sfntz/</a></p>
  
  <p>How is it possible to make the links open pages within the iframe without reloading the main page? I would presume that such thing is possible with javascript ajax (something that I have no coding experience with as of yet).</p>
  
  <p>The code I have currently is:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
      #left-container {
          width: 150px;
          float: left;
      }
      #right-container {
          width: 450px;
          float: left;
      }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="left-container"&gt;
          &lt;a href=""&gt;Link to iFrame 1&lt;/a&gt;&lt;br/&gt;
          &lt;a href=""&gt;Link to iFrame 2&lt;/a&gt;&lt;br/&gt;
          &lt;a href=""&gt;Link to iFrame 3&lt;/a&gt;&lt;br/&gt;
          &lt;a href=""&gt;Link to iFrame 4&lt;/a&gt;&lt;br/&gt;
          &lt;a href=""&gt;Link to iFrame 5&lt;/a&gt;&lt;br/&gt;
      &lt;/div&gt;
  
      &lt;div id="right-container"&gt;
          &lt;iframe src="http://www.yahoo.com" style="border:0px #FFFFFF none;" name="myiframe" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="350px" width="350px"&gt;
          &lt;/iframe&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>