Ajax 삽입 후 페이지로드 Jquery Mobile

Question

jQuery Mobile 내에서 mutli 페이지 ajax 시스템을 사용하고 있습니다. 내가 원하는 것은 사용자가 jQuery 로더가 나타나는 페이지를 선택하고 다른 페이지는 ajax가 페이지에 삽입 된 후에 만 ​​표시된다는 것입니다.

예를 들어 페이지가 #list이고 다른 페이지가 #listdetails 인 경우 사용자가 목록 페이지에서 목록 항목을 선택하면로드되고로드 그래픽이 표시됩니다. listdetails 페이지는 페이지가 ajax 컨텐츠로 완전히로드 될 때만 사용자에게 표시됩니다. 어떻게하면 도움이 될 수 있는가?

Answer 1

나는 할 수있다, 나는 당신을 위해 모범을 보였다. 당신이 원하는 것을 100 %가 아니라 당신이 포인트를 얻을 것이다 : 기본적으로 http://jsfiddle.net/Gajotres/AzXdT/

을 제가 페이지를 숨길 수하려고 할 때 아약스 로더를 보여주고 내 예제에서 수행

$(document).live('pagebeforehide', '[data-role="page"]',function(e,data){ 
    var loader = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(loader); 
    },1); 
}); 

을 그리고 그것을 숨길 페이지가로드 될 때 웹 키트 브라우저도의 pageshow 이외의 아약스 로더를 표시하는 문제가 있기 때문에

$(document).live('pageshow', '[data-role="page"]',function(e,data){ 
    var loader = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(loader); 
    },1); 
}); 

하여 setInterval은 여기에있다.

당신은 너무 이것이 당신의 아약스 전화라고하자 성공적으로의 pageshow 후 종료됩니다 아약스 페이지가 표시됩니다 로더하지만 때로는 당신의 아약스를 숨길 내 코드를 사용할 수 있습니다

:

$.ajax({ 
    type: "POST", 
    url: host, 
    dataType: "xml", 
    data: somedata, 
    success: function(xml) { 
     //Do something 
     hideloader();   
    }, 
    error: function (request,error) { 
     //Report an error 
     hideloader(); 
    } 
}); 

function hideloader() { 
    var loader = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(loader); 
    },1); 
} 

이 경우 내가이 로더를 사용했다