jquery mobile - div에 콘텐츠로드

Question

Jquery Mobile은 페이지를 하이재킹하고 콘텐츠를로드하여 페이지에 삽입하여 작동합니다.

페이지에 다른 콘텐츠를 삽입하려고하면 문제가 발생하는 것으로 보입니다.

필자는 index.html과 page2.html 파일을 가지고 있습니다. 그래서 같은 사업부의 각 페이지의 내용을 포장 정상적인 방식으로 JQuery와 모바일을 설정 해요 : 사용자 탭 페이지 2에 갈 때

<div id="container" data-role="page"> 
    // my content 
<a href="page2.html">go to page 2</a> 
</div> 

, 그것은 좋은 슬라이드 효과를 않습니다. 위치 표시 줄의 URL은 다음과 같습니다. index.html # page2.html

jquery mobile 앵커를 사용하여 페이지의 내용을 주입하고 전환을 적용합니다. 좋은 영원한 일은 다음 부분까지 훌륭하게 작동합니다.

page2.html에서 일부 외부 데이터를로드하고 div에 주입하는 섹션이 있습니다.

는

<a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a> 
<div id="target"></div> 
<script src="js/code.js"></script> 
<script src="js/loader.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.ajaxtrigger').trigger('click'); 
}); 
</script> 

난 데 문제는 내가 JQuery와 모바일 전환을 사용하도록 설정하면이 스크립트가 작동하지 않습니다. div에 데이터를로드하지 않습니다. 파머.

누구나 내가 그 div에 콘텐츠를 불러오고로드하려면 어떻게해야하는지 알고 있습니까?

Answer 1

$(document).ready(function(){ $('.ajaxtrigger').trigger('click'); });을 사용하여 index.html에서 page2의 클릭/탭을 캡처 한 다음 page2.html에 데이터를 삽입 하시겠습니까?

그렇다면 페이지간에 이러한 방식으로 데이터를 전달할 수 없으므로 작동하지 않습니다. page2.html의 주요 사업부를 #page2의 ID를주는 시도하고 내가 가지고있어 pagebeforeshow 방법 (http://jquerymobile.com/test/#/test/docs/api/events.html)

$('div#page2').live('pagebeforeshow',function(event, ui){ 
    $('div#page2 div#ajax_loaded_content').load('url_to_load_from.php'); 
}); 

Answer 2

를 사용 비슷한 문제 (위의 설명에서 언급 한 바와 같이)와 나는 그것을 (적어도 나를 위해) 알아 냈다. jQuery Mobile은 아약스를 통해 다음 페이지를로드 할 때 이전 페이지를 DOM에 유지하므로 뒤로 버튼이 올바르게 작동합니다. 문제는 두 번째 페이지에서 DOM 요소 (특히 ID)를 참조하기 위해 javascript를 사용하는 경우 이전 페이지의 요소가 여전히 DOM에 있음을 고려해야한다는 것입니다. ID는 고유하도록 설계되었으므로 document.getElementById()은 신뢰할 수 없으므로 $("#myDiv")도 아닙니다.

CSS 클래스가 고유하지 않도록 디자인되었으므로 클래스 이름 (예 : $(".myDivClass"))으로 DOM 요소를 참조하고 있습니다. 부작용은 자바 스크립트에서 변경 한 내용이 숨겨진 모든 페이지에도 적용되지만 작업이 완료된다는 것입니다. 내가 입력 할 때 염두에 두어야 할 또 다른 아이디어는 각 <div data-role="page">에 고유 ID를 부여하고 대신 $("#myInnerDiv")을 사용하는 쿼리 요소를 제공하는 것입니다.

잘하면 도움이됩니다.

Answer 3

이 시도 :

$('page2.html').bind('pageshow', function() { 
    $('.ajaxtrigger').trigger('click'); 
}); 

Answer 4

또 다른 옵션은 중복 ID가 문제가되지 않도록, 각 페이지로드 조작 할 DOM 요소에 대한 고유 ID를 생성하는 것입니다 아담 설명합니다.나는 이것을 C# (면도기 문법)에서 이렇게했다 :

@{ string headerAutoGenSym = "header_" + new System.Random().Next(1000000000); } 
@section header 
{ 
    <div id="@headerAutoGenSym"></div> 

    <script type="text/javascript"> 
     $(function() { 
      $(document).bind("pageinit", function() { 
       $.get(
        '@Url.Action("myAjaxURL")', 
        function (data) { 
         $('#@headerAutoGenSym').append(data); 
        } 
       ); 
      }); 
     }); 
    </script> 
}