Question

I want to refresh a full page with ajax, after clicking on some initial site link.

Example:

We have opened site http://www.love.com, it has a link to http://www.love.com/somepage.html

After we click on this link, full page must be refreshed with ajax (replaced active page by somepage.html)

And there is must be some fadeIn/Out effect, when the page is replaced.

How to?

---

maybe some plugin can do this, any link?

Answer 1

Well a full-page request kind of contradict the purpose of AJAX,

but if you insist 🙂
you can use a huge div as a placeholder of your page, and use jQuery Load/Ajax

the div would look like this

<div id="yourhugediv"></div>

and the function that you can use

function changeUrl(href)
{
   $('#yourhugediv').load(href);
   href = (href == "") ? "/" : href;
   uri = window.location.href.split("#/");
   window.location.href = uri[0] + "#/" + href;
}

either manually add the function to your link

<a href="#" onclick="changeUrl('http://love.com/somepage.html')">to load</>

or use jQuery selector to iterate every anchor

$('a').click(function()
{
    changeUrl(a.attr('href'));
});
$('a').attr('href','#');