title: How do I auto-reload a section of the page with jQuery without refreshing entire page?
body: <p>So there are a few things I want to do. I have a section of HTML that I would like to be displayed on the page by default (i.e. the first time it loads).</p>
  
  <pre><code>&lt;div class="viewport"&gt;
          &lt;ul class="overview"&gt;           
              &lt;li&gt;&lt;img src="images/1.png" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/2.png" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/3.png" /&gt;&lt;/li&gt;         
              &lt;li&gt;&lt;img src="images/4.png" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/5.png" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/6.png" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/7.png" /&gt;&lt;/li&gt;         
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>However, upon clicking an icon I would like for this section to be reloaded as a snippet of javascript is updated.</p>
  
  <p>The code for the icon is: </p>
  
  <pre><code>&lt;a href="#"&gt;&lt;img src="images/2.png" id="icon#2"&gt;&lt;/a&gt; | 
  &lt;a href="#"&gt;&lt;img src="images/3.png" id="icon#3"&gt;&lt;/a&gt; | 
  &lt;a href="#"&gt;&lt;img src="images/4.png" id="icon#4"&gt;&lt;/a&gt; | 
  </code></pre>
  
  <p>The JS snippet that is updated is:</p>
  
  <pre><code>var win_width = $(window).width();
  var num_of_images = 2; // This should be changed to 3, when 3 is clicked, and 4 when 4 is clicked, etc.
  </code></pre>
  
  <p>So it should reload the 'viewport' div on the page only...not the entire page.</p>
  
  <p>Thoughts?</p>