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.