I'm developing a mobile app using the Rhomobile framework/Rhodes - a combination of Ruby and JqueryMobile.
When I build and test my application on my desktop on the emulator, clicking on a link loads the relevant page. However when I try to access the same link on my mobile device, I get a message stating 'Error Loading Page'.
If anyone has any experience using jquerymobile/ruby/rhomobile and knows why there is an inconsistency between the emulator and a mobile device, please let me know. I've included additional information below, and if there is any more that would help, please let me know.
There are 2 relevant pages. The index page loads a list of hyperlinked items. The second page is called whenever an item is clicked and loads content based on which item was clicked. Here is my code for the index page:
<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>
Here is my code for the content page:
<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>
