When you are working with ajax, the problem is that after you have loaded some content using ajax, you can't change the URL of the browser according to the content. Because of this, reloading the page causes the new ajax content to disappear and it shows the previous page. Although you can resolve this problem with having some hash tag in the URL, but having hash tag in the url for navigation won't be SEO friendly.
Do you ever wonder when you are working Facebook or Github in a HTML5 supported browser, when you click on the links, the content is loaded into the page using ajax and at the same time the URL changes in the browser according to the specific page but without hash tag in the URL.
This makes use of the HTML5 History API to change the browser URL without refreshing the page.
Consider a page that has the following links to three menu items and a div to display the ajax content.
To override the default action for the link(anchor tag), use the following jQuery code snippet.
Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
For this HTML5 History API, the back button functionality won't work as normal. So we need to override back button to get the ajax content without reloading the page.
To do this add the following code snippet in the page.
For the HTML5 History API non supported browsers, those links will reload the page to the specific location. But if its supported, you are lucky; it will get only the required content using ajax and display it without reloading the entire page.
Live Demo | Download Code
Do you ever wonder when you are working Facebook or Github in a HTML5 supported browser, when you click on the links, the content is loaded into the page using ajax and at the same time the URL changes in the browser according to the specific page but without hash tag in the URL.
This makes use of the HTML5 History API to change the browser URL without refreshing the page.
Consider a page that has the following links to three menu items and a div to display the ajax content.
<div id="menu">
<a href="menu1.php" rel="tab">menu1</a> |
<a href="menu2.php" rel="tab">menu2</a> |
<a href="menu3.php" rel="tab">menu3</a>
</div>
To override the default action for the link(anchor tag), use the following jQuery code snippet.
$(function(){
$("a[rel='tab']").click(function(e){
//code for the link action
return false;
});
});
Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
$(function(){
$("a[rel='tab']").click(function(e){
//e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'content'
$.ajax({url:pageurl+'?rel=tab',success: function(data){
$('#content').html(data);
}});
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
});
For this HTML5 History API, the back button functionality won't work as normal. So we need to override back button to get the ajax content without reloading the page.
To do this add the following code snippet in the page.
/* the below code is to override back button to get the ajax content without page reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
$('#content').html(data);
}});
});
For the HTML5 History API non supported browsers, those links will reload the page to the specific location. But if its supported, you are lucky; it will get only the required content using ajax and display it without reloading the entire page.
Live Demo | Download Code
tat's really awsum...! dis s wat am looking....
ReplyDeleteGreat Article
DeleteIEEE Final Year Projects for CSE
IEEE Project Centers in Chennai
thanks for your code. :)
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteIts Great Thankss
ReplyDeleteGreat post! Much easier to implement than I expected. One question though, is it possible to include a loading indicator between pages? Thanks.
ReplyDeleteThanks...................!
ReplyDeletethanks :) Very helpful
ReplyDeleteerror Undefined index: rel in codeignitor
ReplyDeleteI recommand to use (for Jquery>1.7):
ReplyDelete$(document.body).on('click', "a[rel='tab']" ,function(e){
instead of:
$("a[rel='tab']").click(function(e){
So the function with work as well with dynamicly inserted content
Tks!
DeleteHi, thanks for your script.
ReplyDeleteI have a questio: it's possible link a page like products.php?cat=1 and connect this page with sql? I obtain an sql connection error if I try to put this link in menu.
Error:Warning: mysql_query(): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
Can you help me, thanks
Thank you very much, code is very helpful. Just what I was looking for !
ReplyDeleteI am using button in java page on click of that i am calling js function inside i am calling dialog box ...but on open event of dialog base page getting refereshed ...so how to avoid this....
ReplyDeletehi,
ReplyDeleteIE8 and window.history.pushstat Is there another way to solve this problem ie9 not working. Thank you for your help
Excellent Code.Thanks..
ReplyDeletesuper and thnk
ReplyDeleteif i will try to append with something in url for example ?src=sjfbvsjbr and then try to refresh it then ajax call won't work and it leads to the page which link has been clicked.how to resolve this problem
ReplyDeleteThank you for sharing your helpful!
ReplyDeletehttps://v8web.com/
pleasant post, stay aware of this fascinating work. It truly regards realize that this subject is being secured likewise on this site so cheers for setting aside time to talk about this! https://serverbrowse.com/
ReplyDeleteI thank you for the information and articles you provided cara menggugurkan kandungan
ReplyDeleteI really like your article. It’s evident that you have a lot knowledge on this topic. Your points are well made and relatable. Thanks for writing engaging and interesting material. web design tips
ReplyDeleteOh my goodness! an excellent article dude. Many thanks However I am experiencing trouble with ur rss . Do not know why Not able to enroll in it. Will there be any person obtaining identical rss dilemma? Anyone who knows kindly respond. Thnkx website design agency
ReplyDeleteIf it's not too much trouble note, as of now referenced, it isn't down the slope for your blog if there should be an occurrence of a high Spam Score. onion sites list
ReplyDeleteYou can sprinkle this glitter on many shades but saturation of blue can really make it magical. Especially something like turquoise can nail it. After applying this beautiful color you can dip your fingers in gold glitter and take out exceptionally gorgeous glitter nails. bulk craft glitter
ReplyDeleteThank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me com.android.browser.home
ReplyDeletecool, please guidance so that I can create a blog like yours cara menggugurkan kandungan
ReplyDeletecara melancarkan haid
aktivitas penyebab keguguran
tanda tanda keguguran
manfaat dan bahaya buah nanas
tanda tanda kehamilan
cara membaca hasil usg
hamil muda
cara mengatasi keputihan
pengaruh kista saat hamil
Mua vé tại đại lý vé máy bay Aivivu, tham khảo
ReplyDeletevé máy bay đi Mỹ giá rẻ
có vé máy bay từ mỹ về việt nam chưa
săn vé rẻ đi đà nẵng
giá vé máy bay sg hn
giá vé đi nha trang máy bay
takipciadresin.com - instagram takipçi satın al - takipcialdim.com - instagram takipçi satın al - smmpaketleri.com - tiktok takipçi satın al - instagram beğeni satın al - otomatikbegenisatinal.com - adresekleme.com - btcturk güvenilir mi - bitcoinhesabiacma.com - izlenme-satin-al.com - numarasmsonay.com - borsagazete.com - takipcisatinals.com - youtube izlenme satın al - google haritalara yer ekleme - altyapisizinternet.com - mikrofiber havlu - no deposit bonus forex 2021 - tiktok jeton hilesi - tiktok beğeni satın al - microsoft word indir - misli apk indir - binance güvenilir mi - binance güvenilir mi - binance güvenilir mi - guvenilirmiyasalmi.com - takipçi satın al - kimlik kaybetme cezası - engelli emekli maaşı hesaplama - sigorta için gerekli evraklar - ptt kart bakiyesi sorgulama - asker yol parası sorgulama - kapıda ödeme kargo gönderme - aile hekimi maaşları - esnaf odası kayıt ücreti - bankaların pos cihazı komisyon oranları - mikrofiber havlu
ReplyDeleteinstagram takipçi satın al
ReplyDeleteinstagram takipçi satın al
takipçi satın al
takipçi satın al
instagram takipçi satın al
takipçi satın al
instagram takipçi satın al
aşk kitapları
tiktok takipçi satın al
instagram beğeni satın al
youtube abone satın al
twitter takipçi satın al
tiktok beğeni satın al
tiktok izlenme satın al
twitter takipçi satın al
tiktok takipçi satın al
youtube abone satın al
tiktok beğeni satın al
instagram beğeni satın al
trend topic satın al
trend topic satın al
youtube abone satın al
beğeni satın al
tiktok izlenme satın al
sms onay
youtube izlenme satın al
tiktok beğeni satın al
sms onay
sms onay
perde modelleri
instagram takipçi satın al
takipçi satın al
tiktok jeton hilesi
pubg uc satın al
sultanbet
marsbahis
betboo
betboo
betboo
film izle - sex hikayeleri - sex hikayesi - erotik hikaye -
ReplyDeleteankara escort - bornova escort - alsancak escort - çeşme escort - izmir escort - smm panel - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - haber - instagram takipçi hilesi - instagram takipçi satın al - izmir evden eve nakliyat - seocu - instagram takipçi hilesi - instagram takipçi satın al - izmir escort - takipçi satın al - instagram takipçi satın al - tiktok takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takibi bırakanlar - buca escort -
karşıyaka escort - instagram takipçi hilesi
instagram takipçi satın al
ReplyDeleteucuz takipçi
takipçi satın al
https://takipcikenti.com
https://ucsatinal.org
instagram takipçi satın al
https://perdemodelleri.org
https://yazanadam.com
instagram takipçi satın al
balon perdeler
petek üstü perde
mutfak tül modelleri
kısa perde modelleri
fon perde modelleri
tül perde modelleri
https://atakanmedya.com
https://fatihmedya.com
https://smmpaketleri.com
https://takipcialdim.com
https://yazanadam.com
yasaklı sitelere giriş
aşk kitapları
yabancı şarkılar
sigorta sorgula
https://cozumlec.com
word indir ücretsiz
tiktok jeton hilesi
rastgele görüntülü sohbet
erkek spor ayakkabı
fitness moves
gym workouts
https://marsbahiscasino.org
http://4mcafee.com
http://paydayloansonlineare.com
yeezy boost 700
ReplyDeleteoff white shoes
supreme clothing
yeezy 500
jordan shoes
off white
kobe shoes
supreme clothing
golden goose shoes
supreme t shirt
Looking for a good deal on bulk glitter? Explore a wide range of the best bulk glitter on GlitterMall to find one that suits you! Besides good quality brands, you’ll also find plenty of discounts when you shop for bulk glitter during big sales. Don’t forget one crucial step - filter for items that offer bonus perks like free shipping & free return to make the most of your online shopping experience!
ReplyDeletetakipçi satın al
ReplyDeletetakipçi satın al
takipçi satın al
marsbahis
ReplyDeletebetboo
sultanbet
marsbahis
betboo
sultanbet
ucuz takipçi
ReplyDeletebinance güvenilir mi
okex güvenilir mi
paribu güvenilir mi
bitexen güvenilir mi
coinbase güvenilir mi
instagram takipçi satın al
instagram takipçi satın alz
👌👌👌👌👌👌👌
ReplyDeletebursa
ReplyDeleteçankırı
çorum
denizli
diyarbakır
edirne
elazığ
erzincan
erzurum
They additionally have choice to get to all usefulness of the site by empowering the prearranging language assuming that it is cripple because of some explanation.https://twitchviral.com/
ReplyDelete