I want to refresh a full page with ajax, after clicking on some initial site link.
Example:
We have opened site www.love.com, it has a link to 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?
Just make a link that points there:
<a href="http://www.love.com/somepage.html">link text</a>
ps: I'm a little bit confused though ... you already have a link to that page that causes a new request (full page refresh), why the need for AJAX I wonder ...
Sounds like you are trying to use jQuery because someone told you you should be using jQuery - the link tag does this job all by itself without any script required
ok - we have to do what our girlfriends tell us to do...
I suppose you could do something like this:
$("body").load("next_page.html");
or
$("html").load("next_page.html"); (would this even work??)
Since the other page is in the same domain you could scrape the other page to retrieve the data you're interested in. You could even replace the entire body tag of the current page with the contents of the body tag in the other page.
The process would go something like: User takes some action on current page to trigger desired action, JavaScript makes AJAX request to fetch somepage.html and stores the result in a string, JavaScript does equivalent of innerHTML (or jQuery.html()) to replace the contents of the current page (or div or whatever) with whatever was retrieved from somepage.html and add special effect.
In theory this would allow you to completely replace the contents of the current page with whatever was fethced from somepage.html.
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','#');
Use FAJAX (Fake AJAX). It will give you that 'coolness' that you are looking for. Using these meta tags in your pages will do a full page refresh with fade-in and fade-out effects.
<META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">
The meta tags only work in IE, but there are ways to get similar results in other browsers using JavaScript.
<html>
<head>
<title>Page Title</title>
<META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">
<script type="text/javascript">
function fadeInit() {
document.body.style.opacity=0.2; // initialise
}
function fadeIn() {
var bodyStyle=document.body.style;
if ( bodyStyle.opacity < 1) {
bodyStyle.opacity=((bodyStyle.opacity*10)+1)/10; //Add 0.1
setTimeout('fadeIn();',100)
}
}
</script>
</head>
<body onload="fadeInit();fadeIn();">
</body>
</html>
I know this is an old post, but I think what you're looking for is solved by using the BBQ jQuery plugin: http://benalman.com/projects/jquery-bbq-plugin/