jQueryモバイルはデータを正しく自動調整できません

私はPhoneGapとjQueryモバイルでIOSアプリケーションを作成しようとしています。 ターゲットは、Webサービスからニュースデータ(json)を受信して​​表示することです。 jquery mobileのオートデバイダ機能を除いて、すべて動作します。

JS:

<script>
$(document).on("pageinit", "#news", function(){
    $("#newsContainer ul").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr("category");
            return out;
        }
    }).listview("refresh");

    getNews(15);

    function getNews(count){
        $.ajax({
            url: '*someURL*/file.php?count='+count,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){

                    $.each(data, function(i,item){ 
                        $('#newsContainer ul').append('
  • '+item.image+'<div style="float:left;white-space:normal;">'+item.headline+'</div><div style="float:left">'+item.content+'</div></div>
  • ').listview('refresh');
                        });
    
                    $('#newsContainer ul').listview('refresh');
    
                },
                error: function(){
                    console.log('Fehler bei JSON Verarbeitung');
                    $('#newsContainer ul').append('
  • Es ist ein Fehler beim Laden der News aufgetreten
  • ').listview('refresh');
                }
            });
    
        }
    
    });
    </script>
    

    HTML:

    <div data-role="page" id="news">
        <div data-role="header">
            

    News

     
        </div>
    
        <div data-role="content" id="newsContainer">
            
          </div>
      
          <div data-role="footer" class="ui-bar ui-block-a" data-position="fixed" data-id="myFooter">
              <div data-role="navbar">
                  
              </div>
          </div>
      </div>
      

      Unfortunately, it doesn't merge all the equal values together. I attached an image to better demonstrate the issue.

      jquery Mobile autodivider Issue

      1
      まず、 pageinitready を使用する理由は何ですか? ready はjQuery Mobileで使用しないでください。 ready を削除し、適切な jQuery Mobileイベントを使用してください。アイテムを追加し終わった後で、リストビューをリフレッシュします(ループが終了したら)。 $( '#newsContainer')。listview( 'refresh');
      追加された 著者 Omar,
      追加された 著者 Omar,
      pageinfopagebeforeshow に置き換えてみてください。ここで $( "#newsContainer ul")。listview( ul
      追加された 著者 Omar,
      pageinfopagebeforeshow に置き換えてみてください。ここで $( "#newsContainer ul")。listview( ul
      追加された 著者 Omar,
      申し訳ありません私の悪い、私はこれを実現しました。
      追加された 著者 Omar,
      申し訳ありません私の悪い、私はこれを実現しました。
      追加された 著者 Omar,
      申し訳ありません私の悪い、私はこれを実現しました。
      追加された 著者 Omar,
      $( "#newsContainer ul")。listview({ ul を削除してください。
      追加された 著者 Omar,
      $( "#newsContainer ul")。listview({ ul を削除してください。
      追加された 著者 Omar,
      私は特別なjQueryモバイルイベントを認識していませんでした。 pageinit の中にすべてを挿入し、ループの直後にリフレッシュを追加しましたが、何も変更されませんでした。
      追加された 著者 enyce12,
      ul を削除すると、まったく動作しません。
      追加された 著者 enyce12,
      ul を削除すると、まったく動作しません。
      追加された 著者 enyce12,
      ul を削除すると、まったく動作しません。
      追加された 著者 enyce12,
      それはうまくいかない。
      追加された 著者 enyce12,
      それはうまくいかない。
      追加された 著者 enyce12,
      それはうまくいかない。
      追加された 著者 enyce12,
      私は特別なjQueryモバイルイベントを認識していませんでした。 pageinit の中にすべてを挿入し、ループの直後にリフレッシュを追加しましたが、何も変更されませんでした。
      追加された 著者 enyce12,

      8 答え

      私はこのリンクを思いついた:

      http://forum.jquery.com/topic/autodivider-features-group-count

      コードを置き換えてくれました。

      jquery mobileは同じ値を持つ項目をグループ化することはできません。

      1
      追加された

      私はこのリンクを思いついた:

      http://forum.jquery.com/topic/autodivider-features-group-count

      コードを置き換えてくれました。

      jquery mobileは同じ値を持つ項目をグループ化することはできません。

      1
      追加された

      私はこのリンクを思いついた:

      http://forum.jquery.com/topic/autodivider-features-group-count

      コードを置き換えてくれました。

      jquery mobileは同じ値を持つ項目をグループ化することはできません。

      1
      追加された

      私はこのリンクを思いついた:

      http://forum.jquery.com/topic/autodivider-features-group-count

      コードを置き換えてくれました。

      jquery mobileは同じ値を持つ項目をグループ化することはできません。

      1
      追加された

      私はその質問が古いことを認識していますが、誰も十分な解決策を提供していないので、ここに私の試みがあります。

      リストビューウィジェットはあなたのためにli要素をソートしません。自分でそれを行う必要があります。

      You can easily do this by using the tsort-plugin: http://tinysort.sjeiti.com/

      var thisView = $('.listview');
      $('li',thisView).tsort();
      thisView.listview().listview('refresh');
      
      1
      追加された
      私のために働いた!ありがとう
      追加された 著者 fnkbz,

      私はその質問が古いことを認識していますが、誰も十分な解決策を提供していないので、ここに私の試みがあります。

      リストビューウィジェットはあなたのためにli要素をソートしません。自分でそれを行う必要があります。

      You can easily do this by using the tsort-plugin: http://tinysort.sjeiti.com/

      var thisView = $('.listview');
      $('li',thisView).tsort();
      thisView.listview().listview('refresh');
      
      1
      追加された
      私のために働いた!ありがとう
      追加された 著者 fnkbz,

      私はその質問が古いことを認識していますが、誰も十分な解決策を提供していないので、ここに私の試みがあります。

      リストビューウィジェットはあなたのためにli要素をソートしません。自分でそれを行う必要があります。

      You can easily do this by using the tsort-plugin: http://tinysort.sjeiti.com/

      var thisView = $('.listview');
      $('li',thisView).tsort();
      thisView.listview().listview('refresh');
      
      1
      追加された
      私のために働いた!ありがとう
      追加された 著者 fnkbz,

      私はその質問が古いことを認識していますが、誰も十分な解決策を提供していないので、ここに私の試みがあります。

      リストビューウィジェットはあなたのためにli要素をソートしません。自分でそれを行う必要があります。

      You can easily do this by using the tsort-plugin: http://tinysort.sjeiti.com/

      var thisView = $('.listview');
      $('li',thisView).tsort();
      thisView.listview().listview('refresh');
      
      1
      追加された
      私のために働いた!ありがとう
      追加された 著者 fnkbz,