How do I auto-reload a section of the page with jQuery without refreshing entire page?

Question

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).

<div class="viewport">
        <ul class="overview">           
            <li><img src="images/1.png" /></li>
            <li><img src="images/2.png" /></li>
            <li><img src="images/3.png" /></li>         
            <li><img src="images/4.png" /></li>
            <li><img src="images/5.png" /></li>
            <li><img src="images/6.png" /></li>
            <li><img src="images/7.png" /></li>         
        </ul>
    </div>

However, upon clicking an icon I would like for this section to be reloaded as a snippet of javascript is updated.

The code for the icon is:

<a href="#"><img src="images/2.png" id="icon#2"></a> | 
<a href="#"><img src="images/3.png" id="icon#3"></a> | 
<a href="#"><img src="images/4.png" id="icon#4"></a> | 

The JS snippet that is updated is:

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.

So it should reload the 'viewport' div on the page only...not the entire page.

Thoughts?

Answer 1

    $(function () {

        var num_of_images = 2,
            showAndHide;

        $("img[id^=icon]").bind("click", function () {
            num_of_images = parseInt(this.id.replace("icon#", ''), 10);
            showAndHide(num_of_images);
        });

        (showAndHide = function (n) {
            $("ul.overview").hide() // hide this while we "do work"
               .children() // get children
                  .show() // show all children
                  .filter(":nth-child(" + n + ") ~ li") // get the next siblings of the nth child
                     .hide() // hide them
                  .end()
               .end()
            .show(); // show the parent list
        })(num_of_images)

    });

This is a "pending" solution. I have not tested this and I would be surprised if it works.

EDIT: Alright, I tested and fixed a few things and this seems to work.

Note that I attached a click handler to those img elements. So you don't need those anchor tags if you don't want them.

Answer 2

IF you are looking to reload just a portion of the page with HTML content (no added JavaScript) then you could use .load().

$('div#content').load('morecontent.php');

Answer 3

You want $('.viewport').load('/url') to replace the viewport' contents with the new chunk of HTML return from the server from /url. You call that load function once when the page loads, and again any time you want to replace the contents of viewport. You might want to do some include type magic in whatever template language you're using to make it so that you can skip the initial load and render the initial page in one request instead of 2. You trigger the load function in a change event or other kind of event on your page.