I have 2 ajax calls (one to fetch header content & one to fetch images content). Both are returned in JSON format. To render, I have 2 handlebar templates.
Issue is: only one of the handlebars template is being rendered (sometimes header gets rendered & sometimes images get rendered). URL: http://www.devfolio.info/ankit/index.php
CODE: JS File
function getPhotos(uid){
var dataString = 'action=viewPhotobank&uid=' + uid;
$.ajax({
type:"POST",
url: "/themesAssets/controller/actions.php",
data: dataString,
success: function(msg){
response = JSON.parse(msg);
if(response.statusPhotos == "success"){
if(typeof(afterGetUserphotobank) != 'undefined'){
afterGetUserphotobank();
} else{
var sourcePhotos = $("#images-template").html();
var templatePhotos = Handlebars.compile(sourcePhotos);
$("#content").fadeOut(animationTime, function(){
$("#content").html(templatePhotos(response))
.fadeIn(animationTime);
});
}
}
}
});
}
function getHeaderData(uid){
var dataString = 'action=getHeader&uid=' + uid;
$.ajax({
type:"POST",
url: "/themesAssets/controller/actions.php",
data: dataString,
success: function(msg){
response = JSON.parse(msg);
if(response.statusHeader == "success"){
if(typeof(afterGetSingleImage) != 'undefined'){
afterGetHeaderData();
} else{
var sourceHeader = $("#header-template").html();
var templateHeader = Handlebars.compile(sourceHeader);
$("#header").fadeOut(animationTime, function(){
$("#header").html(templateHeader(response))
.fadeIn(animationTime);
});
}
}
}
});
}
ON THE MAIN PAGE:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<script>
$(document).ready(function(){
getHeaderData(<?= $uid ?>);
getPhotos(<?=$uid?>);
});
</script>
<?php
require_once $rootFolder . '/themes/classy/headerTemplate.php';
require_once $rootFolder . '/themes/classy/imagesTemplate.php';
?>
</body>
<?php
require_once '../../global.php';
require_once $rootFolder . '/classes/portfoliodata.class.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
$data = new portfolioData();
$data->getViewport();
$data->getCharset();
$data->getCommonCSS();
$data->getCommonJS();
$data->getThemeCSS("classy", "grid");
?>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<?php
require_once $rootFolder . '/themes/classy/headerTemplate.php';
require_once $rootFolder . '/themes/classy/singleImageTemplate.php';
require_once $rootFolder . '/themes/classy/imagesTemplate.php';
?>
<script>
$(document).ready(function(){
getHeaderData(<?= $uid ?>);
getPhotos(<?= $uid ?>);
});
</script>
</body>
</html>
