JSが正常な動作しないのはなぜ？

質問

HPを、ファイルから読み込んで表示するように変更しようと、Adobe Spry(Tab)とPrototype.jsを使って、JSで組みました。
内容は、csvファイルを読み取って、HTMLコードを生成し、Spryの指定のID(tabPanel1)に挿入して、Spryを起動するようにしています。が、最後のSpryがなぜか(タブ機能が）機能しません。起動直前にブレイクポインタを入れてとめると、ちゃんとタブが機能するようになります。デバッグ環境はFireFox3.5.7+FireBug on WindowsXP SP3+Apache2.5です。
問題のソースですが下記の通りです。

var TAB = String.fromCharCode( 9 ) ;
var LFR = String.fromCharCode( 13 ) + String.fromCharCode( 10 ) ;

window.onload = function() {

// データファイルの読み取り
var myData = new Ajax.Request( "data/linkdata.csv" , {
method: "get",
onSuccess:function(httpObj){
var line = httpObj.responseText ;
var col = new Array(3) ;
var bFlg = false ;
var src1 = "<ul class='TabbedPanelsTabGroup'>" ;
var src2 = "<div class='TabbedPanelsContentGroup'>" ;

//var list = line.split("\n") ;
var list = line.split( LFR ) ;

for ( var i = 0; i < list.length ; i++ ){
if ( list[ i ].length == 0 ) break ;

var dlist = list[ i ].split(TAB) ;

if ( dlist[ 0 ].length > 0 ) { // 表題の設定
if ( bFlg ) {
src2 += "</TABLE></div></div>" ;
}

src1 += "<li class='TabbedPanelsTab' tabindex='0'>" ;
src1 += dlist[ 0 ] ;
src1 += "</div></li>" ;

src2 += "<div class='TabbedPanelsContent'>" ;
src2 += dlist[ 0 ] ;
src2 += "<TABLE width='605' bgcolor='#ffffff' border='2'>" ;
src2 += "<TR>" ;
src2 += "<TD align='center' width='150' bgcolor='" + "'><b>名称</b></TD>" ;
src2 += "<TD align='center' width='450' bgcolor='" + "'><b>内容</b></TD></TR>" ;

}else{ // 明細の設定
src2 += "<TR>" ;
src2 += "<TD><FONT size=-1><A target='_blank' href='" + dlist[2] + "'>"
src2 += dlist[ 1 ] + "</A></FONT></TD>" ;
src2 += "<TD><FONT size=-1>" + dlist[3] + "</FONT></TD>" ;
src2 += "</TR>" ;

bFlg = true ;
}

}

src1 += "</ul>" ;
src2 += "</div>" ;

$('tabPanel1').innerHTML = src1 + src2 ;

},
onFailure:function(httpObj){
$('tabPanel1').innerHTML = "エラーにより読み込めませんでした";
}
});

var tbObj1 = new Spry.Widget.TabbedPanels("tabPanel1");

}

ここ数日ははまっていて、最後の関門でどうしてもうまく行きません。見ただけではわかりませんかもしれませんが、よろしくお願いします。なお、こちらはJSをはじめてからまだ、１年未満です。

回答No.2

みずの（@mizuno3） · ベストアンサー

言わんとするとこは、「データの処理を待つ」です。
プロセス管理というかマルチスレッド管理かなと思います。

Ajax.RequestにあるonSuccessが良い例かと思います。
これはデータの処理を待つ一つの方法ですね。
このメソッドは予定している処理の完了を待たずに次の処理に移ります。

Javascriptの持つイベントハンドラにもonloadとかがありますが、あれと同じです。

第２引数にあるobjectのonSuccessやonFailureは「データの取得が終わったら」動かしたい関数です。
Requestメソッドに渡したonSuccessがtabPanel1のDOMを作ってるんですよね。きっと。

Spry.Widget.TabbedPanels()ではtabPanel1をかっこよくするためのものかな？と思うのです。

つまり、

１．データの読み込み
２．データの形成
３．データをカッコよくする

てな処理の流れになると思うのです。
この処理に時間差があることに気を使う必要があります。

クロージャとかEventListenerなどを調べてみると良いかもしれません。

お礼

大変参考なりました。ありがとうございました。
完全にできることを確認できるまでと思いましたが、現在、中断しているため、また、新たな疑問として別とアップすることにします。

回答No.1

みずの（@mizuno3）

>起動直前にブレイクポインタを入れてとめると、ちゃんとタブが機能するようになります

ということなので、時間差でObjectが出来上がる前に操作をしようとしているんじゃないですか？

var tbObj1 = new Spry.Widget.TabbedPanels("tabPanel1");
↑こいつの処理タイミングを変えてみるとか。

$('tabPanel1').innerHTML = src1 + src2 ;
勘だとこれの次あたり。

補足

言わんとするところは、プロセス管理をして、

var myData = new Ajax.Request( "data/linkdata.csv" , {

の処理が終わるまで待てばよいという意味でしょうか？
しかし、Javascriptでプロセス管理ができるのでしょうか？できないのであれば、もともと無理ということ？