jquery mobile $ mobile.changepage 메서드

나는 몇 페이지의 html 파일을 가지고 있는데, 사용자가 특정 페이지의 버튼을 누르면 결과가있는 페이지가 포함 된 새 html 파일을로드하고있다. 페이지 로딩 작업이 훌륭합니다. 문제는 새로운 html로 새 페이지를 탐색 할 수 없다는 것입니다. 브라우저에서 페이지를 수동으로로드하면 완벽하게 작동합니다.

누구나 어떤 이유인지 알 수 있습니까? 로드 완료 후 페이지에 새로 고침 작업을 수행해야한다고 생각하지만 페이지가 원격 서버에서 데이터를 검색하기 때문에 그렇게 할 생각이 없습니다. 새로 고침 동작 원격 서버에서 데이터를 다시 검색하려고 시도합니다 (사용자가 응답을받을 때까지 기다리는 시간을 복제합니다).

이것은 내가 사용하는 코드 줄입니다. $ .mobile.changePage ("menu.php? q ="+ query, {transition : "slide"}));

는

출처

2012-12-11 guy

... the problem is that i can't manage to navigate between the new pages in the new html.

이 줄 당신이 누르면 링크가 의사에 연결하지 않는 의미 (원격 URL 링크에 대해 여러 페이지 템플릿을 반환하려는 믿고 날 리드 해 주셔서 감사합니다 - 같은 문서의 페이지이지만 오히려 또 다른 문서). 이것은 jQuery Mobile에서 기본적으로 허용하지 않습니다 (기능에 대한 플러그인을 찾을 수있을 것 같습니다). jQuery Mobile은 반환 된 외부 문서에서 첫 번째 data-role="page 또는 data-role="dialog" 요소 만 검색합니다.

각 단일 의사 페이지가 자체 문서에 포함되어 있고 일반 URL (예 : "/contact-us/index.php")을 통해 각각의 의사 페이지에 링크하는 단일 페이지 템플릿을 사용할 수 있습니다.

또는

당신은 해시 기반 링크 (예 : "#home")에 필요한 모든 단일 문서의 페이지, 그리고 그들 사이의 링크를 배치 할 수 있습니다

. 이렇게하면 데이터베이스에서 데이터를 검색 할 수는 있지만 AJAX를 통해 코드를 작성해야합니다 (페이지 이벤트에 바인딩 될 가능성이 큽니다).

또는

아마 이것에 대한 플러그인이있다. 그렇지 않다면 실제로 만드는 것이 어렵지 않습니다. jQuery Mobile로 DOM을 추가 한 다음 정상적인 것처럼 첫 번째로 전환하는 대신 외부 data-role="page" 요소를 직접 잡아두면됩니다.

한 번에 여러 개의 가상 페이지를로드하려면 UPDATE,이 시도 :

//hijack link clicks on links with the `click-hijack` class 
$(document).on('click', '.click-hijack', function() { 

    //show loader 
    $.mobile.loading('show'); 

    //create AJAX request for pseudo-page(s) 
    $.ajax({ 
     url  : $(this).attr('href'), 
     dataType : 'html', 
     success : function (response) { 

      //hide loader 
      $.mobile.loading('hide'); 

      //get the pseudo-page(s) from the AJAX response 
      var $pages = $(response).find('[data-role="page"], [data-role="dialog"]'); 

      //append the pseudo-page(s) to the DOM 
      //(this may need to change if you are using a framework like ASP.NET as they can add wrapper DOM elements) 
      $("body").append($pages); 

      //now that the pesueo-page(s) is/are in the DOM, we can transition to them normally 
      $.mobile.changePage('#' + $pages.eq(0).attr('id')); 
     }, 
     error : function() { 
      //don't forget to handle errors 
     } 
    }); 

    //stop the default behavior of the link, as well as propagation of the click event 
    return false; 
});

참고 : 코드를 사용하는 경우이 코드는 안된,이 점을 고려하시기 바랍니다.

출처

2012-12-11 20:36:37 Jasper

고맙습니다. 바로, 여러 페이지로 새 파일을로드하고 있습니다. – guy

내가 그 페이지를 미리 알고 있기 때문에 나는 서버를 다시 가져올 것이기 때문에 그렇게했다. 그것은 사용자 input.and에 의존하고 또한 서버에서 데이터를 한 번만 검색하려고합니다. 그리고 AJAX를 사용하여 여러 페이지를로드하는 방법을 찾지 못했습니다. 그렇게하는 방법을 알고 있습니까? – guy

@ user1528238 내 대답에 ** 업데이트 **를 참조하십시오. 내 대답이 유용하다고 생각되면 자유롭게 응답을 받거나 동의하십시오. – Jasper

기본적으로 jQuery Mobile에서 외부 페이지 via ajax에 연결하면 jQuery Mobile은 첫 번째 data-role="page" 만 가져 오거나 찾지 못하면 내용을 가져 와서 data-role = "페이지로 감습니다 "div.

ajax없이 페이지에 링크하여 외부의 여러 페이지 문서에 연결할 수 있습니다 (링크에 data-ajax="false" 추가).

아약스를 통해 여러 페이지를 한꺼번에로드하려면 @ 재스퍼가 제안한 것과 같이 수동으로 수행하거나 특별히이 목적으로 만들어진 jQuery-Mobile-Subpage-Widget 수 있습니다.

출처

2012-12-12 03:16:01 Jack

안녕하세요, jasper AJAX 예제를 사용하고 내 브라우저에서 완벽하게 작동했습니다. 개인 컴퓨터,하지만 내 phonegap 응용 프로그램에 업로드 할 때 아약스 호출을 작동하지 않는 것 같습니다. 코드 줄 "file_get_contents".and 서버에서 데이터를 검색하는 PHP 파일을 호출하는 AJAX 호출 인스턴트 메신저. 왜 그런지 몰라? 고맙습니다 – guy

jquery mobile $ mobile.changepage 메서드

답변

관련 문제