Me and a friend are having some problems with jQuery ..
If we rely on a code to make the back and forth button of the browser work on our site, with the function of a div refresh without refresh ...
The code is working in parts, however I am having to deal with the following errors:
1st When I enter page 1, then page 2 and try to return through the browser arrow, the content, title of the site and url buga.
Home
Here is the code:
<?php
$isXHR = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtoupper($_SERVER['HTTP_X_REQUESTED_WITH']) === 'XMLHTTPREQUEST';
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inicio</title>
<script src="jquery.min.js"></script>
<script>
$(function () {
var load = function (url) {
$.get(url).done(function (data) {
var title = $(data).filter('title').text();
$("title").html(title);
$("#content").html(data);
})
};
$(document).on('click', 'a', function (e) {
e.preventDefault();
var $this = $(this),
url = $this.attr("href"),
title = title;
history.pushState({
url: url,
title: title
}, title, url);
document.title = title;
load(url);
});
$(window).on('popstate', function (e) {
var state = e.originalEvent.state;
if (state !== null) {
document.title = state.title;
load(state.url);
} else {
//var title = $(state).filter('title').text();
//document.title = title;
$("#content").empty();
}
});
});
</script>
</head>
<body>
<?php
if (!$isXHR) {
echo "
<ul>
<li><a href=\"index.php\">Inicio</a></li>
<li><a href=\"abc.php\">Página 2</a></li>
<li><a href=\"abc2.php\">Página 3</a></li>
</ul>
";}
?>
<div id="content">Página 1</div>
</body>
</html>abc.php (page 2)
<?php
$isXHR = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtoupper($_SERVER['HTTP_X_REQUESTED_WITH']) === 'XMLHTTPREQUEST';
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página 2</title>
<script src="jquery.min.js"></script>
<script>
$(function () {
var load = function (url) {
$.get(url).done(function (data) {
var title = $(data).filter('title').text();
$("title").html(title);
$("#content").html(data);
})
};
$(document).on('click', 'a', function (e) {
e.preventDefault();
var $this = $(this),
url = $this.attr("href"),
title = title;
history.pushState({
url: url,
title: title
}, title, url);
document.title = title;
load(url);
});
$(window).on('popstate', function (e) {
var state = e.originalEvent.state;
if (state !== null) {
document.title = state.title;
load(state.url);
} else {
//var title = $(state).filter('title').text();
//document.title = title;
$("#content").empty();
}
});
});
</script>
</head>
<body>
<?php
if (!$isXHR) {
echo "
<ul>
<li><a href=\"index.php\">Inicio</a></li>
<li><a href=\"abc.php\">Página 2</a></li>
<li><a href=\"abc2.php\">Página 3</a></li>
</ul>
";}
?>
<div id="content">Página 2</div>
</body>abc2.php (page 3)
<?php
$isXHR = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtoupper($_SERVER['HTTP_X_REQUESTED_WITH']) === 'XMLHTTPREQUEST';
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página 3</title>
<script src="jquery.min.js"></script>
<script>
$(function () {
var load = function (url) {
$.get(url).done(function (data) {
var title = $(data).filter('title').text();
$("title").html(title);
$("#content").html(data);
})
};
$(document).on('click', 'a', function (e) {
e.preventDefault();
var $this = $(this),
url = $this.attr("href"),
title = title;
history.pushState({
url: url,
title: title
}, title, url);
document.title = title;
load(url);
});
$(window).on('popstate', function (e) {
var state = e.originalEvent.state;
if (state !== null) {
document.title = state.title;
load(state.url);
} else {
//var title = $(state).filter('title').text();
//document.title = title;
$("#content").empty();
}
});
});
</script>
</head>
<body>
<?php
if (!$isXHR) {
echo "
<ul>
<li><a href=\"index.php\">Inicio</a></li>
<li><a href=\"abc.php\">Página 2</a></li>
<li><a href=\"abc2.php\">Página 3</a></li>
</ul>
";}
?>
<div id="content">Página 3</div>
</body>
</html>About possible duplicate ... this way you inform, you can not return the content with the arrow in the browser. They also did not give a specific answer.