Geek Answers Handbook

How to do partial page refresh using jquery

I have a navigation menu, when only the contents of the div on the page are clicked, it should be updated from the html contt files that on the withouod server do a full page refresh, how can I achieve this with jquery?

+5
source share
6 answers

Create your menu as 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 placeholder for 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
    });
});
+9
source

To do this, you need to use jQuery AJAX methods. There are several ways to do this. For instance:

Let's say you have a div with id = "mydiv" that you want to update with content from the server. Then:

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

mydiv , url.

AJAX jQuery.

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

div .

<div id="refreshblock"> </div> ,

, ajax- , , div

('#refreshoblock).html(results);

,

+1

. load

: HTML .

0

jquery (AJAx)

    <div id="leftDiv">
<s:include value="/pages/profile.jsp"></s:include>
</div>
<div>
<a href="#" id="idAnchor">Partial Refresh</a>
</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('#idAnchor').click(function(){

$.ajax({
         url: 'getResultAction', // action to be perform
         type: 'POST',       //type of posting the data
         data: { name: 'Jeetu', age: '24' }, // data to set to Action Class
         dataType: 'html',
         success: function (html) {
         ('#leftDiv).html(html); //set result.jsp output to leftDiv 
    },
     error: function(xhr, ajaxOptions, thrownError){
       alert('An error occurred! ' + thrownError);
    },
  });
 });
})
</script>

:

0

More articles:


All Articles