I am loading some website in my android application using WebView and what I just want to do is after loading the page I want to automatically click the <button> with data-stage="premium"
here is my html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="switch-stage">
<div>
<button data-stage="normal">Normal</button>
</div>
<div>
<button data-stage="premium">Premium</button>
</div>
</div>
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
$('#switch-stage button').on('click', function() {
var stage = $(this).data('stage');
});
</script>
</body>
</html>
This is what I've done in android.
webView.loadUrl("javascript:document.getElementById(\"switch-stage button\").click(\"premium\");");
but I think my loadUrl is not correct. (This is what I am seeing in different link that I've searched.)
Is it possible to do what I am asking, to automatically click the button so that the var stage will have a data.?
I hope someone will help, Thanks.
Try this:
public void onPageFinished(WebView view, String url)
{
// hide element by id LECLERC
view.loadUrl("javascript:(function() { " +
"document.getElementsById('Premium').click();"
//document.getElementById("switch-stage").children[1].click();
;})()");
}
Related
I am creating an Android quiz game using HTML. I wants a code or technique by which the player could not go back by leaving the current page. It's an Android game. Please help me how it can be done in HTML.
Have a look at this fiddle https://jsfiddle.net/Limitlessisa/axt1Lqoz/ (click on Share and then use the browser back button) and it will give you the basis of what you need. Not a good idea to disable the browser controls - I recommend instead you show a dialog and tell the user they are leaving the game with a yes/no to continue.
<html>
<head>
<title>Back Button Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="text-align:center; padding:0;">
Share
<div class="share" style="">
<h1>Test Page</h1>
<p> Back button press please for control.</p>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$('body').on('click touch', '#share', function(e) {
$('.share').fadeIn();
});
});
// geri butonunu yakalama
window.onhashchange = function(e) {
//var oldURL = e.oldURL.split('#')[1];
//var newURL = e.newURL.split('#')[1];
if (oldURL == 'share') {
//$('.share').fadeOut();
//e.preventDefault();
//return false;
}
//console.log('old:'+oldURL+' new:'+newURL);
}
</script>
<style>
.share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px;
</style>
Is it a good way to use card in Materialize CSS as on click card popups it used for values to edit and save and it pops back i'm using it for android application using a Phonegap.
The real problem is i was not able to use modal in Materialize CSS as this is not responding well in my emulator.modal is pop up's without clicking.
Thanks in advance.
Sometime this will be happened when you use <a> tag. Instead of using<a> tag use <button> tag. I have added sample html code snippet. Try this.
HTML
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
Full Code in single html page.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
Guys I'm currently working on the development of an app using phonegap on eclipse, but I hit a bump when I'm trying to display an image, I have tried thousands of ways to modify my code, but the image just cannot be displayed, but when I browsed through others' coding, I didn't see much difference, will really appreciate it if you guys could help me figure out.
My code for a certain page is shown below:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Us</title>
<link rel="stylesheet" href = "css/jquery.mobile-1.4.5.min.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js">
<script src = "js/jquery.mobile-1.4.5.min.js." type = "text/javascript" charset = "utf-8" src = "cordova-2.3.0.js"></script>
<script type = "text/javascript">
function onBodyLoad() {
document.addEventListener("deviceready", PhonegapLoaded, false);
}
function PhonegapLoaded(){
document.addEventListener("backbutton", function(e){
e.preventDefault();
alert("Back Button Pressed");
navigator.app.backHistory();
}, true);
}
</script>
</head>
<body onload = "onBodyLoad();">
<div data-role = "page" id = "aboutus">
Back
<div class="ui-btn-active" data-role="header" data-theme="b">
<h1>ABOUT US</h1>
</div>
<div data-role="content">
<img src="images/icon.png">
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
You must use this route:
<img src="images/icon.png">
I am developing android apps using phonegap + Jquery mobile. My apps displaying the list in listview div but look and feel of listview not working on 2.3.3 and working fine on version greater than 3.0.
following is the my index.html page. please suggest me answer.
<!DOCTYPE HTML>
<html>
<head>
<title>ListView</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="js/jquery.mobile-1.4.1.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="cordova.js"></script>
<script src="js/jquery.mobile-1.4.1.js"></script>
</head>
<body>
<div data-role="page" id="courseList">
<div data-theme="a" data-role="header">
<h3>
Course List
</h3>
</div>
<div data-role="content">
<!-- <div class="example-wrapper" data-iscroll> -->
<ul data-role="listview" id="output" data-theme="b">
</ul>
<!-- </div> -->
</div>
</div>
</body>
<script>
$(document).ready(function() {
if(window.isphone) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
});
// device APIs are available
function onDeviceReady() {
// Now safe to use device APIs
$.ajax({
url:"http://www.cilibrary.ojaswitech.com/getLatestNews",
// crossDomain: true,
//type : "POST",
dataType: 'json',
async: true,
success: function (result) {
$.each(result, function(i, item) {
$('ul').append('<li><a href="">' + item + '<p></li>');
});
$('#output').listview("refresh");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
}
</script>
</html>
following is the two images. first is left side image 2.3.3 and second is right side image 4.2.2
This is a known bug which is introduced in version 1.4.1 and effects Android 2.3.x devices and IE8. The problem is in lines 3195 and 3222 of jquerymobile.js. There's a default property which happens to be a reserved keyword.
You can solve this problem either by modifying these two lines;
duration = $.fn.animationComplete.default; // this
duration = $.fn.animationComplete.defaultDuration; // to this
// and
$.fn.animationComplete.default = 1000; // this
$.fn.animationComplete.defaultDuration = 1000; // to this
or wait until version 1.4.2 is out with the fix for this bug.
Reference
Acctually there might be an even easier way. Try with replacing:
$('#output').listview("refresh");
with this instead:
$('#output').listview("create");
=) Good luck!
Danny
I am developing an application using jQuery mobile 1.1.0 RC1 and phonegap 1.5.0
I have a single HTML page which contains all the pages in it as a div(through data-role="page")
here is my code
<!DOCTYPE HTML>
<html>
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.5.0.js"></script>
<!-- Adding jQuery mobile and jQuery scripts & CSS -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet"
href="jquerymobile/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="css/colors.css">
<script type="text/javascript">
function page1(){
$.mobile.changePage("#page2", {
transition : "slide"
});
}
function page2(){
$.mobile.changePage("#page1", {
transition : "slide"
});
}
$("#page1").live("pageshow", function(e) {
$.ajax({
type : 'GET',
cache : false,
url : "http://192.168.1.198:9051/something.xml"
+ "?time=" + Date.now(),
data : {
key : "value"
},
dataType : "xml",
success : function(xml) {
console.log("Success Page1");
},
error : function(xhr) {
}
});
});
$("#page2").live("pageshow", function(e) {
$.ajax({
type : 'GET',
cache : false,
url : "http://192.168.1.198:9051/something.xml"
+ "?time=" + Date.now(),
data : {
key : "value"
},
dataType : "xml",
success : function(xml) {
console.log("Success Page2");
},
error : function(xhr) {
}
});
});
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">Page 1</div>
<div data-role="content">
<input type="text" name="page1GetTime" id="page1GetTime" value="" /> Go to Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">Page 2</div>
<div data-role="content">
<input type="text" name="page2GetTime" id="page2GetTime" value="" />Go to Page 1
</div>
</div>
</body>
Now when i click to "Go to page2" then page2 will be shown along with one ajax request .. If i keep on moving from one page to another then a ajax request is made.. This request stops responding after 4 to 5 request... Why is it happening?
If your pages become so heavy that ajax requests timeout or stop working, you may want to separate them in to different actual pages. If they still perform poorly, you can easily force ajax off to test if that is the issue.
data-ajax="false"
Also, does this limitation change from one mobile device to the next or on a desktop browser? Because your ajax becomes unresponsive at "4 or 5", it makes me think its a memory issue.
I sorted it out. There is a Bug in Phonegap 1.5.0. To rectify it,either we need to downgrade to phonegap 1.4.1 or upgrade to phonegap 1.6.0rc1
Try to add data-ajax="false" rel="external" to your links to disable ajax paging. I found it always causes issues with PhoneGap.
Yes，I faced this problem too. The problem in the cordova-1.5.0.js. If included this lib, jquery ajax will fail when reenter the ajax page and use the ajax. And It is Ok in phonegap 1.4 or not include cordova-1.5.0.js in phonegap1.5