I have two pages who share a single header, footer. First page is wall.php second page is profile.php. Inside wall.php am fetching post items from all my friends. Inside profile.php am fetching just my posts. Now all that am doing woth ajax jquery. Debuging code with fire bug when i call wall.php one ajax request is executed. When i go on profile page i have double the some ajax request executed. Check screenshot
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.min.js"></script>
</head>
<body>
<!-- Get flash messages -->
<?= $template->Flash()->render(); ?>
<!-- Get content -->
<?= $template->Content(); ?>
</body>
</html>
Custom.js
$(document).ready(function() {
Post.loadAll(); // load all post when document is ready
}
var Post = {
loadAll: function() {
var list = $("div.post-list");
$(".post-loader").show();
$.ajax({
type: "post",
cache: false,
url: baseurl + "/post/list_post",
success: function (r) {
list.append(r); // add post on page
$(".post-loader").hide();
},
error: function(response, s, e) {
list.html(response.responseText);
},
});
},
}
Profile.php and Wall.php have the some list for post listing
<!-- Profile posts -->
<div id="post-list" class="post-list">
<?= if($posts): ?>
<?php foreach($posts as $post): ?>
//.... post data(title, desc)
<?php endforeach; ?>
<?php endif; ?>
</div>
So problem is only on profile.php double request is executed. On wall.php all work good and just one request is executed.
