hi i made an image slider. it loads all the images from the data base using php and for sliding and timing intervals i used javascrpt and ajax.
through back end of the systems can edit these images and upload new , update and delete.
i want to reflect the changes made in the back end straight away in the front end. so i used ajax request.
but unfortunately it doesn't work :(
this is the first time i'm doing such a thing using ajax. so there maybe errors and in-accurateness. I used ajax to refresh a div. so that div contains everything including php, ajax, javascript. an external file contains function which refreshes the whole thing.
i used firebug and when i check the code i can see the changes i applied through the front end. but the slider doesn't reflect those changes. response is also working as i can see it in firebug console. (also i used an alert() - it worked too).. i don't know how can fix this.. even why it doesn't work.
i will post the content inside that div.
<div id="imageSlider" style="display: none;">
<script type='text/javascript'>
var newImage=new Array();
var imageTime=new Array();
<?php
//$ad_con = new Ad_Controller();
$resutls1 = Ad_Controller::play_ads($_SESSION['level']);
if($lan==1)
$ad_img_dir='images/ad/';
else if($lan==2)
$ad_img_dir='images/ad/sinhala/';
else if($lan==3)
$ad_img_dir='images/ad/tamil/';
echo("dir='".$ad_img_dir."';");
$im=0;
$it=0;
foreach($resutls1 as $rec1){
if($lan==1)
echo("newImage[".$im."]='".$rec1['image']."';");
else if($lan==2)
echo("newImage[".$im."]='".$rec1['image_s']."';");
else if($lan==3)
echo("newImage[".$im."]='".$rec1['image_t']."';");
$im++;
}
foreach($resutls1 as $rec1){
$lev=$_SESSION['level'].'time';
echo("imageTime[".$it."]='".$rec1[$lev]."';");
$it++;
}
?>
var bottom = 0;
var padding = 5;
var X = 5;
var Y = 0;
function dropMyPopup() {
Y++; Y++;
if( Y > bottom ){return;}
document.getElementById("styled_popup").style.top = Y + "px";
setTimeout("dropMyPopup()", 25);
}
function fireMyPopup(img) {
var scrolledY;
if( self.pageYOffset ) {
scrolledY = self.pageYOffset;
} else if( document.documentElement && document.documentElement.scrollTop ) {
scrolledY = document.documentElement.scrollTop;
} else if( document.body ) {
scrolledY = document.body.scrollTop;
}
var centerY;
if( self.innerHeight ) {
centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerY = document.documentElement.clientHeight;
} else if( document.body ) {
centerY = document.body.clientHeight;
}
// Don't forget to subtract popup's height! ( 300 in our case )
bottom = scrolledY + centerY - padding - ((centerY*30)/100) -((centerY*16)/100);
Y = scrolledY;
document.getElementById("styled_popup").style.right = X + "px";
document.getElementById("styled_popup").style.display = "block";
document.getElementById('styled_popup').style.backgroundImage = "url("+dir+newImage[img]+")";
dropMyPopup();
var dtime=parseInt(imageTime[img])+7000;
setTimeout("styledPopupClose()", dtime);
if(img!=(newImage.length)){
htime=img+1;
var ddtime=dtime+5000;
setTimeout(function(){fireMyPopup(htime)},ddtime);
}
else if(img==(newImage.length)){
//Y = 0;
setTimeout(function(){fireMyPopup(0)}, 5000);
}
}
function styledPopupClose() {
document.getElementById("styled_popup").style.display = "none";
Y = bottom; // if it was closed, make sure extra computations are done in dropMyPopup()
}
</script>
</div>