2012-06-26 2 views
5

jQuery Mobile에서 버튼을 클릭하여 div 컨테이너의 다른 폴더 (예 : "files/pages/example.html")에있는 페이지의 컨텐츠를로드하려고합니다!div에 페이지로드 jQuery Mobile

어떻게 만드시겠습니까?

<div data-role="page"> 
    <div id="container" data-role="content"><button id="clickButton">Click me!</button></div> 
</div> 
+0

나는 질문이 있습니다. 브라우저에서 테스트 중입니까? 그렇지 않은 경우 support.cors 및 allowCrossDomainPages를 추가 했습니까? – Th0rndike

답변

1

$ .mobile.loadPage 당신이 필요로하는 방법이다. 그것은 당신이 외부 HTML 파일을로드하고 dom에 그것을 삽입 할 수 있습니다. 이 메소드의 기본값은 전체 페이지로로드하는 것이므로 dom 요소에로드 할 옵션을 지정해야합니다. 다음은 예시 및 테스트되지 않은 코드입니다.

$('#clickButton').on("click",function(){ 
    $.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')}) 
}); 

이제 crossDomain 보안 문제를 잊지 마세요. 나는 추가하여 파이어 폭스에서이 작업을 관리 : 사업부는 (의 그것 ID = 'secondPage'를 가지고 가정 해 봅시다)

$("#landingPage").live('pageinit', function() { 
      jQuery.support.cors = true; 
      $.mobile.allowCrossDomainPages=true; 
     }); 

또한,로드중인 페이지는 데이터 역할 = 페이지에 싸여해야합니다. ID = secondPage 사업부와 데이터 역할 = 페이지의 부하, 트리거 후 :

$('#secondPage").trigger('pagecreate'); 
+0

나는 이미 시도했지만 페이지를로드하지 않습니다. –

+0

그리고 무슨 일이 있었습니까? 코드는 어디에 있습니까? 어떤 오류가 있었습니까? 이것이 표준 방법입니다. 작동하지 않는다면 코드에 실수가 있었지만, 물론 (그리고 SO 커뮤니티에서) 내가 시도한 것을 보여주지 않으면 어떤 도움을 줄 수 없으며 당신이 도중에 발견 한 문제들. – Th0rndike

+0

죄송합니다. 내가 게시물의 시작 부분에 준 코드와 jQuery 코드를 사용하여 페이지를로드했다. (단지 .on에서 .live로 이동하고 loadPage 함수의 끝에 ';'를 추가했다.) 시뮬레이터 iOs를 사용하여 오류가 발생하지 않으며 아무 일도하지 않습니다! 나는 loadPage 함수 다음에 "alert (('# container') .html())"을 시도했지만 경고에 div #container가 비어 있다고 (경고에 아무 것도 표시하지 않음) 표시됩니다. –

관련 문제