I am having a problem and I no doubt suspect my novice skills with AJAX and JSON. My setup is this: I have a wallboard javscript object that is called at the end of my HTML. After wallboard is instantiated, I have script tags (not a fan of these hanging out in the tail end of my HTML) that create my BXSlider object. Both my wallboard object and my bxslider object have internal ajax calls, with one being getJSON. My problem is this: To no surprise my asynchronous calls are not returning their response in time for the page to accept the data. Of course if I throw in an alert('test'); it gives the process enough time to load for Firefox 12, but it still doesn't work in Safari 5.1 or IE 9.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Wallboard</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.bxSlider.min.js" type="text/javascript"></script>
<script src="Scripts/wallboard.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/yui.js"></script>
<style type="text/css">
body {
overflow-x: auto;
overflow-y: auto;
}
body, h1 {
margin: 0;
}
#container {
display: inline;
}
#leftPanel {
position:fixed;
width: 350px;
background-color: #E0DEDE;
border-right: 1px solid gray;
border-left: 1px solid gray;
}
#rightPanel {
position: relative;
margin-left: 352px;
background-color: #F2EFEF;
border-left: 1px solid #FFF;
}
#rightPanelStatus {
position: absolute;
bottom: 0px;
width: 100%;
background-color: gray;
border-top: 1px solid darkgray;
}
#rightPanelStatus .cmdBar {
text-align: center;
}
#slideContainer {
list-style: none;
}
li {
text-align: center;
}
img {
height: 169px;
width: 169px;
}
.slideControl {
display: inline;
cursor: pointer;
}
#playControl, #pauseControl {
margin: 10px;
padding: 0 5px 0 5px;
}
</style>
</head>
<body onresize="changeHeight();">
<div id="container">
<div id="leftPanel">
<ul id="slideContainer">
</ul>
</div>
<div id="rightPanel">
<div id="rightPanelContainer">
</div>
<div id="rightPanelStatus">
<div class="cmdBar"><div id="playControl" class="slideControl">Play</div><div id="pauseControl" class="slideControl">Pause</div></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/* scale container height to adjust to browser window size. IE 7 hates this! */
function changeHeight() {
var sh = 460;
if (document.body && document.body.offsetWidth) {
sh = document.body.offsetHeight;
}
if (document.compatMode == 'CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth) {
sh = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
sh = window.innerHeight;
}
document.getElementById("container").style.height = sh + "px";
document.getElementById("leftPanel").style.height = sh + "px";
document.getElementById("rightPanel").style.height = sh + "px";
}
/* initial call to get browser screen size after page loads */
changeHeight();
</script>
<script type="text/javascript">
/* wallboard object */
myWallboard = new wallboard();
myWallboard.loadSlides();
alert('test'); // THIS IS THE ABOVEMENTIONED ALERT TEST
$(document).ready(function () {
/* slider object */
var slider = $('#slideContainer').bxSlider({
auto: true,
autoControls: false,
mode: 'vertical',
controls: false,
speed: 1000,
displaySlideQty: 5,
moveSlideQty: 1,
onBeforeSlide: function (currentSlide) {
myWallboard.setSlideSpeed(slider, currentSlide, myWallboard.slides);
myWallboard.AJAXRequest(myWallboard.slides[currentSlide][1], 'rightPanelContainer');
}
});
var cs = slider.getCurrentSlide();
myWallboard.setSlideSpeed(slider, cs, myWallboard.slides);
myWallboard.AJAXRequest(myWallboard.slides[cs][1], 'rightPanelContainer');
/* controls */
$('#pauseControl').click(function () {
document.getElementById('pauseControl').style.backgroundColor = "#C4C4C4"
document.getElementById('pauseControl').style.padding = "4px"
document.getElementById('playControl').style.backgroundColor = ""
document.getElementById('playControl').style.padding = "0 4px 0 4px"
myWallboard.stopSlideTimer();
slider.stopShow();
return false;
});
$('#playControl').click(function () {
document.getElementById('playControl').style.backgroundColor = "#C4C4C4"
document.getElementById('playControl').style.padding = "4px"
document.getElementById('pauseControl').style.backgroundColor = ""
document.getElementById('pauseControl').style.padding = "0 4px 0 4px"
slider.startShow();
return false;
});
});
</script>
</html>
wallboard.js
/* wallboard constructor */
function wallboard() {
var t = 0;
var _this = this;
this.slides = new Array(5);
/* create a multidimensional array of each slide. */
for (var i = 0; i < this.slides.length; i++) {
/* create next dimension (url) */
this.slides[i] = new Array(3);
}
this.loadSlides = function () {
var _this = this;
$.getJSON('jsonReturn.aspx', function (json, status) {
var i = 0;
$.each(json, function (key, val) {
_this.slides[i][0] = val.imagePath;
_this.slides[i][1] = val.url;
_this.slides[i][2] = val.duration;
i++;
});
for (var i = 0; i < _this.slides.length; i++) {
document.getElementById('slideContainer').innerHTML += '<li><img src="' + _this.slides[i][0] + '" /></li>\n';
}
});
}
this.startSlide = function (slider) {
slider.startShow();
}
this.stopSlideTimer = function () {
try {
// alert("pausing slides. killing setTimeout " + t);
clearTimeout(t);
return false;
}
catch (err) {
alert("Could not stop slide timer.");
}
}
this.setSlideSpeed = function (slider, cs, sa) {
var _this = this;
clearTimeout(t);
slider.stopShow();
//alert('testing sa[cs][2]: ' + sa[cs][2]);
t = setTimeout(function () { _this.startSlide(slider); }, sa[cs][2] * 1000);
}
this.AJAXRequest = function (uri, div) { // leftover YUI, replace with jQuery
// Create a YUI instance using io-base module.
YUI().use("io-base",
function (Y) {
/* the following can be used to post variables to a page this
may be useful for sending parameters to a server side page */
var cfg = {
method: 'POST',
form: {
id: 'myform',
useDisabled: false
}
};
{
// Define a function to handle the Ajax response data.
function complete(id, o, args) {
// used for debugging
//alert("id:" + id + ", o.responseText: " + o.responseText + ", args: " + args);
// put the html returned in the main slide div
document.getElementById(div).innerHTML = o.responseText;
};
// Subscribe to event "io:complete", and pass an array
// as an argument to the event handler "complete"
Y.on('io:complete', complete, Y, ['arguments (these may not be needed)']);
var request = Y.io(uri);
}
});
}
}
So, how do I rework my code such that AJAX calls finish and that data is available for the bxslider and wallboard objects? While I found many questions regarding similar issues, I was unable to use their solutions to fix this problem.
Thanks, Brian
