Windows Phone 8 application with jQuery is not properly displayed - javascript

I have a hybrid application with supported environment on iOS, Android, Blackberry, Windows.
The application is working perfectly fine on Development Server, but when I move the same application to Production Server, the Windows version stops working (all other platforms are working fine)
The application loads and shows the RSS Feed, however, the jquery panel menus, jquery nivo sliders etc are not loading, the application also fails to resize itself according to the screen size. So I have a feeling that the JQuery elements are being blocked/stopped on Windows Platform somehow.
Visual Studio is showing a lot of exceptions, but I believe none of them is fatal. log available here
Application Code:
function wlCommonInit() {
//First Landing Page
currentPage = "Public/News/html/news.html";
currentJs = [ "Public\\News\\js\\news.js","Public\\News\\js\\jquery.nivo.slider.js"];
//Connect WL Server to get User Preference
WL.Client.connect({onSuccess: onConnectSuccess, onFailure: onConnectFailure});
if ((WL.Client.getEnvironment() == "windowsphone8") || (WL.Client.getEnvironment() == "android"))
{
document.addEventListener('deviceready', function() {
document.addEventListener('backbutton', handleBackButton);
});
}
eventCall();
$(".logout").hide();
// lock icon - student services
$(".student .ui-collapsible-heading-toggle").css({
'background-image' : 'url(images/lock-red.png)',
'background-repeat' : 'no-repeat',
'background-position' : ''+lockdir+''
});
// lock icon - employee services
$(".employee .ui-collapsible-heading-toggle").css({
'background-image' : 'url(images/lock-red.png)',
'background-repeat' : 'no-repeat',
'background-position' : ''+lockdir+''
});
// service item hover
$('#scrollableContent').on('click','li', function() {
$('#scrollableContent li').css({background: 'transparent'});
$(this).removeClass('ui-body-inherit');
$(this).css({background: '#554e46'});
$(this).removeClass("ui-bar-" + theme);
$(this).css({background: ''});
$(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e');
$(this).addClass("ui-bar-" + theme);
});
//for menu swiper
swiper();
//for push notification
if (WL.Client.Push) {
WL.Client.Push.onReadyToSubscribe = function() {
WL.Client.Push.registerEventSourceCallback("myPush", "PushAdapter",
"PushEventSource", pushNotificationReceived);
};
}
$("#apppage").show();
}
I have tried checking the error by switching on the HTTP trace for the value, complete log available here

I figured out that some delay due to HTTPS encryption/processing allowed some other procedure calls to be made even before WL.Client Connect completed its execution.
What I did as a work around was to delay other calls so as to ensure that WL.Client Connect completes before any other calls are executed.

Related

bindRows is not a function

I am trying to bind data from NWGW to an existing javascript table for Input value help using getTable().bindRows.
Development tool is WebIDE, All connections are checked. All oData services are OK and providing Live Data, metadata OK.
But I keep getting
Uncaught TypeError: oValueHelpDialog.getTable(...).bindRows is not a
function.
This only happens if the app is running on a small screen device (phone or if I choose phone layout in Chrome Dev Tool).
I don't know if it is because it can get the odata to bind to the table? Does phone handle UI5 differently?
I would appreciate any help. Thanks
-------Update-------
Thank to a nice guy in Answer.SAP. Here is the sample project
Step to reproduce the error:
Import the project to Web IDE
Execute the index.html
Open Chrome Dev Tool
Choose device: iPhone 6/7/8 or whatever phone
Refresh (F5) the app
Click on Value Help Dialog again > lead to a blank table
-------Update END-------
Fragment view
var oValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog({
title : oController.getStrTextSite(),
supportMultiselect : false,
supportRanges : false,
supportRangesOnly : false,
key : oController.getStrWERKS(),
descriptionKey : oController.getStrNAME1(),
ok: function(oControlEvent) {
oController.setDefaultSiteFromHelp(oControlEvent);
oValueHelpDialog.close();
},
cancel: function(oControlEvent) {
oValueHelpDialog.close();
},
afterClose: function() {
oValueHelpDialog.destroy();
}
});
...
return oValueHelpDialog;
}
Controller
onValueHelpForDefaultSite : function(oEvent) {
var oValueHelpDialog = this.getFragmentForValueHelp();
oValueHelpDialog.open();
...
oValueHelpDialog.getTable().bindRows(
this.getEntitySet(
"ODATA_10_DEFAULT_SITE_SET",
"ODATA_10"
)
);
}
Turns out that in mobile, function bindRows() does not exist so we have to replace it with function bindItems()

Cordova In App Browser event not firing IOS

Trying to authenticate users on my ionic application through an external service and I need to use cordovas In app browser! The code works perfectly on android however on iOS the "loadstop" event never fires and thus, the browser never redirects itself back to the application. The code I have looks like this:
$rootScope.$on('$cordovaInAppBrowser:loadstop', function (e, event) {
console.log('inappbrowser loaded', event);
var regex = /* regex to determine if url is correct redirected url */
var res = regex.test(event.url);
alert('loaded: ' + event.url);
alert('regex result: ' + res);
if(res === true) {
$cordovaInAppBrowser.close();
}
});
if(okta) {
if (typeof window.localStorage.msRefreshToken === 'undefined') {
document.addEventListener('deviceready', function () {
$cordovaInAppBrowser.open('urlforExternalservicehere', '_blank', options);
}, false);
} else {
TokenStore.refreshAccessToken();
}
}
when the code is run no alert appears on the screen. Also, once the app has reached the external service and the username of the user is entered, it is then redirected to another url, which the user will then use another set of credentials to authenticate against. This in turn returns a token for the application to authenticate use.
Thus, in a perfect iOS world where it matches the current android experience, the loadstop event fires three times, and the third time the "loadstop" event would fire and the regex would return true and close the in app broswer.
If I need to supply more code to help solve this issue please let me know!
Cordova Version: 4.2.0
Ionic: 1.4.5
iOS: 8 and 9
Using NgCordova for Cordova functionality
UPDATE: when running the application on an emulator and checking the console logs, I find this error:
Error: Module cordova-plugin-inappbrowser.inappbrowser does not
exist., http://10.117.1.46:8100/cordova.js, Line: 1402
I have the plugin installed so I don't know how its missing the plugin. Does anyone have a remedy for this? Thanks!
iabRef = window.open('http://XYZ.php', '_blank', 'location=no,toolbar=no');
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.addEventListener('exit', iabClose);
iabRef.addEventListener('loadstart', function(event) {
if (event.url.match("mobile/close")) {
iabRef.close();
window.location = 'index.html';
}
}
);
Problem was my iOS platform wasn't latest.
So when you developing apps using cordova make sure your platform versions and plugins are up-to date with OS upgraded.
So all I had to do is
Removing iOS platform.
cordova platform rm ios
Adding iOS platform - Latest Version
cordova platform add ios
Removing the plugin cordova-plugin-inappbrowser
cordova plugin remove cordova-plugin-inappbrowser
Adding the plugin cordova-plugin-inappbrowser - Latest Version
cordova plugin add cordova-plugin-inappbrowser

How to implement in-app-purchase using Cordova plugin?

Please tell me the way to implement in-app-purchase using Cordova plugin.
I'm developing Android application using Cordova.
There are some in-app-purchase plugins but I decide to use Cordova Purchase Plugin.
I did some setups along README.md of In-App Purchase for PhoneGap / Cordova iOS and Android.
As a result, I could call the Plugin using Demo of the Purchase Plugin for Cordova with my little modification. (See the following, it is a portion of code.)
app.initStore = function() {
if (!window.store) {
log('Store not available');
return;
}
// Enable maximum logging level
store.verbosity = store.DEBUG;
// Enable remote receipt validation
// store.validator = "https://api.fovea.cc:1982/check-purchase";
// Inform the store of your products
log('registerProducts');
store.register({
id: 'myProductA',
alias: 'myProductA',
type: store.CONSUMABLE
});
// When any product gets updated, refresh the HTML.
store.when("product").updated(function (p) {
console.info("app.renderIAP is called");
app.renderIAP(p);
});
// Log all errors
store.error(function(error) {
log('ERROR ' + error.code + ': ' + error.message);
});
// When purchase of an extra life is approved,
// deliver it... by displaying logs in the console.
store.when("myProductA").approved(function (order) {
log("You got a ProductA");
order.finish();
});
// When the store is ready (i.e. all products are loaded and in their "final"
// state), we hide the "loading" indicator.
//
// Note that the "ready" function will be called immediately if the store
// is already ready.
store.ready(function() {
var el = document.getElementById("loading-indicator");
console.info(el + "ready is called")
if (el)
el.style.display = 'none';
});
// When store is ready, activate the "refresh" button;
store.ready(function() {
var el = document.getElementById('refresh-button');
console.info(el + "ready is called and refresh-button show?");
if (el) {
el.style.display = 'block';
el.onclick = function(ev) {
store.refresh();
};
}
});
// Refresh the store.
//
// This will contact the server to check all registered products
// validity and ownership status.
//
// It's fine to do this only at application startup, as it could be
// pretty expensive.
log('refresh');
store.refresh();
};
It did not show 'Store not available' that is shown when plugin is not available, show 'registerProducts', and 'refresh.'
(*Of course I added 'myProductA' to in-app Products on Google Play Developer Console.)
But I noticed that the below function is not called.
store.when("product").updated(function (p)
And also I couldn't understand what the parameter should fill in it, so I commented out the below.
(*I did remove the comment out, but it still not working.)
store.validator = "https://api.fovea.cc:1982/check-purchase";
I guess those things make something wrong.
I'm not sure what is stack on me, so my question is not clearly.
I want some clues to solve it... or I shouldn't implement in-app-purchase using Cordova plugin?
Please give me your hand.
(I'm not fluent in English, so I'm sorry for any confusion.)
You can try this plugin as an alternative: https://github.com/AlexDisler/cordova-plugin-inapppurchase
Here's an example of loading products and making a purchase:
inAppPurchase
.buy('com.yourapp.consumable_prod1')
.then(function (data) {
// ...then mark it as consumed:
return inAppPurchase.consume(data.productType, data.receipt, data.signature);
})
.then(function () {
console.log('product was successfully consumed!');
})
.catch(function (err) {
console.log(err);
});
It supports both Android and iOS.
Step for Integrate In-App billing in Phone-gap app.
1>> clone this project in your pc from this link In-App billing Library
2>> using CMD go to your root directory of your phonegap application
3>> then run this command cordova plugin add /path/to/your/cloned project --variable BILLING_KEY="QWINMERR..........RIGR"
Notes : for BILLING_KEY go to Developer console then open your application and go to Service& APIs for more info Please refer attached screenshots

Why doesn't callback get called when the app is in background?

I'm developing a titanium app that needs to display a Banner Message under iOS when a push notification comes in. Therefore I used the following code to register on incoming push notifications:
var callbacks = {
types: [
Titanium.Network.NOTIFICATION_TYPE_BADGE,
Titanium.Network.NOTIFICATION_TYPE_SOUND,
Titanium.Network.NOTIFICATION_TYPE_ALERT
],
success:function(e){
console.log("success");
},
error:function(e){
console.log("error");
},
callback: function(e){
console.log("new push notification")
//code for displaying banner message would go here!
}
};
if(Ti.App.iOS.registerUserNotificationSettings){ //iOS 8 +
function onUserNotificationSettings(){
delete callbacks.types;
Ti.Network.registerForPushNotifications(callbacks);
Ti.App.iOS.removeEventListener("usernotificationsettings",onUserNotificationSettings);
}
Ti.App.iOS.addEventListener("usernotificationsettings",onUserNotificationSettings)
Ti.App.iOS.registerUserNotificationSettings(callbacks)
}else{ //up to iOS 7
Ti.Network.registerForPushNotifications(callbacks)
}
But the callback function does not get called when the app is in background. So, I also can't display the banner message there, since the code won't get executed.
What could be the reason why the callback does not get called when the app is in background? When it is in foreground, it works perfectly. Is it normal? If yes, where else would I put my code to display the banner message?
I'm using SDK version 3.4.0 on an iPhone 5 with iOS 8.1.1
Please note that sending the banner text through the apn-payload is not the solution. There are other usecases. For example, when the server needs to tell the client that there is new content to sync, where the user does not even need to get notified for. The client should just download the new content in background just when the notification arrives.
You need to register for the remote-notification background mode. This will wake up your app and give you execution time when you send the notifications.
For the record this is in the Appcelerator docs here
I've found out how to do it!
The callback will get called when the app is in background. All I had to do for it was to add the following to my tiapp.xml in ti:app/ios/plist/dict:
<key>UIBackgroundModes</key>
<array>
<string>remote-notification</string>
</array>
After that, everything works fine!

LaunchOptions.DesiredRemainingView - Split screen launched app

I am trying to open files in their native application from my app.
Windows.Storage.ApplicationData.current.localFolder.getFileAsync("downloads\\" + fileName).then(
function (file) {
var options = new Windows.System.LauncherOptions();
options.displayApplicationPicker = true;
options.desiredRemainingView = Windows.UI.ViewManagement.ViewSizePreference.useHalf;
Windows.System.Launcher.launchFileAsync(file, options).then(
function (success) {
if (success) {
//File launched
} else {
// File launch failed
}
});
});
I tried using the LauncherOptions.DesiredRemainingView to make sure every launch would have the apps split screen (50/50) and the native apps still open at whatever size they default to. Reader(50%), Photos(70%).
In the Windows Dev Center - Windows Store apps there is a sample for launching that includes the different enumerations of DesiredRemainingView and none of the enumerations worked when I built the downloaded sample.
Are there other options (LauncherOptions) that I need to modify/set?

Categories

Resources