jQuery Mobile에 요소를 동적으로 추가 ListView

JSOn 형식의 URL을 통해받은 데이터를 내 listview에 동적으로 추가하려고합니다. 하지만 어떻게 작동하는지 알 수 없습니다. 내가 한 목록보기 및 i는 수신 된 데이터를 추가하려고하는 기능을 가지고있는 .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>

은 아마 아주 쉽게,하지만 난 웹 프로그래밍에 새로 온 사람과 나는 검색된 데이터를 추가해야하는 방법을 알아낼 수 없습니다.

누구든지 나를 도와 줄 수 있습니까?

출처

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를 새로 고치십시오. 새로 고침을하지 않으면 아무 것도 볼 수 없습니다.

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

출처

2011-11-01 00:55:00 Jasper

고마워, 그것은 나를 위해 일했다. –

.listview ('새로 고침')은 내가 필요한 것입니다. – mintedsky

내가 겪을 수있는 문제는 이 배열에 랩핑 된 객체라는 것입니다. 먼저 배열을 반복해야합니다 구문 분석하려면 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

안녕하세요 Josh! 잠시 시간을내어 [self promotion]에 관한 정책을 읽으십시오 (http://stackoverflow.com/help/behavior). 더하여, 메타에 동일한 문제점에 대해서 이야기 해 많은 포스트가있다. 여기에 그들 중 하나가 있습니다 - http://meta.stackexchange.com/questions/57497/limits-for-self-promotion-in-answers – Lix

귀하의 프로필에서 볼 수 있듯이, 당신은 스스로 홍보했습니다 ** 꽤 많이**. – Lix

jQuery Mobile에 요소를 동적으로 추가 ListView

답변

관련 문제