2

私はJQueryとWeb開発全般に不慣れです。XMLファイルからいくつかのデータをロードして、順序付けされていないリストを作成しようとしています。その部分は機能していますが、データを折りたたんだり展開したりできるように、 TreeViewプラグインを使用しようとしています。データは次のようにロードされます。

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "solutions.xml",
        dataType: ($.browser.msie) ? "text" : "xml",
        success: function(data) {
            var xml;
            if (typeof data == "string") {
                // Work around IE6 lameness
                xml = new ActiveXObject("Microsoft.XMLDOM");
                xml.async = false;
                xml.loadXML(data);
            } else {
                xml = data;
            }

            list = ""
            $(xml).find("Group").each(function() {
                group = $(this).attr("name");
                list += "<li><span>" + group + "</span><ul>";

                $(this).find("Solution").each(function() {
                    solution = $(this).attr("name");
                    list += "<li><span>" + solution + "</span></li>";
               });

               list += "</ul></li>";
            });

            $("#groups").html(list);           
        },

        error: function(x) {
            alert("Error processing solutions.xml.");
        }
    });

    $("#groups").treeview({
        toggle: function() {
            console.log("%s was toggled.", $(this).find(">span").text());
        }
    });
});

HTMLは次のようになります。

<html>
  ...
  <body>
    <ul id="groups">
    </ul>
  </body>
</html>

順序付けされていないリストは正しく表示されますが、小さな[+]および[-]記号は表示されず、セクションは折りたたみ/展開できません。Ajaxの読み込みを削除し、順序付けされていないリストを手動で#groups内に挿入すると、期待どおりに機能します。

私は何が間違っているのですか？これを簡単にすることができる他のプラグインまたはJavascriptライブラリはありますか？このソリューションは、IE6でローカル（つまりWebサーバー）で動作する必要があります。

更新：回避策を見つけました：ツリービューのものを次のように定義すると、次のように機能します。

function makeTreeview() {
    $("#container").treeview({
        toggle: function() {
            console.log("%s was toggled.", $(this).find(">span").text());
        }
    });
}
setTimeout('makeTreeview();', 50);

問題は、treeviewを作成するときに、ajaxのものがまだ機能していないため、treeview（）が呼び出されたときに、順序付けされていないリストがまだ作成されていないことだと思います。私はまだIE6でこれをテストしていません。SetTimeout（）を使用せずに、これを行うためのより良い方法はありますか？

4

3 に答える 3

4

私は別のプロジェクトに対して同じタイプの電話をかけました。他の理由で、おそらくajax呼び出しを無名関数でラップしてクロージャを作成し、変数が期待どおりのままになるようにします...

successメソッドは、呼び出しが完了した後に発生するコールバック関数です。そのメソッド内にツリービューを作成するか、明確にする必要がある場合は、別の関数に分割します。

表示されている例では、ajax呼び出しに50ミリ秒以上かかる場合でも、ツリービューは失敗します。これは、同じサーバーから3つ以上のオブジェクトがロードされている場合、初期ロード中に簡単に発生する可能性があります。

この例では、JSONを使用し、ページメソッドから一連のdivにhtmlデータを同時にロードしました。

$(document).ready(function() { 
for (i= 1;i<=4;i++) 
{ 
(function (){
     var divname ="#queuediv"+i; 

    $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      url: "test12.aspx/GetHtmlTest", 
      data: "{}", 
      error: function(xhr, status, error) { 
          alert("AJAX Error!"); 
      }, 
       success: function(msg) { 
        $(divname).removeClass('isequeue_updating'); 
        $(divname).html(msg); 
        $("#somethingfromthemsg").treeview(); 
      } 
    });
})(); 
} 
});

お役に立てば幸いです。

于 2009-04-22T05:07:47.543 に答える
0

この投稿への道を見つけた人のために。私はajax呼び出しでこの問題を抱えていました。

ajax呼び出しが返されるのを待ちたい場合は、asyncをfalseに設定する必要があります。

$.ajax({
 type: 'POST',
 async: false,
 ........
于 2011-02-09T14:34:15.730 に答える
0

FireBug（Firefoxアドイン）を入手する必要があります。そうすると、コンソールで何が返されるかを確認し、期待どおりであることを確認できます（実際にリクエストを実行していることを確認してください）。

FFで動作させると、10年前の古いIE6ブラウザーをサポートできるようになります。

あなたが考慮したいと思うかもしれない他のいくつかの事柄もあります：

ActiveXObject（ "Microsoft.XMLDOM"）全体が、不要なものとして私として飛び出します。XMLを文字列で$（）に渡すと、jQueryはそれをDOMオブジェクトに変換します。

さらに、.Findは次のように置き換えることができます。

$('Element', this);

したがって、たとえば：

var xmlDoc = '<Group><Solution name="foo" /><Solution name="bar" /></Group>';
$('Solution', xmlDoc).each(function() { 
  document.write( $(this).attr('name') );
});

吐き出すだろう：

foo
bar

また、firebugを使用して、console.log（list）;を貼り付けます。最後に、自分が思っているHTMLを生成していることを確認します。あなたが本当にIE6で立ち往生しているなら、alert（list）は（ファイルが大きすぎない限り）貧乏人の同等物としていくらか機能します。

要するに、あなたは正しい方向に進んでいると思います。適切にデバッグするためのツールが必要なだけです。

于 2009-04-21T03:55:39.707 に答える