jQuery Mobileに要素を動的に追加ListView

JSOn形式のURLを介して受け取ったデータをリストビューに動的に追加したい。しかし、私はそれがどのように動作するか把握することはできません。私は1つのListViewコントロールと私は受け取ったデータを追加しようとする機能を、持っているの.htmlでjQuery Mobileに要素を動的に追加ListView

[ 
    {"id":1, "start":"2011-10-29T13:15:00.000+10:00", "end":"2011-10-29T14:15:00.000+10:00", "title":"Meeting"} 
]

：

携帯サイト

は、次の形式でオブジェクトを取得します。私は体だけを見せている。

<body> 
     <div> 
      <ul id="listview"> 
       <script>$.getJSON("url", 
       function(data){ 
        $.each(data, function(i,data){ 
         i.title.appendTo("#listview"); 
        });});</script> 
      </ul> 
     </div> 
</body>

は、おそらくそれは非常に簡単ですが、私は、Webプログラミングに新たなんだと私は取得したデータを追加する必要があることをどのように把握することはできません。

誰でもお手伝いできますか？

出典

2011-10-31 João Nunes

//make AJAX call to url 
$.getJSON("url", function(data){ 

    //declare a variable with which to build our output (it's best to buffer output and only do one append at the end since DOM manipulation is CPU expensive) 
    var output = ''; 

    //iterate through the data (we could also get rid of the jQuery here by using `for (key in data) { 
    $.each(data, function(index, value){ 

     //add each value to the output buffer (we also have access to the other properties of this object: id, start, and end) 
     output += '<li>' + value.title + '</li>'; 
    }); 

    //now append the buffered output to the listview and either refresh the listview or create it (meaning have jQuery Mobile style the list) 
    $('#listview').append(output).listview('refresh');//or if the listview has yet to be initialized, use `.trigger('create');` instead of `.listview('refresh');` 
});

は、上記溶液のjsfiddleである（またfor(){}代わり$.each()の使用例があります）貼り付けまたは削除後にリストビューをリフレッシュします。リフレッシュしない限り、何も見えません。

$('#listview').append(output).listview('refresh');

出典

2011-11-01 00:55:00 Jasper

ありがとう、それは私のために働いた。 –

.listview（ 'refresh'）は私が必要としたものです。 – mintedsky

あなたが遭遇している問題は、返されるJSONがオブジェクトが配列にラップされていることです。あなたが最初の配列を反復処理する必要があります解析するには：http://jsfiddle.net/VqULm/

出典

2011-10-31 23:57:55 buley

私はそれが問題だと思いますが、残念ながらすべてを解決しませんでした。別の問題があるはずです。とにかくありがとう;） –

てください：

for(var x = 0; x < data.length; x++) { 
var i = data[ x ]; 
i.title.appendTo("#listview"); 
}

ここ

出典

2012-01-04 10:15:47 shyamshyre

私は追加のために働いてthis..Itsのように追加しています。.. それは、あなたや他の人のために役立つかもしれない:)

  $.each(data.values, function(key, value) { 

      $('#activity_contacts').append('<li id="activity_contacts" data-id="' + value.contact_id + '">' + value.display_name + '</li>'); 
      $("#activity_contacts").listview("refresh"); 


      });

私の全体のオートコンプリートは、このようなものです：

function contactSearchForActivities (q) { 
    $.mobile.showPageLoadingMsg('Searching'); 
    $().crmAPI ('Contact','get', 
     {'version' :'3', 'activity_sort_name': q, 'return' : 'display_name' }, 
     { 
     ajaxURL: crmajaxURL, 
     success:function (data){ 
      if (data.count == 0) { 
      cmd = null; 
      } 
      else { 
      cmd = "refresh"; 
      $('#activity_contacts').show(); 
      $('#activity_contacts').empty(); 
      } 
      //console.log(data); 

      //loop to go through the values in order to display them in a li as a list 


      $.each(data.values, function(key, value) { 

      $('#activity_contacts').append('<li id="' + value.contact_id + '" title = "' + value.display_name +'">' + value.display_name + '</li>'); 

    }); 

    $("#activity_contacts li").click(function() { 

    $('#activity_sort_name').val(this.title); 
    $('#activity_hidden_id').val(this.id); 
      $("#activity_contacts").empty(); 
    }); 

      $.mobile.hidePageLoadingMsg(); 
      $('#activity_contacts').listview(cmd); 
     } 
     }); 
    }

出典

2013-03-26 17:25:42 Developer

リストビューを再作成する場合は、リストを.trigger（作成）および.listview（リフレッシュ）する必要があります。問題はhttp://liljosh.com/jquery-mobile-dynamicly-appending-to-listview-via-ajax-issue/で説明されています

出典

2014-03-09 16:07:46

こんにちはジョシュ！ [self promotion]（http://stackoverflow.com/help/behavior）に関するポリシーを読んでください。さらに、同じ問題についてメタについて話している多くの記事があります。ここにそれらの1つがあります - http://meta.stackexchange.com/questions/57497/limits-for-self-promotion-in-answers – Lix

あなたのプロフィールで見ることができるところから、あなたは自己宣伝しています**かなりたくさん**。 – Lix

jQuery Mobileに要素を動的に追加ListView

答えて

関連する問題