Я использую jquerymobile, я хочу поместить контент на страницу, полученную с помощью $ .mobile.changePage ('external.html') или на страницу, вызываемую непосредственно при нажатии на ссылку, например:
Мое приложениеимеет два физических файла, index.html и external.html.Якорная ссылка index.html вызывает external.html, но при изменении представления с index.html на external.html я получаю json с другого сервера, который хочу использовать в этом
$. Mobile.changePage ('external.html') правильно выбирает страницу, но отображает ее немедленно, а вызов ajax даже не завершается.
var ProductDetailEvent = function()
{
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);
});
};
Внешняя страница 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>
Я не хочу создавать слишком много внутренних страниц, так как это повлияет на производительность и увеличит размер страницы.
Когда вызывается внешняя страница, она сразу отображает страницу на экране, я хочу изменить ее содержимое, а затем отобразить страницу.
Спасибо