외부 페이지를 가져 와서 JSON을 사용하십시오. JQueryMobile

jquerymobile을 사용하여, $ .mobile.changePage ('external.html')가 가져온 페이지 또는 직접 링크 된 페이지를 불러 와서 내용을 넣고 싶습니다. : 외부 페이지를 가져 와서 JSON을 사용하십시오. JQueryMobile

내 응용 프로그램에는 두 개의 실제 파일 인 index.html과 external.html이 있습니다. Index.html 앵커 링크 external.html을 호출하지만, index.html에서 external.html로보기를 변경하는 동안 해당 서버에서 json을 받고 있습니다.

$ .mobile.changePage (' external.html ') 페이지를 제대로 가져오고 있지만 즉시 표시하고 Ajax 호출도 완료되지 않습니다.

var에 ProductDetailEvent = 함수() {

 thisProd = $(this); 
    $.mobile.showPageLoadingMsg(); 
    Product.id = thisProd.attr('data-id'); 
    Product.name = thisProd.find('h3').html(); 


    $.mobile.changePage("productView.html", { 
     transition: "pop", 
     reverse: false, 
      changeHash: false 
     }); 
} 

    ////LOAD DATA FOR E PAGES::4 
$(document).bind("pageload", function(event, data){ 


      if(data.page[0].id != null) 
      switch(data.page[0].id) 
      { 
       case 'detailView': 

        var pageData = { 
         page: data.page, 
         header: Product.name, 
         url: 'pDetail&productId='+Product.id, 
         loadDataCB: function(_resp){ 
          strHtml = ''; 
          img = 'http://10.0.1.64/magento/media/catalog/product/' + _resp.image; 

          strHtml += '<div style="text-align:center"><img src="'+img+'" width="50%" /><br/><b>Description:</b>'+_resp.short_description; 
          strHtml += '</div><br/><input type="button" value="Add to Cart" data-role="button" /><br/><div class="ui-grid-a ui-bar-d">\ 
             <div class="ui-block-a"><div class="ui-bar ui-bar-d" >Price</div></div>\ 
             <div class="ui-block-b"><div class="ui-bar ui-bar-d" >'+_resp.price+'</div></div>\ 
             <div class="ui-block-a"><div class="ui-bar ui-bar-d" >Weight</div></div>\ 
             <div class="ui-block-b"><div class="ui-bar ui-bar-d" >'+_resp.weight+'</div></div>\ 
             </div>'; 
          return strHtml;   
         } 
        }; 

        loadExternalView(pageData); 

       break; 


       case 'externalView': 

       break; 
      } 
     }); 


    ////Load List::Inner Pages/// 
    var loadExternalView = function(_data) 
    { 

      var NPage = _data.page; 
      pHeader = NPage.find('.header h1').html(_data.header); 
      var pContent = NPage.find('.content'); 
      ServerCall(_data.url,function(result){ 
       var strHtml = _data.loadDataCB(result); 
       pContent.html(strHtml); 
      }); 
    }; 

var ServerCall = function(_url,callback) 
{ 
    $.ajax({ 
      type: "POST", 
      url: 'consumeservice/magentoapi.php?option='+_url, 
      data: '', 
      dataType:'json', 
      success: 
      function(result) { 
       callback(result); 
      }, 
      error: function (data, status, e) 
      { 
       alert("error:"+e); 
      } 
     }); 
};

외부 페이지 HTML :

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="utf-8" /> 
     </head> 
     <body> 
     <!-- Begin Page 4 --> 
     <div id="detailView" data-role="page"> 
      <div class="header" data-role="header" data-icon="back" data-theme="a"> 
      <h1></h1> 
      </div> 
      <div class="content" data-role="content"> 
       <div class="ui-grid-a ui-bar-d"> 
        <div class="ui-block-a"><div class="ui-bar ui-bar-d" >A</div></div> 
        <div class="ui-block-b"><div class="ui-bar ui-bar-d" >B</div></div> 
       </div> 
      </div> 
     </div> 
     <!-- End Page 4--> 
     </body> 
    </html>

하는 나는 그것이 성능과 증가에 영향을 미칠 것입니다/C b를 너무 많은 내부 페이지를 만들고 싶지 않아 페이지 크기

외부 페이지를 호출하면 화면에 바로 페이지가 표시 될 때 콘텐츠를 변경 한 다음 페이지를 렌더링하고 싶습니다.

감사합니다.

출처

2011-10-27 MZH

외부 페이지는 페이지가 외부 도메인에 저장된다는 의미입니까? – Rafay

index.html과 external.html은 같은 도메인에있는 동일한 폴더에 있습니다. json은 다른 도메인에서 가져옵니다. 저는 기본 응용 프로그램을 만들고, json은 서버에서 가져옵니다. – MZH

페이지를 표시하기 전에 내용을 변경 하시겠습니까? 그렇다면, 바인드 'pagebeforecreate'

$('#pageID').live('pagebeforecreate',function(){ 
    //Change content 
});

또는 페이지를 다음의 페이지를 표시 내용을 변경하고 업데이트 하시겠습니까? 그렇다면 div에 .trigger("create")을 사용하십시오.

//Change content first 
$('#pageID').trigger('create');

출처

2011-10-27 12:52:56 Naning

외부 페이지를 가져 와서 JSON을 사용하십시오. JQueryMobile

답변

관련 문제