0
私はjquerymobileを使用して、$ .mobile.changePage（ 'external.html'）によって取り込まれたページの中にコンテンツを入れたい、またはリンクをクリックしたときに直接呼び出されたページを： 外部ページを取得してJSONを使用するJQueryMobile
私のアプリには、2つの物理ファイル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>
B/Cそれは、パフォーマンスと増加に影響を与えるだろう、私はあまりにも多くの内部ページを作成する必要はありませんページサイズ
外部ページが呼び出されるとすぐにページが画面に表示されるので、内容を変更してページをレンダリングします。
ありがとうございました
という外部ページでは、ページが外部ドメインに保存されていることを意味します。 – Rafay
index.htmlとexternal.htmlは同じドメインの同じフォルダにあり、jsonは別のドメインからフェッチしています。ネイティブアプリを作成しています.jsonはサーバーからフェッチされています – MZH