將元素動態添加到jQuery Mobile ListView

我想動態地將通過JSOn格式的url接收的數據追加到我的列表視圖中。但我無法弄清楚它是如何工作的。將元素動態添加到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"} 
]

在html的，我有一個ListView和功能，在那裏我嘗試追加接收到的數據。我只顯示身體。

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

也許這很容易，但我是網絡編程新手，我無法弄清楚我應該如何追加檢索到的數據。

任何人都可以幫我嗎？

來源

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()的一個例子）：http://jsfiddle.net/VqULm/

來源

2011-11-01 00:55:00 Jasper

謝謝，它爲我工作。 –

.listview（'refresh'）是我需要的，謝謝 – mintedsky

我認爲你可能遇到的問題是返回的JSON是一個對象包裝在一個數組。解析你將不得不通過陣列的第一迭代：

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

來源

2011-10-31 23:57:55 buley

解釋我認爲這是一個問題，但不幸的是沒有解決所有問題。它必須有另一個問題。謝謝你;） –

請添加或刪除後刷新列表視圖。除非你刷新什麼都看不到。

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

來源

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

嗨Josh！請花點時間閱讀[so]有關[自我推銷]的政策（http://stackoverflow.com/help/behavior）。另外，還有很多帖子在討論meta的相同問題。這裏是其中之一 - http://meta.stackexchange.com/questions/57497/limits-for-self-promotion-in-answers – Lix

從我可以在你的個人資料中看到，你已經自我推動**非常多**。 – Lix

將元素動態添加到jQuery Mobile ListView

回答

相關問題