Develop Reference

Unable to manipulate DOM content of Ionic Android app

angular.module("app.categories").controller("CategoryController", t), t.$inject = ["$scope", "$stateParams", "$state", "categoryManager"]
angular.module("app", ["ionic", ["app.home","app.products",...]);
angular.module("app").run(["$templateCache", function(t) {
t.put("app/scripts/about/about.html", '<ion- view>.....'),t.put("app/scripts/home/block.html", '<div>....')}]); //this is how the page content is loaded
I am running this app in the browser using Ionic ('Ionic serve' in the root directory). I am not able to run basic JavaScript on the page who's content has been loaded like this. After a timeout if DOMContentLoaded is called, the element is picked up but running the following only manipulated the id of element, not the html or the value
setTimeout(function(){
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('customBox').id = 'changed'; //to test, id changes
document.getElementById('customBox').innerHtml = '<h1> test </h1>'; //does not change anything, no errors in console
document.getElementById('customBox').text= '<h1> test </h1>'; //does not change anything, no errors in console
document.getElementById('customBox').html= '<h1> test </h1>'; //does not change anything, no errors in console
});
},2000);
Is there anything that's preventing any change to the page content in the browser? How to make changes in the DOM content using simple JavaScript for this Ionic Android app?

Don't try to manipulate the html of an angular app directly unless you have written a custom directive. If you want to change the innerHtml use ng-bind-html on the div and just modify your scope.
Also, don't use setTimeout in an angular app, always use the $timeout or $interval services instead.
So your code, somewhere inside a controller, should just look like this:
$scope.testContent = '<h1> tet </h1>';
and the html:
<div id='customBox' ng-bind-html="testContent"></div>
Although the main reason your code doesn't work is that as soon as you've changed the id to "changed" all the other getElementById calls won't find the div.

Try using angular.element like this
angular.element( document.getElementById('customBox') ).innerHtml = '<h1> test </h1>';
Visit this link for detail https://docs.angularjs.org/api/ng/function/angular.element

locales/en-US/translation.json loads in Eclipse but fail in iphone

I am currently developing a cross platform mobile app using phonegap 2.5. When app starts it loads a json file for setting the app's language. It works perfectly in android but in ios it gets me that error: failed loading: locales/el-GR/translation.json. I tried to change the relative path for locales folder or move the current folder to other scope but neither seems to work.
WWW subfolder path
_www/
__index.html
__js/
___some js files like as main.js, cordova.js,jqmobi.min.js, i18next-1.7.1.min.js e.t.c.
__locales/
___en-US/
____translation.json
And the function i call in main.js:
i18n.init(
{
lng: AppSettings.Language.get(),
fallbackLng: 'en-US',
/* Where __lng__/__ns__.json = en-US/translation.json */
resGetPath : '/locales/__lng__/__ns__.json',
resPostPath: '/locales/__lng__/__ns__.json',
debug: true
},
function(){
}
);
In main.js i give the relative url path for loading translation.json (locales/en-US/translation.json). This works fine in android but in ios it doesn't seem to load it.
So, if you can, i could need some help.
Does iphone understand differently the relative paths of a phonegap mobile app?
What path should i give so that the app loads the translation.json?
If you need more info tell me.
Ty in advance.

Angular Js and Trigger.io - Can't follow a link on Android that works on iOS

I am using AngularJS with Trigger.io to develop a mobile application for both iOS and Android.
When I try to open a link that looks like this:
<a ng-href="#/offers/{{featured_offer.Id}}"></a>
It works perfectly fine on iOS, but on Android I get this message in the trigger console, and the link is not navigated to:
[WARNING] Attempted to open a URL which could not be handled: unsafe:content://io.trigger.forge722b6464a0e211e2ba9d12313d00dc45/src/index.html#/offers/8
How can I get this to work in Android the same as it works in iOS?

Looks like Angular adds unsafe: to url schemes it doesn't recognise, I think you want to include something like:
app.config(function($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content):/);
});
Which adds content: to the accepted url schemes.

I had this same problem, specifically with trying to display an img with a src of a file returned by forge.file.getImage. Angular adds unsafe: to the content: prefix of the local img URL, and as connorhd said, you need to add content: to the url whitelist.
Note that compileProvider's API has changed with recent versions of Angular, so I'm commenting here in case anyone else finds an updated version of this workaround useful.
app.config(['$compileProvider',
function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content|blob):|data:image|/);
// note: you'll also have to do imgSrcSanitizationWhitelist if you want to use general links as well as ng-src on images.
}]);

I too had this problem just add sanitizer in you config.xml
var app = angular.module( 'myApp', [] )
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
]);

jQueryMobile running on Android / PhoneGap refuses .load / .ajax

I really hate asking questions that I feel were asked a thousand times before. This is one of those questions I feel others must have encountered, but having searched stack overflow, none of the supposed solutions work for me so I must be doing something wrong.....
I have an extremely simple app setup. index.htm, and terms.htm. There is some textual data in test.htm. I set both $.support.cors = true; and $.mobile.allowCrossDomainPages = true; at the appropriate time after stuff has loaded.
At first I tried loading terms.htm's data into an element within index using $('#elementid').load('terms.htm'); (both test and index are in the same root /assets/www/ directory, and my webview loads index oncreate) but absolutely nothing was happening. So I opted to try .ajax so that I could at least get an error message, and all I get is 'error'. Surely, it is possible to load local textual assets with JQ on DroidGap?
$('#header').load('terms.htm');
$.ajax({
type:"GET",
timeout:10000,
async: false,
url: "terms.htm",
success: function(data) {
$('#header').html(data);
},
error: function(xhr,msg){
alert( msg);
}
});

I'm not 100% sure, but I think it's a problem with ICS 4.0.3. On 4.0.2 ajax seems to work completely fine, but for me too on 4.0.3, no ajax. Like you, I've tried everything, and nothing has worked..
I'm using PhoneGap btw. Ajax works fine in the standard browser, but not in a PhoneGap app..

If you are running your application in Chrome
Then you need to disable-web-security and enable loading local files see Cross-domain requests using PhoneGap and jQuery doesn't work
Else if Safari or simulator or web-server
Then it should work

See this link. I had the same problem and this solved it. Also, I think they fixed it in 1.6.0 but I am now seeing the same issue on iOS with PhoneGap 1.6.1.

it is just a long shot, but you say "I set both $.support.cors = true; and $.mobile.allowCrossDomainPages = true; at the appropriate time after stuff has loaded.". The jQuery mobile documentation says you have to set your global configuration before you load JQM:
Because the mobileinit event is triggered immediately, you'll need to bind your event
handler before jQuery Mobile is loaded. Link to your JavaScript files in the following
order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
In your case this would be:
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="jquery-mobile.js"></script>
Like I said, just a guess ...

HttpUnit/HtmlUnit equivalent for android

I'm looking for a browser-simulating library on android, which handles things like
loading a website (http/https)
Redirections: HTTP (3xx Status Codes), JavaScript, HMTL tags
filling out html-forms
easy html parsing (could fall back to JSoup for that one)
HttpUnit or HtmlUnit would do just fine, but both of them are a pain to get running on android.
Is there any other option other than (Android)HttpClient (and therefore doing lots of the above on my own)? Or can I somehow get use of the android webkit/browser?
Thanks in advance!

I would recommend you to have a look at AndroidDriver for selenium. It seems to be a straightforward approach to easy test WebApplications with the Android Testing Framework.
You must use an Activity that includes a WebView in order to test HTTP/HTTPs websites.
The Driver is instanciated with this Activity:
WebDriver driver = new AndroidWebDriver(getActivity());
Here is a sample test, quoted from the link above:
public void testGoogleWorks()
// Loads www.google.com
driver.get("http://www.google.com");
// Lookup the search box on the page by it's HTML name property
WebElement searchBox = driver.findElement(By.name("q"));
// Enter keys in the search box
searchBox.sendKeys("Android Rocks!");
// Hit enter
searchBox.submit();
// Ensure the title contains "Google"
assertTrue(driver.getTitle().contains("Google"));
// Ensure that there is at least one link with the keyword "Android"
assertTrue(driver.findElements(By.partialLinkText("Android")).size() > 1);
}