jQuery 모바일 목록보기를 초기화하는 적절한 방법

Question

여기 내 문제입니다. 색인에 하드 코딩 된 의사 페이지가 몇 개 있습니다. 일부는 내용으로 채워지며 일부는 비어있는 것으로 Ajax만의 사용자 상호 작용으로 채워집니다. 이 아약스 콘텐츠에는 HTML 목록이 포함되어 있습니다. 그들이로드 할 때 좋은 jquery 모바일 모양이 없으므로 .javm 프레임 워크가 내 ajax 콜백에서 구문 분석 할 수 있도록 .listview() 메서드를 호출해야합니다. 나는 종종이 JS 얻을 곳이다 오류 :

catch되지 않은 형식 오류 : 나는 적절한 방법을 사용하는 경우 ... 수는 동일 결코 궁금

을 정의되지 않은

의 특성 'jQuery162027575719612650573'을 읽을 수 없습니다 페이지가 아약스 콘텐츠를로드 한 후리스트 뷰를 구문 분석합니다. 로드가 약간 지연되고 전체 이벤트가 너무 빨리 트리거되고 그 순간에 listview가 DOM에없는 경우 오류가 트리거 된 것 같습니다. ajax 호출 후 listview를 초기화하는 권장 방법은 무엇입니까? 오른쪽이 그 아래에

<div data-role="page" id="playlist" data-add-back-btn="true"> 
    <div data-role="header"> 
     <h1><g:message code="pd.playlist" /></h1> 
    </div> 
    <div data-role="content"></div> 
</div> 

: 그래서 여기

그것은 JS 오류가 더 JS 실행을 동결 보인다 발생하는 경우 때문에 매우 불행한 일이다

...

내 비어있는 의사 페이지입니다 의 pageshow에 아약스 호출 목록보기를 활성화 바인드와 스크립트 태그

<script type="text/javascript"> 
$('#playlist').bind('pageshow', function() { 
    $.ajax({ 
     url: "updatePlaylistTemplate.gsp", 
     error:function(x,e){handleAjaxError(x,e);}, 
     beforeSend:function(){$.mobile.showPageLoadingMsg();}, 
     complete:function(){ 
      $.mobile.hidePageLoadingMsg(); 
      $('[data-role="listview"]').listview(); //re-active all listview 
     }, 
     success:function(data, textStatus, jqXHR){ 
      $('#playlist').find('[data-role="content"]').html(data); 
     } 
    }); 
}); 
</script> 

updatePlaylistTemplate이 (추출물)을 반환 :

<ul data-role="listview" data-split-theme="d"> 
    <li data-icon="delete"> 
     <a href="javascript:void(0);" onclick="loadGet('urlToRemoveProdiver',$('#playlist'),doOnCallBack);">Provider: Bell</a> 
    </li> 
    <li data-icon="delete"> 
     <a href="javascript:void(0);" onclick="loadGet('urlToRemoveChannel',$('#playlist'),doOnCallBack);">Rock - Classic Rock</a> 
    </li> 
    <li data-icon="refresh" data-theme="e"><a href="javascript:void(0);" onclick="loadGet('urlToReloadPlaylist',$('#playlist'),doOnCallBack)">Refresh list</a></li> 
    <li data-role="list-divider">Next song</li> 
    <li> 
     <a href="urlToViewSongInfo"> 
      <img src="images/song.gif" /> 
      <h3>Albert Flasher</h3> 
      <p>The Guess Who</p> 
      <p class="ui-li-aside">Next</p> 
     </a> 
    </li> 
    <li data-role="list-divider">Now playing</li> 
    <li> 
     <a href="urlToviewSongInfo"> 
      <img src="images/song.gif" /> 
      <h3>Crime of the Century</h3> 
      <p>Supertramp</p> 
      <p class="ui-li-aside">14h49</p> 
     </a> 
    </li> 
    <li data-role="list-divider">Previous songs</li> 
    <li> 
     <a href="urlToViewSongInfo"> 
      <img src="images/song.gif"" /> 
      <h3>Desperado</h3> 
      <p>Alice Cooper</p> 
      <p class="ui-li-aside">14h45</p> 
     </a> 
    </li> 
[...] 
</ul> 

Answer 1

어떤 jQuery Mobile 버전을 사용하고 있습니까? 최신 베타 버전 (1.0b2)에서 당신이 프레임 워크를 초기화하도록 DOM 요소에 create 이벤트를 트리거 할 수 있습니다

New “create” event: Easily enhance all widgets at once

While the page plugin no longer calls each plugin specifically, it does dispatch a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page, just like before. For example, if the selectmenu plugin is loaded, it will enhance any selects it finds within a newly created page.

This structure now allows us to add a new create event that can be triggered on any element, saving you the task of manually initializing each plugin contained in that element. Until now, if a developer loaded in content via Ajax or dynamically generated markup, they needed to manually initialize all contained plugins (listview button, select, etc.) to enhance the widgets in the markup.

Now, our handy create event will initialize all the necessary plugins within that markup, just like how the page creation enhancement process works. If you were to use Ajax to load in a block of HTML markup (say a login form), you can trigger create to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$(...new markup that contains widgets...).appendTo(".ui-page" ).trigger("create");

Create vs. refresh: An important distinction

Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method that some widgets have should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

링크 : jQuery를 모바일에서 만드는 또한 출력을 복사 할 수 있습니다 http://jquerymobile.com/blog/

및

는

<li data-role="list-divider" class="ui-li ui-li-divider ui-btn ui-bar-a ui-btn-up-undefined" role="heading"><span>List Divider</span></li> 
<li data-theme="b" class="ui-li ui-li-static ui-body-b">Regular LI</li>