ajax - ajax および getjson 応答からのデータは、ページの残りの JavaScript では使用できません。

Question

私は問題を抱えており、AJAX と JSON の初心者のスキルを疑いません。私のセットアップは次のとおりです。HTML の最後で呼び出されるウォールボードの JavaScript オブジェクトがあります。ウォールボードがインスタンス化された後、BXSlider オブジェクトを作成するスクリプトタグ (HTML の末尾にぶら下がっているこれらのファンではありません) があります。ウォールボードオブジェクトと bxslider オブジェクトの両方に内部 ajax 呼び出しがあり、そのうちの 1 つは getJSON です。私の問題はこれです: 当然のことながら、私の非同期呼び出しは、ページがデータを受け入れるのに間に合うように応答を返しません。もちろん、alert('test'); を投入するとプロセスが Firefox 12 をロードするのに十分な時間を与えますが、Safari 5.1 または 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);
            }
        });
    }
}

では、AJAX 呼び出しが終了し、データが bxslider および wallboard オブジェクトで使用できるようにコードを書き直すにはどうすればよいでしょうか? 同様の問題に関する多くの質問を見つけましたが、それらの解決策を使用してこの問題を解決することはできませんでした.

ありがとう、ブライアン

ajax - ajax および getjson 応答からのデータは、ページの残りの JavaScript では使用できません。

0 に答える 0

Related

Reference