1
RubyとJqueryMobileを組み合わせたRhomobileフレームワーク/ Rhodesを使用してモバイルアプリケーションを開発しています。jQuery Mobileを使用してRhoMobileアプリケーションを電話でテストするときに 'ページを読み込み中にエラーが発生しました'
エミュレータのデスクトップにアプリケーションをビルドしてテストすると、リンクをクリックすると関連するページが読み込まれます。しかし、モバイルデバイスの同じリンクにアクセスしようとすると、「ページの読み込み中にエラーが発生しました」というメッセージが表示されます。
誰かがjquerymobile/ruby/rhomobileを使用した経験があり、エミュレータとモバイルデバイスの間に矛盾がある理由が分かっている場合は、教えてください。私は以下の情報を追加しました。それ以上のものがあれば教えてください。
関連するページが2つあります。索引ページには、ハイパーリンクされた項目のリストがロードされます。 2番目のページは、アイテムがクリックされたときに呼び出され、クリックされたアイテムに基づいてコンテンツをロードします。ここでは、インデックスページのための私のコードは次のとおりです。
<script type="text/javascript">
$(document).ready(function() {
var fploadcounter =0;
fpLoadIncidents(fploadcounter);
$('#fpitems').listview('refresh');
});
function fpLoadIncidents(start, buttonname){
$('.fpitem').remove();
$('#fpnothing').hide();
$('.fpitemdetailcontainer').remove();
$('#itemsloading').show();
var fpurl='data.json';
$.ajax({
dataType:"json",
url: fpurl,
async:false,
error: function(x,e,y) {
alert("There is an issue with the incident application. You can provide the following information to the admin: "+e+" "+x+" "+y+" "+x.status());
},
success: function(data){
if (data.d==''){
$('#itemsloading').hide();
$('#fpnothing').show();
}else {
fphtmlstring='';
fpdetailstring='';
$.each(data.d, function(event) {
var fpdate1=this.EVENT_OCCURRED_2.substr(6,2);
var fpdate2=this.EVENT_OCCURRED_2.substr(4,2);
var fpdate3=this.EVENT_OCCURRED_2.substr(0,4);
var fpoccurreddate=fpdate1+'/'+fpdate2+'/'+fpdate3;
if ((this.RISK_RANKING=='N/A')||(this.RISK_RANKING==null)) {
var fprisk='-';
} else {
var fprisk=this.RISK_RANKING;
}
if (this.HIGHEST_SEVERITY==null) {
var fpseverity='-';
}else {
var fpseverity = this.HIGHEST_SEVERITY;
}
fphtmlstring=fphtmlstring+'<li>';
fphtmlstring= fphtmlstring+ '<a class="itemlink" href="itemcontent.erb" filter="'+this.EVENT_+'">';
fphtmlstring= fphtmlstring+ '<div class=" ui-li-count">'+fprisk+'</div>';
fphtmlstring= fphtmlstring+ '<h3>'+this.EVENT_TYPE_NAME+'</h3>';
fphtmlstring= fphtmlstring+ '<p>'+fpseverity+'</p>';
fphtmlstring= fphtmlstring+ '<p class="ui-li-aside myaside">'+fpoccurreddate+'<br />'+this.STATUS_NAME+'</p></a></li>';
$('#itemsloading').hide();
});
$('#fpitems').append(fphtmlstring);
}//the end of the if function
},
complete: function() {
$('.itemlink').click(function() {
itemid=$(this).attr('filter');
});
$('#fpitems').listview('refresh');
}
});
}
</script>
<style>
.myaside {
width: 30%;
}
.hidden {
display:none;
}
.ui-li-static{
background-color: white;
}
</style>
<div data-role="page" id="incidents" data-url="<%= Rho::RhoConfig.start_path %>/" >
<div data-role="header" data-position="inline" data-theme="b">
<h1>Latest Incidents</h1>
<%= link_to "Settings", :controller => :Settings %>
<%= link_to "Logout", :controller => :Settings, :action => :logout %>
</div>
<div data-role="content">
<ul id="fpitems" data-role="listview" data-theme="d" data-count-theme="b">
</ul>
</div>
</div>
ここでは、コンテンツページのための私のコードは次のとおりです。
<div data-role="page" id="incidentdetails" data-url="<%= Rho::RhoConfig.start_path %>/" data-add-back-btn="true" data-theme="b" data-content-theme="b">
<script type="text/javascript">
$(document).delegate("#incidentdetails", "pagebeforecreate", function() {
fpLoadIncidentdetail();
});
function fpLoadIncidentdetail(){
$('#incidentdetails').html('');
var fpurl='data.json';
$.ajax({
dataType:"json",
url: fpurl,
async:false,
error: function(x,e,y) {
alert("There is an issue with the incident application. You can provide the following information to the admin: "+e+" "+x+" "+y+" "+x.status());
},
success: function(data){
if (data.d==''){
$('#itemsloading').hide();
$('#fpnothing').show();
}else {
fphtmlstring='';
fpdetailstring='';
$.each(data.d, function(event) {
if (itemid==this.EVENT_){
var fpdate1=this.EVENT_OCCURRED_2.substr(6,2);
var fpdate2=this.EVENT_OCCURRED_2.substr(4,2);
var fpdate3=this.EVENT_OCCURRED_2.substr(0,4);
var fpoccurreddate=fpdate1+'/'+fpdate2+'/'+fpdate3;
if ((this.RISK_RANKING=='N/A')||(this.RISK_RANKING==null)) {
var fprisk='-';
} else {
var fprisk=this.RISK_RANKING;
}
if (this.HIGHEST_SEVERITY==null) {
var fpseverity='-';
}else {
var fpseverity = this.HIGHEST_SEVERITY;
}
fpdetailstring=fpdetailstring+'<div data-role="header" data-position="inline" data-theme="b">';
fpdetailstring=fpdetailstring+'<h1 id="incident-title">Incident: '+this.EVENT_TYPE_NAME+'</h1>';
fpdetailstring=fpdetailstring+'</div> <div data-role="content" id="fpitemdetailscroll">';
fpdetailstring=fpdetailstring+'<div class="fpitemdetailcontainer" id="'+this.EVENT_+'">';
fpdetailstring=fpdetailstring+'<h2>'+this.EVENT_TYPE_NAME+'</h2>';
fpdetailstring=fpdetailstring+'<div data-content-theme="d"><h3>Details</h3>';
fpdetailstring=fpdetailstring+'<ul data-role="listview" class="incident-details" data-theme="d">';
fpdetailstring=fpdetailstring+'<li>Occurred: '+fpoccurreddate+'</li>';
fpdetailstring=fpdetailstring+'<li>Location: '+this.LOCATION_NAME+'</li>';
fpdetailstring=fpdetailstring+'<li>Business Unit: '+this.BUSINESS_UNIT_NAME+'</li>';
fpdetailstring=fpdetailstring+'<li>Risk Ranking: '+this.RISK_RANKING+'</li>';
fpdetailstring=fpdetailstring+'<li>Highest Severity: '+fpseverity+'</li></ul></div>';
fpdetailstring=fpdetailstring+'<div><h3>Description</h3> '+this.BRIEF_DESCRIPTION_2+'</div>';
fpdetailstring=fpdetailstring+'<div><h3>Immediate Actions Taken</h3> '+this.IMMEDIATE_ACTIONS_TAKEN+'</div></div></div>';
}
});
$('#incidentdetails').append(fpdetailstring);
}//the end of the iff function
}
});
}
</script>
</div>