how to do partial page update with jquery

Question

I have navigation menu when clicked only a content div in the page should be updated from html contect files that in the server withouod doing a full page refresh, how can i achieve this using jquery?

Answer 1

See load

Description: Load data from the server and place the returned HTML into the matched element.

Answer 2

create a div element and update the contents.

<div id="refreshblock"> </div> assume that this is the block

on the button click , make a ajax call and get the results once you get the results process them and update the above div

('#refreshoblock).html(results);

It will update the page without doing a post back

Answer 3

You need to use the jQuery AJAX methods to accomplish this. There are several ways to go about it. For instance:

Say you have a div with id="mydiv" that you wish update with content from the server. Then:

  $("#mydiv").load("url");

will cause mydiv to be updated with the content returned from url.

This link describes various AJAX methods in jQuery.

Answer 4

Build your menu as per usual, i.e.

<ul id="menu">
    <li><a href="about-us.html">About Us</a>
    <li><a href="services.html">Services</a>
    <li><a href="products.html">Products</a>
</ul>

And a placeholder for the content.

<div id="content"></div>

Then run code similar to this

$("#menu li a").click(function(e) {
    // prevent from going to the page
    e.preventDefault();

    // get the href
    var href = $(this).attr("href");
    $("#content").load(href, function() {
        // do something after content has been loaded
    });
});

Answer 5

$('#myLink').click(function(){
   $.get('url.php', function(data){ // or load can be used too
       $('#mydiv').html(data);
   });
});