jQueryでXMLを正しく解析してもCSSが有効にならない

初めてjQuery Mobileを使用していますが、jQueryを少し使用しています。いくつかの迅速なアドバイスを望んでいた。jQueryでXMLを正しく解析してもCSSが有効にならない

私はいくつかのxmlを頭で解析し、divのリストとしてデータを<l>タグで書きます。リストはそこに表示されますが、jQuery Mobileのデフォルトのスタイルではフォーマットされていません。私は間違ってやっていることを確信していますが、スタイルを適用するために何をする必要があるのかわからなくても、データを「準備ができていない」状態にする必要があります。ここに私のコードです。

それは私が行方不明になっているので簡単です。私が<のハードコードの場合、>のHTMLタグはうまくいきますが、使用すると.append（）を使用すると、リストのフォーマットが表示されません。

あなたが持っている可能性のあるヒントを本当にありがとう。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Chart</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" /> 
    <script src="js/jquery-1.4.4.min.js"></script> 
    <script src="js/jquery.mobile-1.0a2.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() 
{ 
    $.ajax({ 
    type: "GET", 
    url: "xml/vc-data.xml", 
    dataType: "xml", 
    success: function(xml){ 
     // build country list 
     var currentCountry = ""; 
     var currentRegion = ""; 
     $("#countries").html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>'); 
     $(xml).find("charts").each(function() 
     { 
      var country = $(this).find('country').text(); 
      var region = $(this).find('region').text(); 
      if(currentCountry != country) { 
       //countryList += "<li><a href='#'>" + country + "</a></li>"; 
       $("<li data-role='list-divider'></li>") 
       .html(country) 
       .appendTo("#countries ul"); 
      } 
      if(currentRegion != region) { 
      $("<li></li>") 
       .html("<a href='#'>" + region + "</a>") 
       .appendTo("#countries ul"); 
      } 
      currentCountry = country; 
      currentRegion = region; 
     }); 
    } 
    }); 
}); 

</script> 
</head> 
<body> 

<!-- Start of first page --> 
<div data-role="page"> 

    <div data-role="header"> 
     <h1>Charts</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="countries" > 

    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

ねえ。お返事ありがとうございます。私は間違ったキーワードで検索していたと思います。なぜなら、これはどこでも見つけることができず、過去数日間停滞してしまったからです。私は本当にここの助けを感謝します。私はちょうどオプションとしてjqTouchに移ろうとしていましたが、これを動作させるのが大好きです。私はほとんどそこにいると思う。

私はこの追加しようとした：

$("#countries > ul").page();

を、それは何も影響を与えるdidntの。

は、私が追加：

間隔と全くリンクの色が、didntのスタイルの行に影響を与えた

$("#countries div > ul").page();

を、など

私はその後、いくつかのより多くの掘り、私のドキュメントでこれを見つけました逃した：

あなたがリストビューに項目を追加する場合、あなたはそれがスタイルを更新し、任意のを作成するためににrefresh（）メソッドをコールする必要があります追加されたネストされたリスト。の例では、$（ 'ul'）。listview（ 'refresh'）;

私はpage（）をこの行に置き換えて、それは栄光に尽きました。

$("#countries div > ul").listview('refresh');

出典

2010-12-10 dave

これは簡単なことではありません。それが終わったら、jQuery Mobileは新しく作成したものを自動的にフォーマットしません。私はそれがパフォーマンスの豚だろうと思う。

jQueryモバイル.page()メソッドを作成する最上位の要素に適用する必要があります。あなたのケースでは

は、私はそれがあるべきだと思う：

$("#countries>ul").page();

詳細HOWTO：http://jquerymobiledictionary.dyndns.org/faq.html

（ "どのように私はDOMに追加コンテンツでJQMの仕事を作るのですか？「質問）

[編集]

私は#countriesは、コンテンツ内のdiv要素があると仮定して、あなたはul要素を作成します。あなたは私がリンクのチュートリアルを読んでいない。あなたは絶対に作成する必要があります。それはすでにあったので、新たなラッピング要素HTMLソースに存在しない要素が.page()で使用することができます

使用このHTML

<div id="countries" data-role="page">  
    <div data-role="header"> 
     <h1>Chart</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="here"> 

    </div><!-- /content --> 
</div>

と成功の機能のため、このコード：

success: function(xml){ 
      // build country list 
      var currentCountry = ""; 
      var currentRegion = ""; 
      $('#here').html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>'); 
      var $here=$('#here > ul'); 

      //var countryList = ""; 
      $(xml).find("chart").each(function() 
      { 
       var country = $(this).find('country').text(); 
       var region = $(this).find('region').text(); 
       if(currentCountry != country) { 
        $("<li></li>").html(country).appendTo($here); 
       } 
       if(currentRegion != region) { 
        $("<li></li>").html("<a href='#'>" + region + "</a>").appendTo($here); 
       } 
       currentCountry = country; 
       currentRegion = region; 
      }); 

      $here.page(); 
     }

それはこれらのもののいずれかをチェック動作しない場合：

あなたはjqueryの1.4.3を使用する必要があり成功機能がある場合
参照（1.4.4をjqmいくつかの問題があります）まったく呼び出されていません

私はそれをテストしてくれました。

出典

2010-12-13 18:25:14 naugtur

私はここで同じ問題を抱えています：http://jsfiddle.net/UcrD8/6/ advice？ –

jQueryでXMLを正しく解析してもCSSが有効にならない

答えて

関連する問題