PhoneGap + Android + jQuery Mobile - Connection to server unsuccessful - android

I'm trying to create an Android (2.2) app using Phonegap (version 1.9.0) and jQuery Mobile (1.1.0). Specifically, the app is supposed to send a GET request to an existing WCF REST service and retrieve JSON data (a list of folders) and display each item as an option in a select drop down menu.
Right now, all this works as it should when I use the desktop browser. The WCF REST service sends the correct response, the browser renders the page correctly and puts the options in the select menu as I want it to. However, when I use the following code in Android app using Phonegap:
$.getJSON('http://xxx.xxx.xxx/MobileService.svc/GetFolders?callback=?', null, function (folders) {
$.each( folders, function( i, folder ) {
$("#folders").append("<option value='"+folder.Id+"'>"+folder.Name+"</option>");
});
$("#folders").selectmenu("refresh");
});
...I get the error message when I boot the Android app (debugging on physical device):
Connection to the server was unsuccessful. ("file:///android_asset/www/index.html")
When I comment out the above $.getJSON code, the app loads fine, but the select menu is unpopulated.
I've also noticed that apparently because Phonegap uses the "file://" protocol, it is not affected by the "same-origin policy" that the "http://" protocol is...I had been using JSONP when I was working with the browser, which is why I have the callback. I don't think this should be the reason why it is failing, but I dont know. Any help will be greatly appreciated!
Things I've tried:
Changing the access origin to ".*" in the cordova.xml
Adding 'super.setIntegerProperty("loadUrlTimeoutValue", 60000);' to the activity

You can try to set your cordova.xml to "*" instead of ".*" as seen on the Getting Started Guide
Or even better:
http://xxx.xxx.xxx

It turns out in my particular case that the issue boiled down to the mobile phone being on guest wifi network that didn't have access to the network where the REST service was hosted so the connection was being blocked.
Hope that can help someone

Related

Not able to return back to the app from ChromeCustomTabsBrowser

I have implemented login using ChromeCustomTabsBrowser. After successful login, if app's Open Supported links setting is set to "Ask evety time" instead of "Open in this app", response is not getting back to the app and showing 404 screen as attached in screen.
Interesting - looks like you are using an https scheme for redirects and here is how we'd like the technology to work:
You are automatically deep linked back to your app when a login response is received over the https URL.
However, in practice I believe this is what happens:
Almost all mobile browsers try to run an internet hosted web page instead
A claimed https scheme solution is very hard to achieve and rarely used in practice today - more of an aspiration than a reality? But I believe it would need to work like this:
Capture the response on the internet web page which runs on your mobile device
Then deep link back to the app
A similar approach is used by a sample internet web page of mine - do a view source to see the logic
If it helps I have a demo Android sample that instead uses the more mainstream option of private URI schemes - though I may update it to claimed https schemes one of these days.
Code
Explanatory Articles
Even getting this form of Chrome Custom Tab based login working was a struggle, and my posts have some lessons learned that may be useful.

Phonegap / Cordova include external src without http / https

So here it is, I'm starting a Phonegap app and would like to use a given library. In the library code it tries to reach some URL with this form :
//img.site.com/given_img.png
without http or https at the beginning so it will adapt nicely. But when launching the app on my phone I see it tries to reach :
file://img.site.com/given_img.png
Not http or https... But file protocol. Obviously it fails to load...
Anyone knows how to deal with this ?
Thanks ahead !
As far as I can tell, after researching this for some time... Currently there is no solution out of the box. You have to check the code with JS and force add the wanted protocol into it before execution. I simply changed the way I wanted to do things and avoided that kind of situation.
The idea behind having src="//domain.com/some/pic" is so that the browser will request those assets with the protocol matching your website, meaning, if your website is running on http - it will request the picture over http, vs if your website is running on https it will request the image with https://.
#Jeremy is right, there's no option at the moment.
But you can take the protocol matching your website with var protocol = window.location.protocol and use that in your src={{ protocol + image }}
This is to prevent from writing hard-coded http / https and mix secure with non-secure content in your website which causes errors to jump like "This Page Contains Both Secure and Non-Secure Items"

Android - Worklight Hybrid application fails to connect to server in the emulator

I created a worklight application. I tried running that application on android emulator and i am getting the following error.
[http://localhost:8080/apps/services/api/MyFirstApp/android/query] Host is not responsive.
Try to manually access the URL through the android emulator browser to verify connectivity
So i tried to enter the same url in the emulator browser, i got the following text:
/*-secure-
{"WL-Authentication-Failure": {"wl_remoteDisableRealm":{"reason":"Login Failed}}} */
Can someone help me with this?
I am using Android OS version: 4.2.2, API level: 17
I haven't changed any application settings myself..
I am trying to go to a basic login page with the url "https://jazz.net/jazz/auth/j_security_check"
This is my adapter XML:
<wl:adapter xmlns:wl="worklight.com/integration"; xmlns:http="worklight.com/integration/http"; xmlns:xsi="w3.org/2001/XMLSchema-instance"; name="RQMAdapter">
<displayName>RQMAdapter</displayName>
<description>HTTP type Worklight Adapter for jazz server</description>
<connectivity>
<connectionPolicy xsi:type="http:HTTPConnectionPolicyType">
<protocol>https</protocol>
<domain>jazz.net</domain>
</connectionPolicy>
<loadConstraints maxConcurrentConnectionsPerNode="2" />
</connectivity>
<procedure name="loginToRQM" />
</wl:adapter>
This is my scenario:
I have a requirement where I need to read information about the projects from jazz.net for a user. They are all available on the jazz server within an XML file. I need to process it to a mobile device to make it available on hand held device... So, now I am told that i will have to download some of the files from the server, so i need to have file IO on my app. I learned that we need to write this part using a Cordova plug-in in Worklight.
please let me know what else is needed for the solution... thank you
Make sure to place the actual IP address of your server machine:
Change the value for worklightServerRootURL in the file
application-descriptor.xml (located at: yourProject\apps\yourApp)
Build and deploy
Right-click on the generated Android project >> Run As >> Run application
If you are using using Worklight 5.0.5, make sure to upgrade to 5.0.6, where a fix is available when only API Level 17 is installed.
As for going to that URL, you need to explain where exactly you're trying to go to it from, and how... you need to be more descriptive. It sounds to me like you haven't gone through the Getting Started material. Please do.
I had the same problem.
I have solved it by using the real IP address of the server in the WL app instead of using localhost:
When the emulator is running your app, press the Menu button.
Select to change your server URL
Remove "localhost" and use the IP address.
Accept and try again.
This fixed my problem.

Sencha Touch 2.1 native (android) app not getting json from remote (it works on PC)

I created my first Sencha touch 2 app by watching this video (http://youtu.be/5F7Gx0-W-M4) and it has a store page structured like this:
Ext.define('FirstApp.store.Places',{
extend:'Ext.data.Store',
config:{
autoLoad:true,
model:'FirstApp.model.Place',
proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyCFWZSKDslql5GZR0OJlVcgoQJP1UKgZ5U',
reader:{
type:'json',
rootProperty:'results'
}
}
}
})
The after-build (after running "sencha app build native") package work very well on my MAC (all browsers) but the generated app (i am running it on my nexus phone) works but doesn't collect any data from the google maps json.
Any help would be appreciated
The example you are referring is using google map's place search API. You can not use this API when you build the app for mobile phone with proxy set to ajax . Basically, you can not use any resource that is outside your domain. Like if your site is at yourdomain.com and there is someotherdomain.com, then you can't make ajax request to this someotherdomain.com from yourdomain.com unless that domain allows you to. In this case, your mobile app is not having any domain. You are just loading a page inside webview.
The reason is, ajax will not be able to load cross-origin resources. App build works on browsers because I believe you're using chrome with --disable-web-security flag. To work with CORS you need to use JsonP proxy. It's the only way if you're packaging for mobile app. If in a case, you own the server ( not in this context though ) then you can allow CORS by setting appropriate headers like
Access-Control-Allow-Origin: *
or
Access-Control-Allow-Origin: http://yourdomain.com/resource
Try setting proxy to JsonP .

Changing the URL/ IP address of the AJAX function to be static

Now, I have a web application made using [html, asp.net, sql server,javascript & ajax].
As usual I use ajax to send data to the server using the aspx page.
My Application is working fine, but I want to deploy it on Android.
The asp urls I use at the ajax function are:
url:'http://localhost:49169/xxxxx.aspx'
As you can see, this won't be working on the mobile coz the url changes everytime.
So what should I do in order to change the url and IP Address to make them static & take the new configurations of the IP without recompiling the project ?
Thanks.
It depends upon which version of visual studio you are using. But the general gist is that you can set the port from "using dynamic port" which it chooses one for you e.g. 49169 to a fixed port which you can specify.
Here are the intructions for vissual studio 2008, I believe it's the same intructions (or very similar) for other versions of visual studio:
http://msdn.microsoft.com/en-us/library/ms178109%28v=vs.90%29.aspx

Categories

Resources