This will load the content to the page and change the URL. The problem is that the back button and the forward won't load the content agin. They only change the URL. How can I make them load the function?
<a onclick="load_content('p1');" >Page1</a>
<a onclick="load_content('p2');" >Page2</a>
function load_content(name)
{
window.history.pushState(null, null, "/?page=" + name + "");
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("response").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","load_content.php?name=" + name + "",true);
xmlhttp.send();
}
In the history.pushState, save all relevant data that is dynamic and then listen to the popState event and replace all elements just like you would do with AJAX.
Related
I'm having a weird problem...
I inserted an alert here:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
alert('fine');
}else {
alert('fail');
}
Both functions that call the xmlhttp alert "fail" but one works while the other does not.
I checked that the serialize was working, and it is, I get the written value in the form.
The php script doesn't show an error... any idea what could be going on? The calls are separate, not called simultaneously, I pretty much replicated the working one for the other call.
This is the full xmlhttp function of the working one
function insertEntry()
{
var data = $("#entry").serialize();
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
alert('fine');
}else {
alert('fail');
}
}
xmlhttp.open("POST","write-script.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
clearup();
showSuccess();
}
Not working, the alerts go all the way through
function insertNote()
{
alert('clicked');
var note = $("#note").serialize();
alert(note);
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
alert('fine');
}else {
alert('fail');
}
}
xmlhttp.open("POST","write-new-note.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(note);
alert('done');
}
Can't get responce from Following ajax Script That Call Php Script that Echo Cost Of Given Item name
function ajaxfunc2(Item_name)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("cost").value=xmlhttp.responseText;
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","find.php?Item="+Item_name,true);
xmlhttp.send(null);
}
But I will Get Output from Php File
with this link
127.0.0.1:8888/Pharmaceutical Distribution System/PDS/find.php?Item=1st tshirt
I made a chat website. And it has a div with id=chatlogs. I want it to get chatlogs from logs.php every 2 seconds. How can I do that? I want to use ajax with it and avoid using jquery.
You can do smoething like this:
<script>
setInterval(refresh_logs(), 2000); // 2000 = 2 Seconds
function refresh_logs()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("logs_div").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","get_logs.php",true);
xmlhttp.send();
}
</script>
<script>
function serviceAdd(rateid,vendorid,countrycode,destination,routetype,rate)
{
alert(rateid+vendorid+countrycode+destination+routetype+rate);
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","check_servicing.php?rate_id="+rateid+"&vendor_id="+vendorid+"&countrycode_id="+countrycode+"&destination_id="+destination+"&routetype_id="+routetype+"&rate="+rate+"",true);
xmlhttp.send();
}
</script>
This is the ajax function. Its values are fetched but not redirecting.
This page is not redirecting to check_servicing.php.
Please Help!!
i'm trying to replicate this sites checkout functionality http://eaglewools.globalbizcloud.com/our-products/
i have already got the functionalities working but the most important one for now is that for the variables to be updated i have to refresh the page thus i made a window.location.reload function whenever the user clicks "add to cart", but i want it to be like that on the original site, where the page isn't reloaded. my guess is that i need to use ajax to refresh the remote page, but with no luck.
function refreshData(str)
{
var str = "asd";
if (str=="")
{
window.location.reload()//document.getElementById("displayarea").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//popUpbox();
//window.location.reload()
//alert("<?php echo Process::items_in_cart(); ?>");//document.getElementById("displayarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","<?php echo $base_url;?>process.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//xmlhttp.send("product_id=" + str);
}