Ionic with jQuery - javascript

i am trying to build a mobile app, but i need some jQuery functions to make it function. at first i thought nothing was wrong since i am debugging it using ionic serve on firefox and everything seems to function. all interface runs smooth and jquery commands executing properly. but when i compiled the app and installed it on my android device. the jquery functions seems to not respond.
i embedded a CDN for the jQuery
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
i hope somebody can help me out here.

Since you have used a CDN for jQuery the application makes a http request to retrieve the js file when its run. This happens in background when you run the application on the browser with ionic serve. But when you run it on a mobile device it needs to have special permissions configured to make the required http requests.
White listing the domain using the cordova-plugin-whitelist will solve the issue.

Related

cordova - call javascript from android background service cordova plugin

Currently, I am developing an Ionic2 app that should have an ability to connect automatically to paired bluetooth devices in range while beeing closed/killed in order to collect specific data.
Using this plugin https://github.com/Red-Folder/bgs-core, I am creating a background service for android.
Since most of the main app logic written in JS, I would like to know whether it is possible to call functionality written in JavaScript from cordova plugin (in case of Android from Java) while the application is closed. If yes, how can I do it?
As an alternative, are there other cordova plugins that support background execution while an app is killed?
I have found similar questions, however, none of them contains a sufficient solution:
run javascript in background service on android phonegap
How to run cordova plugin in Android background service?

How to update my cordova/phonegap mobile application remotely in android?

I have written the mobile app in cordova + angularjs + sqlite. I need to distribute it directly from my server to devices not through the google play.
Now I need to update javascript files stored in www directory on android device. I tried file transfer from app directory (/data/data/my.application.directory/) to some public device directory or server and vice versa - no problem. But problem is the www directory is part of file:///android_asset/ that is read only so I am not able to store any data in there.
Any idea? Thanks.
This is the way I'm using for updating my app and I'm not using Google Play or other stores:
I'm using this cordova plugin : https://github.com/whiteoctober/cordova-plugin-app-version to check my actual app version
cordova.getAppVersion.getVersionNumber().then(function (version)
{
if(version)
// Check the server reference version
});
After, I'm sending the app version number to the server
The server checks the difference between the version sent and the reference version
If the device app version is older, I'm returning the new version to my app client
You provide little information about your application, your code and what you are trying to do, but let me try to help you either way.
If what you want to do is modifying files in the www directory in android clients already shipped/downloaded, forget about it, you would need direct access to the device, and this code is bundled when you ship it.
If you are looking for a hot code push solution, there might be a way of doing so installing additional cordova plugins
When you publish your application on the store - you pack in it all your web content: html files, JavaScript code, images and so on. There are two ways how you can update it:
Publish new version of the app on the store. But it takes time,
especially with the App Store.
Sacrifice the offline feature and load all the pages online. But as
soon as Internet connection goes down - application won't work.
Solution: install cordova-hot-code-push

Geolocation example from Phonegap gives alerts with errors on Android

I was trying the Geolocation example from the below link.
http://docs.phonegap.com/en/1.7.0/cordova_geolocation_geolocation.md.html#Geolocation
I copied the entire content from the first 'Full Example' and saved that file as an HTML. When I opened it in Chrome (desktop) and Android phone inbuilt browser(default), I got the following three alerts on both chrome and android phone.
gap:["Device","getDeviceInfo","XXXXXXXXXX"]
gap:["NetworkStatus","getConnectionInfo","XXXXXXXXXX"]
gap:["App","show","XXXXXXXXXX"]
I clicked 'Cancel' first time and even tried 'Ok' but, nothing happens. If I click 'OK' on all three alerts on my Android Phone, the page goes all white.
So I googled it and found couple of answers on Stack Overflow suggesting:
To remove the Cordova JS file for the desktop browser
Add android specific JS from the Cordova.
So I tried both but none of them worked. Latest, I tried the following solution.
I downloaded the Cordova package (3.0.0), there was a cordova-android.zip which had the cordova.js file at the following path.
/cordova-android/framework/assets/www/cordova.js
So, now my script element looks like this:
<script type="text/javascript" charset="utf-8" src="/cordova-android/framework/assets/www/cordova.js">
After modified the <script> element as above, I don't get alerts in Chrome, but I still get following NEW alerts on my Android phone.
gap:["PluginManager","startup","Plugin ManagerXXXXXXXXXX"]
gap:["App","show","XXXXXXXXXX"]
Code: 1, message: User denied Geolocation.
So, now I have following questions:
How do I solve this problem (to run the HTML page without alert on all devices/browser)?
Any idea on why did my alerts change after changing the cordova.js file?
Regards,
Rumit
Your problem is that you're using cordova.js as if it's a JS library like jQuery, but Phonegap (Cordova) is a hybrid framework not a mobile browser framework (see here for clarification). It's not intended to be used as a standalone JS library in a webpage, but in conjunction with a native Phonegap library in order to build a native application. If you created your page as a Phonegap app and built it for Android, you would be able to (and need to) allow the app permission to use geolocation.
Phonegap apps are implemented via a native WebView and in the case of the Geolocation API, Phonegap will use only use its own implementation if the device doesn't already have a native W3C implementation (which Android does).
So the point is: either create a proper Phonegap app for Android by following the platform guide or simply don't use the Phonegap JS at all since you can call the Android browser's geolocation API (navigator.geolocation) directly from Javascript in your webpage - you don't need Phonegap's JS file to allow you to do this (have a look at the answer to this question).

Phonegap: Cannot call remote hosts via HTTP

I created a HTML5 website with jQuery and jQueryMobile.
If I run it in the browser, everything works fine.
When I deploy it to the iPhone Simulator via Phonegap, it won't find the jQuery object ($) which I included like this:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
console.log($); // undefined
If I modify the src attribute, so that my app uses a local copy of jQuery, the jQuery objects exists:
<script src="lib/jquery.js"></script>
console.log($); // works
BUT then I noticed that none of my Ajax calls within my app work.
So, I assume that my iPhone app refuses HTTP connections to remote hosts.
How can I fix this?
Update: I checked the URL where my app is deployed within the iPhone app and it looks like this:
file:///Users/mobile/Library/Application Support/iPhone Simulator/5.1/Applications/9767E436-B93422-5423-5HLD-1680170C8AC5/MyApp.app/www/index.html
You need to specify which hosts you allow to connect to in the Cordova.plist
This feature is called Whitelist and avoids your app to connect to servers you don't want to

Run phonegap app on chrome with Cross Domain Pages

I'm developing a phonegap app for android and I need to be able to run the app on chrome. My app doesn't have any phone functionality yet. Is all Javascript, HTML and CSS.
The problem is I'm fetching some info of my server but I'm having trouble debbuging the javascript, so I wanted to test te app on the browser so I can use the developer tools, but the ajax call wont work on Chrome (It does on the phone).
Any ideas?
You need to run Chrome with the flag --disable-web-security. You can either run chrome.exe --disable-web-security from the command line (in the appropriate directory) or edit the shortcut and add it. (Assuming you're on Windows)
If running in chrome is for testing only, jprofit's solution should be good enough. However, if users need to run it, they won't start chrome with those options :) In that case, you have two solutions
Use JSONP ans script tags (this could be a lot of work and error handling is poor)
Route your calls through a proxy on the local server http://developer.yahoo.com/javascript/howto-proxy.html, http://www.daniweb.com/web-development/php/code/216729
The simplest solution for me has been to use a proxy (as #juan-mendes suggests).
I use a tiny NodeJS server called Sleight, which runs locally ( http://phonegap.com/2010/01/20/introducing-sleight/ ).

Categories