I have phonegap application at html5, with kendo ui.
My button work fine on browser, but at android device I need to click three times to fire the alert.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/kendo.all.min.js"></script>
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" data-title="Login/Sign-up"
id="view-transitions-login" data-transition="overlay:left"
style="background-color: white;">
<input type="button" id="logButton" value="login"
style="width: 100px; height: 60px" />
</div>
<script>
$(document).ready(function() {
$("#logButton").click(function() {
alert(33);
});
});
</script>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Thanks in advance.
I'm found the answer.
I used the latest version of kendo.all.min, and That made the problem.
I changed the file and everything works as it should.
Related
In a nutshell, I've built an app using HTML/CSS/JS and Phonegap. It's still in testing phase. I have all my app's images saved in Google Cloud Storage (GCS). I have image tags (divs) within my app that needs to pull those images from GCS to the specific div. However, this method of just adding the direct URL only seems to work on iOS devices. What I need to know is, what is the correct method of pulling those images from GCS to my app so that it works on all platforms (iOS, Android, BlackBerry etc)? Do I need to add a line of code in the head of my index.html or does it have something to do with the config.xml? I've been looking for answers on the net, but nothing could give me clear-cut results that works across all platforms.
I'm still fairly new to the whole "app building game", please be gentle.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"/>
<title>App Name</title>
<link href="simple-flat.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1 /jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="General.css" rel="stylesheet" type="text/css"/>
<link href="owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="maps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/raleway:n1:default.js" type="text/javascript></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("offline", onOffline, false);
}
function onOffline() {
navigator.notification.alert('Please check your internet connection', function()
{ },'Connection Failure','OK');
window.location = "index.html#offline";
}
</script>
</head>
<body onload="onLoad()">
<div id="cultures" data-role="page" data-theme="a" >
<div data-role="header" id="header" data-theme="a" data-position="fixed">
<h1>Headline</h1>
<div id="image" data-theme="c">
<img src="http://commondatastorage.googleapis.com/about_namibia%2FHimba.jpg" width="100%"/></div>
<div class="headline_bar"><h3>Cultures</h3></div>
</div>
<div data-role="content">
<p>Some copy goes here.</p>
</div>
<div data-role="footer" id="footer" class="ui-bar" data-position="fixed">
</div>
</div>
</body>
</html>
i have created a web app using query mobile and html5 and currently, none of my JS executes in the application.
JS is enabled on Android WebView as Jquery mobile can execute the JS for the library but does not work on an android device.
It works fine on the iOS simulator and on the web browser so i am wondering if there is some kind of hidden settings/implementation i need to handle for android?
here is the error i receive from an onClick event on a simple dialog html that is outputted using phone gap
07-15 09:25:00.621: E/Web Console(2992): Uncaught ReferenceError: uploadTrue is not defined at file:///android_asset/www/itemDetailCarHire.html:2
Here is the itemDetailCarHire html that launches the dialog that executes the onClick.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
<script src="src/script/itemDetailCarHire.js"></script>
<link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" />
<script src="src/jquery.ui.datepicker.js"></script>
<script src="src/jquery.ui.datepicker.mobile.js"></script>
</head>
<body>
<div data-role="page" id="fields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > Back
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="claimProfileListView" data-inset="true" data-scroll="true">
<h3>Original Receipt:</h3>
<div data-role="fieldcontain"> Upload Reciept </div>
</li>
</ul>
<div data-role="navbar">
<ul>
<li>Save Claim Item</li>
</ul>
</div>
</div>
</div>
</body>
</html>
When a user clicks the Original receipt component, it will correctly display the dialog called uploadRecieptDialog.html and the code for that is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b" data-position="fixed" >
<h1>Upload Reciept</h1>
</div>
<div data-role="content">
<p>Click the button below to select and upload your Reciept</p>
<h3><a onclick="uploadTrue();" data-role="button" data-theme="c" >upload Reciept</a></h3>
<div data-role="footer" data-position="fixed" data-theme="b" >
</div>
</div>
</div>
</body>
</html>
Here is the updateDetailCarHire.JS
function uploadTrue(){
alert("upload true");
//load previous page
history.back(-1); return false;
alert("UPLOADED");
}
A simple JS as you can see that displays an alert message and goes back to previous screen. on iOS simulator and chrome/safari desktop web browser, it works!
I'm guessing your Javascript isn't executing because cordova is having a problem with your history command.
Check here: in Cordova 1.8.1 - Android history.back() not working
And possibly: Why is javascript:history.go(-1); not working on mobile devices?
Try using history.back();
EDIT: I don't see updateDetailCarHire.JS being included on any of those HTML pages.
I am trying to set focus to the input box and showing android keyboard using jquery mobile on pageshow.
I tried a lot of options from web. but none is working as expected in both emulator and mobile.
Here is the Code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page" id="main">
<div data-role="header"><h3>Set Focus, Show Keyboard</h3></div>
<div data-role="content">
<label for="gotoPage"></label>
<input type="text" name="gotoPage" id="gotoPage" placeholder="Question No." data-mini="true" />
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on('pageinit',"[data-role=page]", function() {
});
$(document).on('pagebeforeshow',"[data-role=page]", function() {
});
$(document).on('pageshow',"[data-role=page]", function() {
$('#gotoPage').focus().select();
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</body>
</html>
Find the Screen shots for reference
Kindly advice... Thanks in advance...
NOTE:
As per Omar comment it is working fine in ios....
anyone can suggest how we get work this in android?
The solution which works for me:
$("#main").on("pageshow" , function() {
$('#gotoPage').focus();
});
in my hybrid app, i'm trying to change page in a multipage file using jquery mobile function changePage.
when i press the button it hides current pages and shows blank page. same if i'm hidding/showing divs using hide/show jquery functions.
it works perfect in pc web browsers. but in mobile app.
how can i change/show second page?
here is my code:
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="js/jqtouch/jqtouch.js" type="application/x-javascript"
charset="utf-8"></script>
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile-1.1.0.min.css">
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile.theme-1.1.0.min.css">
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile.structure-1.1.0.min.css">
<script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/jquery.mobile-1.1.1.js"></script>
</head>
<body>
<div id="TaskList" data-role="page">
<div data-role="header">
<h1>Dienos užduotys</h1>
</div>
<script type="text/javascript">
function showTaskDetails(id) {
$.mobile.changePage("#taskDetails", {
transition : "slideup"
});
}
</script>
<div data-role="content">
<div id="task_list" data-role="controlgroup">
<a data-role="button" onclick="showTaskDetails(1)" href="#">Name</a>
</div>
</div>
</div>
<div id="TaskDetails" data-role="page">
<div data-role="header">
<a href="#TaskList" data-icon="arrow-l" data-iconpos="left"
data-rel="back">Atgal</a>
<h1>Dienos užduotys</h1>
</div>
<div data-role="content">
<input type="text" value="" id="task_id" />
</div>
<div data-role="footer"></div>
</div>
</body>
UPDATE: seems like the problem appeared because of changePage function that is in login file.
If you have multiple pages of documents, only need to do this:
$.mobile.changePage("#taskDetails", {transition : "slideup"});
$.mobile.changePage("file1.html", {transition : "slideup"});
$.mobile.changePage("file2.html", {transition : "slideup"});
......
I am using JQM 1.1.0 and Cordova 1.5.0.
I have code like this
<!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">
$("#page1").live("pageinit", function(e) {
console.log("pageinit1");
}
$("#page2").live("pageinit", function(e) {
console.log("pageinit2");
}
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">Page 1</div>
<div data-role="content"></div>
</div>
<div data-role="page" id="page2">
<div data-role="header">Page 2</div>
<div data-role="content"></div>
</div>
</body>
This code is working fine for Android. but in iOS,as soon as the page loads then the pageinit event of page1 doesnt get fired and later on if i changepage to page2 then everything is fine.. Why is this happening?
am not so sure about that but as i know live function has changed in JQ1.7.x and now you will have to use the on() function which has small changes to the way you code your code ..
I just need to write my javaScript functions after data-role="page" to make it working...