Thursday 15 October 2020
Use Hash Value As Different Page For Navigation Like Angular JS | Hashtag | Javascript | Jquery | Ajax
You can download code from: https://unpossiblepog.com/codes/JAVASCRIPT+AJAX-JQUERY/Use-Hash-Value-As-Different-Page-For-Navigation-Like-Angular-JS-Using-Javascript-Jquery-And-Ajax
Code :-
product.php
------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
loc = (window.location).toString();
res = loc.split("#");
</script>
<div class="container">
<h2> </h2>
<div class="row">
<center>
<div class="col-md-4">
<a onclick="showDataAjax('#Linux');history.pushState({},'','#Linux');">
<button type="button" class="btn btn-info btn-lg">Linux</button>
</a>
</div>
<div class="col-md-4">
<a onclick="showDataAjax('#Microsoft');history.pushState({},'','#Microsoft');">
<button type="button" class="btn btn-info btn-lg">Microsoft</button>
</a>
</div>
<div class="col-md-4">
<a onclick="showDataAjax('#Apple');history.pushState({},'','#Apple');">
<button type="button" class="btn btn-info btn-lg">Apple</button>
</a>
</div>
<center>
</div>
<div class="row">
<div class="col-md-12" id="show-data" style="background-color: #fff68d;margin-top: 15px;height: 100px;">
</div>
</div>
<div class="row">
<center>
<div class="col-md-12">
<a class="btn btn-info btn-lg" style="margin-top: 15px;"
onclick="history.pushState({},'',res[0]);">Refresh</a>
</div>
</center>
</div>
</div>
<script type="text/javascript">
function showDataAjax(company)
{
$.ajax({
url: "read_data.php",
method: "POST",
data:{company:company},
beforeSend : function()
{
},
success: function(ajax_data)
{
$("#show-data").html(ajax_data);
}
});
}
window.onpopstate = function(event){
var hash = location.hash;
showDataAjax(hash);
};
function runHash()
{
var hash = location.hash;
if(hash!=="")
{
showDataAjax(hash);
}
}
runHash();
</script>
</body>
</html>
------------------------------------------
read_data.php
<center>
<h1>
<?php
echo str_replace(array("#","%20"), array(""," "), $_POST['company']);
?>
</h1>
</center>
------------------------------------------
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.
Lets add history.pushState function with 3 arguments.
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.
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.
Subscribe to:
Posts (Atom)