Tải trang vào một div jQuery Mobile

Question

Tôi muốn tải nội dung của một trang nằm trong một thư mục khác (ví dụ: "files/pages/example.html") cho vùng chứa div bằng cách nhấp vào nút trong jQuery Mobile!

Cách thực hiện?

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

Answer 1

Các $ .mobile.loadPage là phương pháp mà bạn cần. Nó cho phép bạn tải một tập tin html bên ngoài và chèn nó vào dom. Mặc định cho phương thức này là tải nó như một trang toàn bộ, vì vậy bạn phải chỉ định các tùy chọn để tải nó vào một phần tử dom. Đây là ví dụ (và chưa được kiểm tra) mã:

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

bây giờ, đừng quên vấn đề bảo mật crossDomain. Tôi quản lý để làm công việc này trong firefox bằng cách thêm:

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

Ngoài ra, các trang web mà bạn đang tải phải được bọc trong một dữ liệu role = trang div (giả sử nó có id = 'secondpage'). Sau khi tải, kích hoạt trên dữ liệu role = trang với id = secondpage div:

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