I have Cordova application which is version 2.2.0. Now I want to upgrade, I have done upgrade part, after upgrading, application images are not display, it came blank screen. even splash screen also not came. Here is my code
Seem problem in my BaseScreen.js. I have given alert & check HomeScreen.js before execute basescreen part, the alert is working. but Basescreen also alert came,
HomeScreen.js
var HomeScreen = BaseScreen
.extend({
templateContent : "<ul id='homeBtnsList'>\
alert("-----HI-Home in---");
<li id='playGame'><img src='interface/play-icon@2x.png'><div class='gloss'></div><span>" + language.HOME_PLAY_GAME + "</span></li>\
<li id='viewScore'><img src='interface/scoreboard-icon@2x.png'><div class='gloss'></div><span>" + language.HOME_VIEW_SCORE + "</span></li>\
<li id='viewRules'><img src='interface/instruction-icon@2x.png'><div class='gloss'></div><span>" + language.HOME_VIEW_RULES + "</span></li>\
</ul>\
<div class='copyright'>Copyright © Pearson</div>\
<div class='about'></div>\
<div id='footer'>\
",
headerClass : "head homehead",
screenClass : "",
initialize : function() {
_.bindAll(this, "handleRenderComplete", "handleItemClick", "initScroll", "closeAboutUs", "aboutUsAction");
BaseScreen.prototype.initialize(this);
this.bind(AppEvent.RENDER_COMPLETE, this.handleRenderComplete);
_.extend(this, Backbone.Events);
},
render : function() {
this.element = this.el;
var divString = BaseScreen.prototype.render(this);
return divString;
},
show : function() {
this.setScreenReady();
},
handleRenderComplete : function() {
$("#homeBtnsList li", this.obj).bind(AppEvent.CLICK, this.handleItemClick);
$("div.about", this.obj).bind(AppEvent.CLICK, this.aboutUsAction);
if(isIOS()) {
ShareKitPlugin.prototype.logoutFromTwitter();
ShareKitPlugin.prototype.logoutFromFacebook();
_.delay(navigator.splashscreen.hide,1000);
}
},
setScreenReady : function() {
var obj = {
screenId : this.model.toString()
};
this.trigger(AppEvent.SCREEN_READY, obj);
},
handleItemClick : function(e) {
// alert(e.target.nodeName + " : " +
// e.target.parentNode.nodeName);
var tar = e.target;
if (e.target.nodeName.toLowerCase() != "li") {
tar = e.target.parentNode;
// return;
}
// alert(tar.nodeName + " : " + tar.parentNode.nodeName);
et = tar;
e.preventDefault();
var obj = {};
id = $(et).attr('id') ? $(et).attr('id') : $(et).find('li')
.attr('id');
switch (id) {
case "playGame":
obj.screenId = AppConst.GROUP_SCREEN;
this.trigger(AppEvent.GOTO_SCREEN, obj);
return;
case "viewScore":
obj.screenId = AppConst.SCORE_HOME_SCREEN;
this.trigger(AppEvent.GOTO_SCREEN, obj);
return;
case "viewRules":
obj.screenId = AppConst.INSTRUCTION_SCREEN;
this.trigger(AppEvent.GOTO_SCREEN, obj);
return;
default:
return;
}
;
},
initScroll: function(obj){
utils.log("SCROLL ACTIVE")
this.iScroll = new iScroll($("#helpContent").get(0), {desktopCompatibility:true});
},
aboutUsAction: function(){
var obj = {};
obj.screenId = AppConst.ABOUTUS_SCREEN;
this.trigger(AppEvent.GOTO_SCREEN, obj);
},
closeAboutUs: function(){
$("#helpWrapper #helpContent").html("");
$('#helpWrapper').hide();
this.iScroll.destroy();
},
destroy : function() {
utils.log("destroy ", this.model.get('myId'));
//$("#homeBtnsList li", this.obj).unbind();
$("div.about", this.obj).unbind();
this.unbind();
BaseScreen.prototype.destroy(this);
}
})
This is my BaseScreen.js
var BaseScreen = Backbone.View.extend
({
templateStart:"<div id='<%=myId%>' class='screen <%=screenClass%>'>\
<!--header-->\
<div id='header' class='head <%=headerClass%>'>\
<!--LEFT BTN-->\
<div class='header-left-btn <%=leftBtnClass%>'>\
<span><%=leftLabel%></span>\
</div>\
<!--TITLE-->\
<h1><%=title%></h1>\
<!--RIGHT BTN-->\
<div class='header-right-btn <%=rightBtnClass%>'>\
<%=rightLabel%>\
</div>\
</div>\
<div class='content'>",
templateContent:"",
templateClose:"</div></div>",
element:null,
render:function(extendedObject)
{
var curObj = extendedObject || this;
//console.log('screen Element: ' + curObj.el.get(0).id)
var baseScreenModel = {};
if(curObj.model){
baseScreenModel = curObj.model.toJSON();
}
var thatId = baseScreenModel.myId;
var template = _.template(curObj.templateStart + curObj.templateContent + curObj.templateClose);
var data = _.extend(baseScreenModel, {
screenClass: curObj.screenClass,
headerClass: curObj.headerClass
});
// curObj.element.append(template(baseScreenModel));
curObj.element.append(template(baseScreenModel));
// //console.log(template(baseScreenModel))
// //console.log(" >>>> " + thatId)
//var screen = curObj.element.find("#" + thatId);
var screen = $("#" + thatId);
////console.log("appended node " + screen.length);
if(screen.length <= 0){
////console.log("length is zero")
//console.log("delay .....");
_.delay(BaseScreen.prototype.render, 1000, curObj);
return curObj.element;;
}
////console.log("appended node == " + screen.html());
var sClass = curObj.screenClass || "";
var hClass = curObj.headerClass || "";
//screen.find(".screen").addClass(sClass);
//screen.find("#header").addClass(hClass);
$(screen).addClass(sClass);
$("#header", $(screen)).addClass(hClass);
// screen.find("#leftElement").bind(AppEvent.CLICK, curObj.handleButtonClick);
// screen.find("#rightElement").bind(AppEvent.CLICK, curObj.handleButtonClick);
$("#leftElement", $(screen)).bind(AppEvent.CLICK, function(e){
////console.log("#leftElement ", e.target);
that.trigger(AppEvent.HEADER_ITEM_CLICKED, AppConst.HEADER_LEFT_ELEMENT);
});
$("#rightElement", $(screen)).bind(AppEvent.CLICK, function(e){that.trigger(AppEvent.HEADER_ITEM_CLICKED, e.target.id);});
curObj.trigger(AppEvent.RENDER_COMPLETE);
return curObj.element;
},
initialize:function(extendedObject) //only called when extending BaseScreen
{
var curObj = extendedObject||this;
//_.bindAll(curObj, "handleButtonClick");
_.extend(curObj, Backbone.Events);
},
handleButtonClick:function(e)
{
this.trigger("buttonClick", e.target.id);
},
destroy:function(extendedObject) {
var that = extendedObject||this;
var thatId = that.model.get('myId');
var screen = that.element.find("#" + thatId);
screen.find("#leftElement").unbind();
screen.find("#rightElement").unbind();
//debug.log("destroy base screen for " + thatId);
screen.remove();
},
handleHeaderLeftClicked:function() {
//console.log("left clicked", this);
if(DEVICE_TYPE == DEVICE_ANDROID || DEVICE_TYPE == DEVICE_ANDROID_TAB || DEVICE_TYPE == DEVICE_PC) {
Functions.prototype.exit();
}
}
})
index.html:
<!DOCTYPE html>
<html manifest="appcache.manifest">
<head>
<meta name="apple-mobile-web-app-capable" content="yes" >
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title>My Application</title>
<link href="css/global.css" media="all" rel="stylesheet" type="text/css">
<script src="com/external/underscore.js" ></script>
<script src="com/external/iscroll.js" ></script>
<script src="com/external/zepto.js" ></script>
<script src="com/external/ajax.js" ></script>
<script src="com/external/touch.js" ></script>
<script src="com/external/event.js" ></script>
<script src="com/external/effects.js" ></script>
<script src="com/external/detect.js" ></script>
<script src="com/external/jsOAuth-1.3.1.js" ></script>
<script src="com/external/json2.js" ></script>
<script src="com/external/jsPatch.js" ></script>
<script src="com/external/backbone.js" ></script>
<script src="com/imfinity/comp/webkitdragdrop.js" ></script>
<script src="com/imfinity/utils/jsExtended.js" ></script>
<script src="com/imfinity/utils/stopwatch.js" ></script>
<script src="com/imfinity/screen/BaseScreenVO.js" ></script>
<script src="com/imfinity/screen/BaseScreen.js" ></script>
<script src="com/sns/init.js"></script>
<script src="com/sns/jsonParser.js" ></script>
<script src="com/sns/utilities.js" ></script>
<script src="com/sns/language.js" ></script>
<script src="com/sns/AppConst.js" ></script>
<script src="com/sns/services.js" ></script>
<script src="com/sns/db.js" ></script>
<script src="com/sns/AppEvent.js" ></script>
<script src="com/sns/controller/main.js" ></script>
<script src="com/sns/model/HomeScreenVO.js" ></script>
<script src="com/sns/view/HomeScreen.js" ></script>
<script src="com/sns/view/helpScreenView.js" ></script>
<script src="com/sns/model/helpScreenVO.js" ></script>
<script src="com/sns/view/aboutScreenView.js" ></script>
<script src="com/sns/model/aboutScreenVO.js" ></script>
<script src="com/sns/model/scoreHomeScreenVO.js" ></script>
<script src="com/sns/view/scoreHomeScreenView.js" ></script>
<script src="com/sns/view/resultsScreenView.js" ></script>
<script src="com/sns/model/resultScreenVO.js" ></script>
<script src="com/sns/view/activity/reorderingView.js" ></script>
<script src="com/sns/view/activity/tapNplaceView.js" ></script>
<!--script src="com/sns/sns-minified.js"></script-->
</head>
<body onload="onLoad()" style="overflow: hidden;">
<div class='insOverlay'>
<div id='instructionsWrapper'><img/>
</div>
</div>
<div id="overlay">
<div id="preloader"></div>
<div id="genericHUD" >
<div id='HUDcontent'><img src='interface/load.png'>
</div>
</div>
</div>
<div id="toast" class="Overlay_toast" style="display: none;">
<div class="toast_message"></div>
</div>
<div id='helpWrapper' class="overlay darkShade" style="display: none;">
<div class="helpWindow">
<span id='helpClose' class="close-pop-up"></span>
<h1>Help</h1>
<div id='helpContent' class="helpContent"></div>
</div>
</div>
<div id="banner" class="overlay darkShade"></div>
<div class="modalOverlay" style="display: none;">
<div class="modalWindow">
<span class="close-pop-up"></span>
<h1 class="whiteHeading">Share</h1>
<p id='email' class="share-btn share-with-friend">
</p>
<p id='twitter' class="share-btn share-on-twitter">
</p>
<p id='facebook' class="share-btn share-on-facebook">
</p>
</div>
</div>
<div class="editTextOverlay">
<div class='editTextPopup'>
<div class="editTextHeader">
<span id="leftBtn" class="editTextButton">Cancel</span>
<span id="rightBtn" class="editTextButton"></span>
</div>
<textarea rows="4" autocomplete="off" spellcheck="false" style="outline: none;" maxlength="140"></textarea>
</div>
</div>
<div class="normalOverlay" id="confirmBox">
<div class='normalTextPopup'>
<h2>Confirm</h2>
<div id="confirmMsg">
message
</div>
<div>
<span id="leftBtn" class="normalTextButton"></span>
<span id="rightBtn" class="normalTextButton"></span>
</div>
</div>
</div>
<div id="wrap" >
<div id="screens" >
<div id='questionPlayer' class='screen'></div>
</div>
</div>
</body>
</html>
cofig : res/xml/config.xml
<?xml version='1.0' encoding='utf-8'?>
<cordova>
<access origin="http://127.0.0.1*" />
<access origin=".*" />
<log level="DEBUG" />
<preference name="useBrowserHistory" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashMaintainAspectRatio" value="true" />
<plugins>
<plugin name="App" value="org.apache.cordova.App" />
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker" />
<plugin name="Device" value="org.apache.cordova.Device" />
<plugin name="Accelerometer" value="org.apache.cordova.AccelListener" />
<plugin name="Compass" value="org.apache.cordova.CompassListener" />
<plugin name="Media" value="org.apache.cordova.AudioHandler" />
<plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
<plugin name="Contacts" value="org.apache.cordova.ContactManager" />
<plugin name="File" value="org.apache.cordova.FileUtils" />
<plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager" />
<plugin name="Notification" value="org.apache.cordova.Notification" />
<plugin name="Storage" value="org.apache.cordova.Storage" />
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer" />
<plugin name="Capture" value="org.apache.cordova.Capture" />
<plugin name="Battery" value="org.apache.cordova.BatteryListener" />
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen" />
<plugin name="Echo" value="org.apache.cordova.Echo" />
<plugin name="Globalization" value="org.apache.cordova.Globalization" />
<plugin name="SQLitePlugin" value="com.phonegap.plugins.SQLitePlugin" />
<plugin name="FlurryPlugin" value="com.phonegap.plugins.Flurry" />
<plugin name="AndroidUtilsPlugin" value="com.phonegap.plugins.AndroidUtilsPlugin" />
<plugin name="ChildBrowserPlugin" value="com.phonegap.plugins.ChildBrowserPlugin" />
</plugins>
<feature name="File">
<param name="android-package" value="org.apache.cordova.file.FileUtils" />
<param name="onload" value="true" />
</feature>
</cordova>
Please let me know what is an issue. After upgrading only , I am facing this isssue, could you please guide me about this.
