Unable to manipulate DOM content of Ionic Android app - android

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

Related

ionic android unexpected token

I am using the Ionic Framework to build a mobile app for Android/iOS. I was able
to build the project for android (ionic build android). When I run the app, it will be only a white screen, that's because there is an error (when you use GapDebug, you can run apps on your phone and you will be able to debug, and see errors). Now if I run it on the desktop browser there really is NO error and everything is working. Below is the error that is shown in GapDebug:
Now when you check the code in service.js line 394:
There's nothing wrong with the code right? If I try to change line 394 to something like key : self.currentUser, there will be NO error and the app will work. What seems to be the problem here?
Not sure why you are making an object's attribute a list? If you want the key to be childQuestionSnapshot.key then remove the square brackets.
If you are trying to update a list of objects, you can do something similar to the below:
var test = [{key: 'thisguy'},{key: 'thatguy'},{key: 'myguy'}]
test.forEach(function(item){
item['key']='newguy'
})
console.log(test)
Do this instead
var updateObj = {};
updateObj[childQuestionSnapshot.key] = self.currentUser;
applicantRef.update(updateObj, function() {
console.log("applicant answers updated");
});

Trigger event is not working in touch devices

I've this following JS code, it's working perfectly in the desktop but it's not working in the touch devices.
jQuery(document).ready(function(){
jQuery("#gallery_trigger").click(function () {
jQuery(".my-second-portfolio").trigger( "click");
});
});
From my analysis, I figured that following line of code is not working
jQuery(".my-second-portfolio").trigger( "click");
I understand that .trigger( "click"); is not appropriate for the touch devices, so could you please help me to work this code in all devices?
Try 'tap' or 'vclick'
http://api.jquerymobile.com/tap/
$(".my-second-portfolio").tap();
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.
Classic jQuery syntax:
$(document).ready(function() {
});
To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:
$(document).on('pageinit', function() {
});
To execute a code that will only available to the index page we could use this syntax:
$('#index').on('pageinit', function() {
});
There's also another special jQuery Mobile event and it is called mobileinit.When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind them to mobileinit. One of a good examples of mobileinit usage is turning off ajax page loading, or changing default ajax loader behavior.
$(document).on("mobileinit", function(){
//apply overrides here
});
Or you could use something like this:
$('div:jqmData(url="index.html")').on('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});
You could try to use $('.my-second-portfolio')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/

Can't use relative paths in object tags in Cordova/Phonegap?

I noticed that I can't use relative paths in my Cordova project when referencing them in object tags. For example, this works on the browser but not in Phonegap:
<object id="pause" type="image/svg+xml" data="img/icons/pause.svg" class="icon clickable hidden"></object>
However, this functions perfectly fine in both Phonegap and the browser:
<img id="pause" src="img/icons/pause.svg">
Using a remote path also works in Cordova, but everything falls apart when I use a local/relative one. Here's what Android spits back:
<img src="file:///android_asset/webkit/android-weberror.png" align="top">
<h2>Webpage not available</h2>
<p>The webpage at file:///android_asset/www/img/logo.svg could not be loaded because:</p>
<!-- The net::ERR_FILE_NOT_FOUND is replaced by a localized error string -->
<p>net::ERR_FILE_NOT_FOUND</p>
Unfortunately, I can't use a remote location (since that won't let me execute the onclick and onmousedown events inside the SVGs). Also, avoiding <object> tags altogether is not an option, since I need to execute and change some of the code inside the objects (like changing the fill color).
Is this a bug? If not, what can I do to get my code to work?
A jacky workaround to this is reading the file manually using Javascript and putting the contents directly into the data attribute so that it reads <object data="data:image/svg+xml;utf8,[FILECONTENTS]"></object>. It's not elegant, but it works fine.

Android webview and dynamically loaded histats.js file

-- Problem solved. The cauase was a malicious DNS server that masks google analytics code and loads altered code --
For 8 hours I'm struggling with a javascript file, still I couldn't solve issue.
In my Android application I use webview. So normally it loades pages from my webserver. But it seems like, when my android application is installed firstly, After page load a dynamical js file is loaded.
When I debug I see in my WebView's onLoadResource(WebView view, String url) method, it is from histats.com. I don't use histats page. I only use statcounter and google analytics.
So it seems like, one of the content of my page dynamically loads histats.js. When histats is loaded it shows an Adsense advertisement on top of my page. You can find loaded js files below.
To test this case, everytime I uninstall my application and reinstall it. Because this behaviour only happens in the first webview load.
Temporarily I stopped loading Google analytics code to not to show the advirtesements, that are loaded by histats. When analytics.js is not loaded, histats.js doesn't load or doesn't show an advertisement. But I need a permanent solution. Also note that when onLoadResource is fired, histats.js file is already loaded.
Notes:
- I don't think that will be the cause but last week I activated demographics and interests report
- In my website I use adsense but my opening page doesn't have adsense code.
So how can I find out which element causes this ?
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css
http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
http://cdn.jsdelivr.net/colorbox/1.5.6/jquery.colorbox-min.js
http://www.statcounter.com/counter/counter.js
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff
http://c.statcounter.com/t.php?sc_project=9470079&resolution=480&h=800&camefrom=&u=http%3A//example.com/mains/mypage/&t=Mobile%20hub%20-%20example.com&java=1&security=f927fd2c&sc_random=0.5743160555139184&sc_snum=1&p=0&invisible=1
http://www.google-analytics.com/analytics.js
http://s10.histats.com/js15_as.js
http://ad.exisolutions.com/gads/sp_336x280.html
http://s4.histats.com/stats/0.php?2672616&#f16&#g1&#h1&#i1&#j1400933555245&#k0&#l1&#mMobile%20hub%20-%20example.com&#n0&#o1000&#q0&#r0&#s0&#ten-IE&#u480&#vhttp%3A%2F%2Fexample.com%2Fmains%2Fmypage%2F&#w
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
http://googleads.g.doubleclick.net/pagead/html/r20140520/r20140417/zrt_lookup.html
http://pagead2.googlesyndication.com/pagead/js/r20140520/r20140417/show_ads_impl.js
http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-4244446356287789&format=336x280&output=html&h=280&slotname=1396969791&adk=1267119624&w=336&ea=0&flash=0&url=http%3A%2F%2Fexample.com%2Fmains%2Fmypage%2F&dt=1400933556220&bpp=179&shv=r20140520&cbv=r20140417&saldr=aa&correlator=1400933557079&frm=24&ga_vid=931282578.1400933557&ga_sid=1400933557&ga_hid=1996810608&ga_fc=0&u_tz=180&u_his=1&u_java=0&u_h=800&u_w=480&u_ah=800&u_aw=480&u_cd=32&u_nplug=0&u_nmime=0&dff=sans-serif&dfs=16&adx=0&ady=0&biw=-12245933&bih=-12245933&isw=336&ish=280&ifk=1348755138&eid=317150304%2C317150313&oid=3&rx=0&eae=2&jp=2&brdim=0%2C38%2C0%2C38%2C480%2C0%2C480%2C762%2C336%2C280&vis=1&fu=0&ifi=1&dtd=967
http://pagead2.googlesyndication.com/pagead/osd.js
http://googleads.g.doubleclick.net/mads/static/formats/templates.js
http://pagead2.googlesyndication.com/pagead/images/adc-i-00aecd.png
http://googleads.g.doubleclick.net/simgad/17675984934948895957
http://googleads.g.doubleclick.net/pagead/images/mobile_unified_button_icon_white.png
http://csi.gstatic.com/csi?v=3&s=gmob&action=&rt=crf.526,cri.947
http://www.gstatic.com/bg/BcR1_JHsmtBAKR1Crki_wuwBn2NQgHTsJL0mibVeye0.js
http://pagead2.googlesyndication.com/activeview?id=osdim&avi=BAqEktoyAU9C0FaTHiQa57YGoCwCJuoeQugEAABABOAHIAQKgBgKoE4AB&adk=1267119624&p=0,0,280,336&tos=0,0,0,0,0&mtos=0,0,0,0,0&rs=1&ht=0&swf=-&fp=client%3Dca-pub-4244446356287789%26url%3Dhttp%253A%252F%252Fexample.com%252Fmains%252Fmypage%252F%26correlator%3D1400933557079%26ifk%3D1348755138%26eid%3D317150304%252C317150313%26oid%3D3&afp=%26format%3D336x280%26output%3Dhtml%26slotname%3D1396969791%26flash%3D0%26dt%3D1400933556220%26adx%3D0%26ady%3D0%26ifi%3D1&r=i&bs=-12245933,-12245933&bos=480,762&ps=-12245933,-12245933&ss=480,800&tt=2470&pt=2195&deb=1-1-1-4-5--1&iframe_loc=http%3A%2F%2Fad.exisolutions.com%2Fgads%2Fsp_336x280.html&is=336,280
http://s4.histats.com/stats/e.php?2672616&#Ab&#R78479&#w
I also added following script to end of my page. And checked for HTML code.
<script type="text/javascript">
$( document ).ready(function() {
setTimeout(function() {
var htmlData=$("html").html();
var formData = {html:htmlData};
$.ajax({
url : "/log_this/",
type: "POST",
data : formData
});
}, 4000);
});
</script>
It seems like this code is injected to the head section of webpage:
< script type="text/javascript" async="" src="http://s10.histats.com/js15_as.js" >
< /script >
< script type="text/javascript" async="" src="http://s10.histats.com/js15_as.js" >
< /script >
Edit 1:
histats also loads this page: http://ad.exisolutions.com/gads/sp_336x280.html
Regarding to that page's source, it loads adsense ads with this publisher: ca-pub-4244446356287789
Edit 2:
I beautified initial file to find out who injects this.
Ugly file: http://s10.histats.com/js15_as.js
You can find beautified version here: http://jsbin.com/tenunike/1/
Edit 3:
To isolate the problem I stopped all css and js file includes.
No adsense occured. But then I enabled google analytics js file include it happened again.
So histats.js file is included whenever I include google analytics.js file
Edit 4:
After getting that problem is based on google analytis code, I checked my development environment for viruses, etc. So I get that a virus changed my DNS server to an unknown IP, like this: 37.220.8.189.
So analytics code address is this: http://www.google-analytics.com/analytics.js
But my DNS server gives this IP: 188.165.174.188
So resultant analaytics file is this, it has malicious code in it: http://188.165.174.188/analytics.js
I put a copy of this malicious code here for future references: http://jsbin.com/mukijojo/1/edit
Edit 5:
For months this problem occurs every once in a while. So I add mlicious DNS serer address here:
37.220.8.189
31.3.252.69 and 31.3.252.68
Also similar problems:
https://nakedsecurity.sophos.com/2012/10/01/hacked-routers-brazil-vb2012/
http://www.cbits.co.uk/ourblog/news/fake-flash-player-update-virus-routers-tp-link/
http://www.gohacking.com/dns-hijacking/
http://www.gohacking.com/hack-ethernet-adsl-router/
I solved my problem.
The cauase was a malicious DNS server that masks google analytics code and loads altered code.
When I try to access
http://www.google-analytics.com/analytics.js
actually I was reaching
http://188.165.174.188/analytics.js
Although the IP address of 188.165.174.188 doesn't belong to Google IP ranges.
info: https://en.wikipedia.org/wiki/DNSChanger
checking: http://www.dcwg.org/detect/
fixing: http://www.dcwg.org/fix/

jQuery .on() not working with long dynamic content on Android and css()

I'm trying to bind interactions to dynamically loaded links:
HTML:
<div id="content">
My dynamic content will be here.
</div>
JS:
$(function(){
loadContent();
$('#content').css('height',400);
$('#content').on('click','a',function(){
alert();
});
});
This is working fine on desktop, and with a quite short content on Android.
But it will not work with longer content on Android (with no JS error on Eclipse). Yet, I have not identified any other differences but content length between working and not working pages. Therefore, I tried to artificially limit the length of the content, and then it is working fine.
Do you have any clues of what is happening ?
// EDIT
I updated the code as I had made some basic mistakes when typing this question. This version better reflects the core problem.
// EDIT
I finally managed to isolate what produced a conflict. It is due to a css update of the div after content being loaded. If I artificially remove the height style attribute using Weinre, then the links are clickable again!
I can't see how this is working on desktop at all because the on() call should be inside the DOM ready handler, and the event name should come before the filtering element, like this:
$(function(){
loadContent();
$('#content').on('click', 'a', function(e) {
alert('something');
});
});
First, fix your document ready function to wrap loadContent and on.
Second, If you load content after the page is loaded. you should bind event to the body like this
$(function(){
loadContent();
$('body').on('click', '#content a', function(){
alert('Hello world!');
});
});

Categories

Resources