I got one strange behavior from JQM page.
I am using phonegap-android 4.4.2 with eclipse IDE.
Page code :
<html>
<head></head>
<body>
<div data-role="page" id="folfirstForm" data-dom-cache="true">
<link rel="stylesheet" href="../../css/follow_up.css">
<script src="../../js/addProdLine.js"></script>
<script type="text/javascript">
$(document).off("pageshow", "#folfirstForm").on("pageshow", "#folfirstForm", function() {
alert("First form loaded!");
AddElement();
});
</script>
----Some body----
</body>
</div>
</div>
</html>
You can see on code that I have put data-dom-cache="true" as per my requirement. I have also include the js file named as addProdLine.js which contains functions that i required, (for e.g. The AddElement() is from include file it self).
Now, when i am visiting this page first time all the functionality works very well. On second visit on same page I am getting the previous state of form which is expected as i have put data-dom-cache="true". But Might be due to data-dom-cache="true" my external js files are not being loaded on the second time visit on same page. I want, that on every visit ,my js file should run.
Jquery mobile only loads tag once when whole document is loaded. After the document is loaded if you will click on other links then only content part data-role=page will be refreshed through ajax along with data transition effect. Hence either add all your js script in a file and add it into head tag or stop loading other pages through ajax using following option:
<a href="#" data-ajax=”false”>Without Ajax</a>
But if you will disable content loading using ajax then link will work as it works in normal webpage and also transition effect will be not exist.
Edit:
One Alternate way could be: you can append some random values to the path of your JS files.
<script src="../../js/addProdLine.js?Q=<?php echo time(); ?>"></script>
Related
I have one cordova app that loads content directly from client website.I have used it like <content src="https://example.com/ios/index.html"> in config.xml file.I have used the splashscreen delay of 6 seconds.and the issue is when the splash screen hides shows the black screen for 5-10 seconds and after that client website content is shown.and also sometimes i am getting the error CONNECTION TO SERVER WAS UNSUCCESSFULL.I have also specified <preference name="loadUrlTimeoutValue" value="700000" /> but still having same issue.Anyone having the same issue for cordova ios and android app?can anyone help me with this issue.
You shouldn't do it like that. Now I don't want to play this script where you ask A and I tell you to do B, don't worry, but it's really not the way you should do it.
You should make cordova load an index.html which loads a javascript file cordova.js. You don't need to actually have it, the js file will be included when you compile the app.
Then you should add the whitelist plugin in case you don't already it, in order for your website to load correctly. https://www.npmjs.com/package/cordova-plugin-whitelist
You should disable auto-hide for the splashscreen in config.xml like so:
<preference name="AutoHideSplashScreen" value="false" />
You should then make the javascript load a fullscreen iframe with your website like so, then detect when loading has finished: (This should go into your index.html, in the cordova app)
<html>
<head>
<title></title>
</head>
<body>
<iframe id='frameid' onload='iframeLoaded();' src='https://mywebsite.com/mypage.html' style='border: 0; width: 100%; height: 100%'>Your browser doesn't support iFrames.</iframe>
<script src='cordova.js'></script>
<script>
iframe = document.getElementById("frameid");
iframe = document.getElementById("frameid");
function ready(callback){
// in case the document is already rendered
if (iframe.readyState!='loading') callback();
// modern browsers
else if (iframe.addEventListener) iframe.addEventListener('DOMContentLoaded', callback);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (iframe.readyState=='complete') callback();
});
}
ready(function(){
setTimeout(function(){
navigator.splashscreen.hide();
},555)
});
</script>
</body>
</html>
I haven't used cordova for a few months but that's how I did it if I didn't forget anything - Hoping I didn't... I didn't have time to test this, but you get the gist:
App start
Show Splashscreen
Load Index.html with Iframe in fullscreen pointing to https website.
Wait for iframe to finish loading.
Close splashscreen
Tell me if you run into any issue and I can help you further.
Scenario:
I'm using Android Robotium Solo (v5.6.3) to automate web page interactions within my app. I need to automate data entry into INPUT fields that are contained within an IFRAME but I do not have much luck!
The Problem:
When I attempt to use, for example, solo.waitForWebElement(By.id("room-number", 5000, true) and solo.typeTextInWebElement(By.id("room-number", "101"), solo is unable to locate the element.
The discussion on this related issue "Accessing an iFrame inside a WebView #794" (https://github.com/RobotiumTech/robotium/issues/794), suggests that it's possible to use "solo.getConfig().webFrame = XXX" to focus solo on the content of a specific IFRAME and then access the WebElements. Unfortunately, I've not been able to get it to work and haven't been able to find any full examples. I assume XXX might need to be the "id" of the IFRAME but in my scenario (where I don't have control of the source code for the web pages being automated) the IFRAME tag has no id assigned.
I've created a simple example test scenario:
index.html - the main page that hosts the IFRAME
<html>
<body bgcolor="#AA3333">
<div id="wrapper">
<iframe src="embed.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
embed.html - the source for the IFRAME that contains the INPUT element.
<html>
<body bgcolor="#3333AA">
<div id="page-container" style="height:100vh; width:100%;">
<label>Room Number</label>
<input type="text" name="ROOM_NUMBER" id="room-number">
</div>
</body>
</html>
After reviewing the source code for Robotium in more detail I confirmed that using
solo.getConfig().webFrame = ['id' of IFRAME as a String]
allows subsequent calls to solo.typeTextInWebElement etc. to work OK as expected.
The trick in my scenario is that the parent page assigned no id to the IFRAME so I programatically assign one at runtime using the following javascript
document.getElementsByTagName("iframe")[0].id = "test";
and then use
solo.getConfig().webFrame = "test"
I am creating a very simple WebView application on android. However, I want to edit the html file before displaying it in the WebView.
For example, if the original html source looked like :
<html>
<body>
<h1> abc </h1>
<h2> abc </h2>
......
<h6> abc </h6>
</body>
</html>
And I want to change it to:
<html>
<body>
<h1> cba </h1>
<h2> cba </h2>
......
<h6> cba </h6>
</body>
</html>
(all "abc" become "cba")
And then, I want to display that new code in my WebView. How can I do this? thanks
I am not sure why do you need this and what kind of app it is to need this. But if you have to do it check foll code:
$(function() {
for(var i =0;i<101;i++) {
if(jQuery('h'+i).length)
jQuery('h'+i).html(jQuery('h'+i).html().split("").reverse().join(""));
}
});
First, a note on your header tags: <h100> is a common misconception for newcomers. <h_> tags are simply an organizational item for your page, and only go out to <h6> You can have multiple <h1> tags on the same page, which are just headings for that section of content (with <h2> implying a subsection of <h1>, etc).
From there, when you say "original source", I assume you mean this is your own code, correct? Not a WebView sourced from another site? If this is the case, and you are only looking to change a specific instance of a specific string in your own code, a Find and Replace should be sufficient via any text or code editor you are using.
But if this is the case, you might want to look into first learning HTML and being able to render it in a basic web browser before moving on to also trying to learn Android.
Some background: I am using Jquery Mobile (1.4 stable) and Phonegap (3.3) to build an app. that I am currently testing on Android 2.3 (device) and Android 4.1.2 (emulator). I have a link in index.html that has a link to another page (say test.html also a JQM page). The test.html also resides inside the www folder of the app. but is quite a large html file 159 KB in size uncompressed. When the link is clicked in index.html , I wish to show a loading message until the test.html page (takes 2~3 seconds to load) is shown on screen. I do not want to load the test.html using ajax, so have mentioned data-ajax='false' on the link (because this causes problems for test.html).
Methods I have tried to achieve this:
a) Listen to vclick on the <a> and used the technique mentioned in https://stackoverflow.com/a/16277865 to show the message. I didn't use event.preventDefault() so expected JQM to follow the link normally. Also tried simply $.mobile.loading('show') without using setInterval.
b) Listen to vclick on the <a> and used the technique mentioned https://stackoverflow.com/a/16277865 but this time set event.preventDefault() and used window.location.assign('test.html');
c) Created a <span> that just said loading, hid it using $('span selector').hide() on $(document).ready() and then listened to vclick on the <a> and did a $('span selector').show() to show the message.
RESULT of all 3 methods is the same. In Android 2.3 , upon click of the button to goto test.html the screen stays on the index.html for 2 ~ 3 seconds. No loading message is shown whether from JQM (a) and (b) or the simple (c) method. Strangely, I can see the message on a Desktop Chrome while debugging (put a breakpoint after the span is shown/$.mobile.loading is called) and see the message from both JQM and my hidden span. It only doesn't work on the actual device. I tried this also on Android 4.1.2 thinking this is a 2.3 peculiarity but here I see a blank white page for the 2 ~3 seconds before the test.html is shown.
I put a $(document).on on all the page related events in index.html but none of them fired (put alert messages in all listeners to test). pagebeforechange and pageshow fire only when returning back from another page to index.html, so I couldn't use pagebeforehide, pagehide which was my other alternative. Putting the load message in the test.html's page events is too late (tried this too) because those get fired only after the 2~3 seconds needed to load the page in the DOM.
Here is a sample index.html on which you can reproduce this issue in an Android device. I have linked to an external website here (that takes a few seconds to load) in lieu of the large test.html I have.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-url="index.html" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 263px;">
<div data-role="header" role="banner" class="ui-header ui-bar-inherit">
<h1 class="ui-title" role="heading" aria-level="1">Homepage</h1>
</div>
<div data-role="content" class="ui-content" role="main">
Click here to test
<span id="loading">Loading please wait...</span>
</div>
<div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
<h4 class="ui-title" role="heading" aria-level="1">Footer here</h4>
</div>
</div>
<script>
$(document).ready(function(){
$("#loading").hide();
$(".Next").on( "vclick",function(event){
event.preventDefault();
//$.mobile.loading('show');
$("#loading").show();
var topage = event.currentTarget.href;
window.location.assign(topage);
});
});
</script>
</body>
</html>
In summary, I have a link in index.html that leads to a large test.html that needs to be loaded using data-ajax=false. The test.html takes 2 ~3 seconds to load and I wish to show a loading message till the test.html is shown on screen.
Many thanks for any suggestions you can provide to solve this problem.
Another solution I found was to add a pause of 50 ms after the loading widget is called. The 50 ms timeout allowed it to show it before doing the redirect.
$('.Next').click(function(event) {
event.preventDefault();
$.mobile.loading('show');
setTimeout(function() {
window.location.assign('test.html');
}, 50);
});
This didn't require creating an intermediary html and is consistently showing the loading message on both A2.3 and A4.1.2.
I have implemented a slide show using ResponsiveSlides.js V1.54. I am very impressed with the slideshow but I have found on a Samsung Galaxy Ace phone the page jumps to the top of the page when the slide changes? It works fine on all other devices I have been able to test the slideshow on.
I have a development version of my slideshow at:
http://brixhamgigclub.co.uk/multimedia-new.php?id=9
my js is in the head section of the html
Any ideas to fix this would be appreciated.
Bob
I have resolved this problem by methodically removing bits of my code. It appears there maybe contention with the Google Translate code used on my site.
I have removed the meta statement
and the html
<div id="googleTranslate">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bg,cs,cy,da,de,el,en,es,et,fi,fr,ga,hr,hu,it,lt,nl,no,pl,pt,ru,sk,sl,sr,sv', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a /element.js?cb=googleTranslateElementInit">
</script>
</div>
and problem resolves.
Bob