Use Hash Value As Different Page For Navigation Like GMAIL #Inbox | Navigate Without Refreshing Page

This concept was impsired by AngularJS.
Navigating Without Refreshing the whole page on browser.
Use # (hashtag) as ajax data and navigate with back and forward button.
Use Hashtag as different page with Ajax
User Hashtags as different values & pages to navigate in browser.

Code Link:-

Download Code:-

Subscribe my Channel:-

Facebook Page:-

Twitter Account:-

Blog :-
------------------------------------------------

This video is about how to dynamically navigate on browser using hashtag and display data based on hash values with the help of ajax jquery & javascript.
For example, when I click on buttons, I am displaying the data using AJAX, but at the same time I am also manipulating the url.
Not only that, when I click on back and forth buttons, the data changes respectively. Also if I directly open with hash value, it shows the data. You can also remove the hash value by clicking on refresh button.

Lets start building code from the scratch.

Here is the page design, I using PHP language but you can use any backend language.
I have including a header file, which has JQUERY and boostrap links.

In our main page, I added onclick event and “showDataAjax” function on each button. I added them statically just to avoid backend language,
Notice that I added hashtag before each value which is important.
And here is the ajax code which shows data in ID.
You can remove hashtag from post data using your backend language.
1st will be empty array, 2nd will be empty string and the will be the hash value.
Copy paste them and add values respectively.
Notice that your URL hash is also changing.
Now next problem is when I click on back button, it doesn’t change the ajax value.
So for that, add a javascript code.
we shall get the hashvalue and call the function.
Now lets check.
Working fine.
Now, next challenge is what do when when user applies URL with hashvalue.
For that we shall add similar code.
Lets check the direct URL.
As you can see, its working, now to remove hash value, create the script tag at the top of page.
You can also add in common header file but I don’t want to confuse viewers, so I am writing on same page.
On click of refresh page, paste that code, and use array’s first element.
As you can see, this button wipes out the hash value.
Create a function.
Run that function after it’s declaration.

Don’t forget to like, share and subscribe.
Thanks for watching.