I am trying consume a Odata service using datajs-1.0.0.js using the code below.It runs well in a browser.
OData.read("http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')/Orders",
function(data){
alert('oData Function');
var str;
alert('before for');
for(var objRec in data.results){
var obj = data.results[objRec];
str = str + ' '+obj.OrderID;
}
alert(str);
alert('after for');
}, function (err) {
alert(err.message);
});
Now I need to run it in a Phonegap IOS Project (version Cordova 2.4) however nothings happens.It does not throw any error as well. I have added the URL in the config.xml file of phonegap to allow external host.
<access origin="*" />
The same code works fine when I run it in Android Phonegap Project.
Is there anything that I have missed out?
Does setting the OpenAllWhitelistURLsInWebView to YES or upgrading to datajs 1.1.0 solve the problem?
Related
According to the Apache Cordova blog, iframes may not work using WKWebView. (https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html)
I have a Cordova application that is in the App Store that relies quite heavily on iframes. Since UIWebView is likely to be removed in iOS 13, is there a way to get iframes working using WKWebView?
Here's what I've done so far:
I tried using the Ionic WebView plugin (https://github.com/ionic-team/cordova-plugin-ionic-webview), and although it works for parts of my app it does not work on the iframe pages. Specifically, I'm getting Access-Control-Allow-Origin header contains the invalid value 'null'. I don't get this error using UIWebView.
Add this in your config.xml
<allow-navigation href="*" />
Then build your ios platform
I ran into this issue also in my Cordova apps, and have found a workaround. It involves writing content directly to the iframe, rather than giving it a src="...". This way, iframe runs as same-origin as parent.
(Iframes do work in WkWebView; it's just that anything loaded via src="file://..." [e.g. all local app files] are treated as unique-origin, so tends to screw up any cross-frame JavaScript.)
function frameEl_injectHtml(frameEl, injectHtml) {
// frameEl must exist in DOM before its contentWindow is accessible.
if (!frameEl.contentWindow) { alert("frameInjectHtml() but frameEl not (yet or anymore) in DOM."); return; }
frameEl.contentWindow.document.open('text/htmlreplace');
frameEl.contentWindow.document.write(injectHtml);
frameEl.contentWindow.document.close();
}
// Create <frame>, insert into DOM, and inject content.
var frameHtml = "<html><head></head>" +
"<body>" +
"iframe body" +
"<script>window.parent.alert('iframe even same-origin as parent.');</script>" +
"</body></html>";
var frameEl = document.createElement('iframe');
frameEl.src = "about:blank";
document.body.appendChild(frameEl);
frameEl_injectHtml(frameEl, frameHtml);
Add this to your Cordova config.xml
<allow-navigation href="http://*.yourdomain.com/*" />
It will allow your HTML pages, no matter root documents or children in the iframe, to redirect from localhost to a remote URL.
I can't seem to make the email composer plugin work. I added it to the project using console and added the line prescribed in the readme file on the config.xml
<gap:plugin name="de.killercodemonkey.cordova.plugin.email-composer" version="0.8.2" />
This is the package I'm using
Also, upon submitting this to PhoneGap Build, it does not list the plugin after it builds.
This is the code that I have bound to a button. The binding only happens after deviceready and any function runs are undeniably after deviceready.
function SubmitToEmail()
{
alert(1);
email.isAvailable(
function (isAvailable) {
if(isAvailable)
{
email.open({
to: 'john.doe#email.com',
subject: 'Need Help!',
body: 'Hello, my name is John Doe and I currently need help at my current location. Thanks',
isHtml: true
});
}
else
alert('Please configure your default email client before proceeding.');
}
);
}
The alert seems to trigger but anything beyond that does not work. I have tried both namespaces "cordova.plugins.email.open" and "email.open" and neither seem to work.
I'm testing my app inside the phonegap app on iOS.
I'm not sure what is it that I'm doing work here. Please help.
Thanks
EDIT: Is there anyway to troubleshoot this? How do I see any errors that are generated from running this code on the phonegap app? Thanks
If you want to use the phonegap build version of the plugin you have to use the source pgb
<plugin name="de.appplant.cordova.plugin.email-composer" spec="0.8.2" source="pgb" />
If you want to use the npm version use
<plugin name="cordova-plugin-email-composer" spec="~0.8.2" />
I'm attempting to use a JSON object living in a data.json file to be the dataset for a quick prototype I'm working on. This lives in a my_project/www/data/ directory. I have an Angular service that goes and grabs the data within this file using $http, does some stuff to it, and then it's used throughout my app.
I'm using Cordova and Ionic. When using ionic serve on my computer, everything looks perfect in the browser. However, when using ionic view (http://view.ionic.io/) and opening the app on my iPad, I see a:
{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"../data/items.json","headers":{"Accept":"application/json,test/plain,*/*}},"statusText":""}
for a response. I would think that if it were a relative URL issue, that it would also not work in the browser, but that is not the case.
Here's what I'm doing:
config.xml has this line:
<access origin="*" subdomains="true"/>
My service that preforms the simple request is doing:
return $http.get("../data/data.json").then(function (response) {
return response.data;
});
And finally, in my controller, I ask for the service to preform the request:
myService.goGetData().then(onComplete, onError);
In my browser, onComplete() is invoked and on the iPad, onError() is invoked.
Any guidance?
On your local developer machine you're actually running a webserver when you run ionic serve. So a path like ../../data.json will work because it is totally valid in the context of the webserver that has complete filesystem access.
If, however, you try to do the same thing on your device, you're probably going to run into an issue because the device has security policies in place that don't allow ajax to traverse up outside of the root. It is not a dynamic webserver so it can't load files up the tree. Instead you'd use something like the cordova file plugin to grab the file contents from the filesystem. If you prefer, you can use ngCordova to make interacting with the plugin a bit less painful.
I am 99% sure this is what is happening but you can test my theory by pointing your $http call to some dummy .json data hosted on a publicly available server to see if it works. Here is some dummy json data.
Just gonna leave this here because I had the same problem as the original question author. Simply removing any starting slashes from the json file path in the $http.get function solved this problem for me, now loading the json data works both in the browser emulator and on my android device. The root of the $http call url seems to always be the index.html folder no matter where your controller or service is located. So use a path relative from that folder and it should work. like $http.get("data/data.json")
So this is an example json file. save it as data.json
[
{
"Name" : "Sabba",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Tom",
"City" : "NY",
"Country" : "USA"
}
]
And this this is what a example controller looks like
var app = angular.module('myApp', ['ionic']);
app.controller('ExhibitionTabCtrl', ['$scope', '$http', function($scope,$http) {
$http.get("your/path/from/index/data.json")
.success(function (response)
{
$scope.names = response;
});
}]);
Then in your template make sure you are you are referencing your controller.
<ion-content class="padding" ng-controller="ExhibitionTabCtrl">
You should then be able to use the a expression to get the data
{{ names }}
Hope this helps :)
I was also looking for this and found this question, since there is no real answer to the problem I kept my search on the Internet and found this answer at the Ionic Forum from ozexpert:
var url = "";
if(ionic.Platform.isAndroid()){
url = "/android_asset/www/";
}
I've used it to load a 3D model and its textures.
update: ionic 2 beta (version date 10 Aug 2016)
You must add prefix to local url like this: prefix + 'your/local/resource'.
prefix by platform:
ios = '../www/'
android = '../www/'
browser = ''
we can create an urlResolver provider to do this job.
notice: only change url in *.ts code to access local resource, don's do this with remote url or in html code.
Have fun and good luck with beta version.
An Starter Ioner
It is possible to access local resources using $http.get.
If the json file is located in www/js/data.json. You can access using
js/data.json
Do not use ../js/data.json. Using that only works in the local browser. Use js/data.json will work on both local browser and iOS device for Cordova.
I have a sample project "Invoking adapter Procedures" in MobileFirst Platform. It receives feed and shows value while previewing in the MFP Console, but after adding the iPad environment and running it in Xcode it does not fetch any feed and instead shows an error in the Xcode console:
Cannot fetch feed
and in the iOS Simulator:
service not available
Adapter code
<displayName>RSSReader</displayName>
<description>RSSReader</description>
<connectivity>
<connectionPolicy xsi:type="http:HTTPConnectionPolicyType">
<protocol>http</protocol>
<domain>rss.cnn.com</domain>
<port>80</port>
<connectionTimeoutInMilliseconds>30000</connectionTimeoutInMilliseconds>
<socketTimeoutInMilliseconds>30000</socketTimeoutInMilliseconds>
<maxConcurrentConnectionsPerNode>50</maxConcurrentConnectionsPerNode>
<!-- Following properties used by adapter's key manager for choosing specific certificate from key store
<sslCertificateAlias></sslCertificateAlias>
<sslCertificatePassword></sslCertificatePassword>
-->
</connectionPolicy>
</connectivity>
<procedure name="getFeeds"/>
<procedure name="getFeedsFiltered"/>
JS Code
var busyIndicator = null;
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
loadFeeds();
}
function loadFeeds(){
busyIndicator.show();
/*
* The REST API works with all adapters and external resources, and is supported on the following hybrid environments:
* iOS, Android, Windows Phone 8, Windows 8.
* If your application supports other hybrid environments, see the tutorial for MobileFirst 6.3.
*/
var resourceRequest = new WLResourceRequest("/adapters/RSSReader/getFeedsFiltered", WLResourceRequest.GET);
resourceRequest.setQueryParameter("params", "['technology']");
resourceRequest.send().then(
loadFeedsSuccess,
loadFeedsFailure
);
}
function loadFeedsSuccess(result){
WL.Logger.debug("Feed retrieve success");
busyIndicator.hide();
if (result.responseJSON.Items.length>0)
displayFeeds(result.responseJSON.Items);
else
loadFeedsFailure();
}
function loadFeedsFailure(result){
WL.Logger.error("Feed retrieve failure");
busyIndicator.hide();
WL.SimpleDialog.show("Engadget Reader", "Service not available. Try again later.",
[{
text : 'Reload',
handler : WL.Client.reloadApp
},
{
text: 'Close',
handler : function() {}
}]
);
}
function displayFeeds(items){
var ul = $('#itemsList');
for (var i = 0; i < items.length; i++) {
var li = $('<li/>').text(items[i].title);
var pubDate = $('<div/>', {
'class': 'pubDate'
}).text(items[i].pubDate);
li.append(pubDate);
ul.append(li);
}
Xcode Console log
I had used the code give in the sample app.
I am unable to recreate this error.
Make sure these are the steps you've taken:
Import into MobileFirst Platform Studio 7.0 the "Invoking adapter procedures in hybrid applications" sample project
Right-click on the adapter folder and select Run As > Deploy MobileFirst Adapter
Right-click on the project folder and select New > MobileFirst Environment, add iPad environment
Right-click on the iPad folder and select Run As > Xcode project
Click Run in Xcode
For me, by following the above steps I was able to successfully run the sample application in the iOS Simulator = the app was displayed and feeds were retrieved.
I am working on an application with PhoneGap (now Apache Cordova, with the version of 2.0), and using the PhoneGap File API to write file.
The File API I use could be referenced at:
http://docs.phonegap.com/en/2.0.0/cordova_file_file.md.html#File
I use Ripple Emulator (0.9.9beta) from here: https://developer.blackberry.com/html5/download to test my application in chrome.
But I find Ripple could not handle the PhoneGap File API correctly.
For example:
I want to create a file (root/foo.json) at the PERSISTENT directory
function onSuccess(fileSystem) {
fileSystem.root.getDirectory("dir", {create: true}, function(dirEntry){
dirEntry.getFile("foo.json", {create: true}, function(fileEntry){
fileEntry.createWriter(function(writer){
writer.write(JSON.stringify(fooData));
}, onfail);
}, onfail);
}, onfail);
}
function onfail(error)
{
console.log(error.code);
}
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onfail);
It works fine on iOS simulator, which did create the right file at the right place, but in the Ripple Emulator running in chrome, I just got a onfail callback, and got error code 10 (FileError.QUOTA_EXCEEDED_ERR).
I also found someone with the similar question here: Is it able to test phonegap application outside emulator?
But still no answer.
Does Ripple emulator currently not work correctly for PhoneGap API? Or did I missed some setting?
Problem found. I need to grant quota before using the PERSISTENT filesystem object.
https://developers.google.com/chrome/whitepapers/storage#persistent
// Request Quota (only for File System API)
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
It seems Ripple-UI didn't do this for me (I checked the source code at lib/ripple/fs.js) . That's why I always get a FileError.QUOTA_EXCEEDED_ERR.