I'm very new to jQtouch. I'm following this tutorial. But because of this updated version of jQtouch I'm not being able to follow it exactly. I'm using eclipse to develop an app on android. Now, this is the code I'm trying to run
<html>
<head>
<!--<style type="text/css" media="screen">#import "themes/css/jqtouch.css";</style>
<link type="text/css" media="screen" rel="stylesheet" href="themes/css/jqtouch.css" />
<script src="src/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>-->
<style type="text/css" media="screen">#import "themes/css/jqtouch.css";</style>
<script src="src/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<script src="extensions/jqt.floaty.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
<title>Kilo</title>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
</div>
<ul class="edgetoedge">
<li class="arrow">Dates</li>
<li class="arrow">About</li>
</ul>
</div>
</body>
</html>
Now, I'm getting no error in eclipse. The activity is working fine. But due to some unknown reason I'm getting an empty page. Also being new to jQtouch I can switch to anything else like jquery framework directly if I can have problems with jQtouch in complex tasks.
Thanks. :)
You are not closeing the script tag
<script type="text/javascript" charset="utf-8">
var jQT = $.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
</script><!-- Close it -->
UPDATE
Get rid of the new .
Follow the example you're making up stuff of your own.
If you insist on using constructor that is the proper way:
var jQT = new jQTouch({
option: value
});
Related
NOTE: The following issue only occurs on Android versions above 4.4.2 (as far as I know)
TL;DR
Problem 1:Buttons with click/tap/vclick/touchstart attached to them, seem to work only partly (10-30% of the time) in my cordova app (Android only).
Problem 2: The button in my form (submit button) doesn't trigger my .submit(function(){..}); event, but the 'go/enter' button on the keyboard does trigger the event. (also Android only)
I'm trying to develop a hybrid app for ios/android/windows. In the app, I'll have the occasional button that needs to trigger some actions.
Problem 1
Generally I'd use .on('click', function() { ... });, but I've learned that click doesn't really cooperate with mobile devices. Instead I'll either use vclick, tap or touchstart, yet this doesn't always seem to work. Sometimes the button will trigger, sometimes it will trigger after I repeatedly tap/click it.
Problem 2
On other pages I'll have a form that's wrapped in a <form> tag and includes a <button type="submit" id="btnSubmit">Submit form</button>. In my javascript I'll have an .on('submit', function(e){ ... }); event to catch the form submit, but for another unexplainable reason, this doesn't seem to work.
Here is my form:
<form id="registerForm" method="post" action="#" class="ui-body ui-body-b ui-corner-all">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regLang" data-translation="reg_language"></label>
<select id="regLang" name="Language">
<!--<option value="0">EN</option>-->
<option value="1">NL</option>
<option value="2">FR</option>
<!--<option value="3">DE</option>-->
</select>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regCode">Registration Code:</label>
<input type="text" name="RegistrationCode" placeholder="Registration Code" data-translation="reg_code" id="regCode" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regEmail">E-Mail Address:</label>
<input type="email" name="EmailAddress" placeholder="Email Address" data-translation="reg_email" id="regEmail" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<!--<label for="regPassword">Password:</label>-->
<input type="password" name="Password" placeholder="Password" data-translation="reg_password" id="regPassword" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<button type="button" id="regRegister">
<span data-translation="reg_register"></span>
</button>
</div>
</form>
And this should be the code to get my form triggered:
$("#registerForm").submit(function (e) {
console.log("I don't even make it inside.");
});
When I press the submit button as you can see on the image, the form will submit and go through the code above. When I however press the "Registreren" button, nothing will happen.
Now I know you guys will say, just add an onclick event to the button and catch the form submit like that, but then I'll just be stuck with my first problem. The button doesn't always seem to get triggered..
Update
As requested, here is how my index.html pages looks like to see an overview of my additional scripts:
<head>
<meta charset="UTF-8" />
<title>Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- JQuery -->
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.3.0.min.css" type="text/css" />
<!-- simple dialog -->
<link rel="Stylesheet" href="jquery-mobile/jquery.mobile.simpledialog.min.css" type="text/css" />
<link href="styles/main_absolute.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" />
<link href="styles/app.css" rel="stylesheet" type="text/css" />
<link href="jquery-mobile/jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="slickgrid/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script>
// Prevent default errors at start of application when running in browser.
// However, still shows other exceptions that are needed to debug the application.
// NOTE: comment this code if you're building the ios or android app (or windows)
// (function () {
// var ConsoleBasedNativeApi = {
// exec: function(bridgeSecret, service, action, callbackId, argsJson) {
// return console.log(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId]));
// },
// setNativeToJsBridgeMode: function(bridgeSecret, value) {
// console.log(value, 'gap_bridge_mode:' + bridgeSecret);
// },
// retrieveJsMessages: function(bridgeSecret, fromOnlineEvent) {
// return console.log(+fromOnlineEvent, 'gap_poll:' + bridgeSecret);
// }
// };
// window._cordovaNative = ConsoleBasedNativeApi;
// })();
</script>
<script src="cordova.js" type="text/javascript"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js" type="text/javascript"></script>
<script src="js/lib/jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/lib/jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<!-- <script src="js/lib/jquery-mobile/jquery.mobile-1.4.2.js" type="text/javascript"></script> -->
<script src="js/lib/jquery-mobile/jquery-drag/jquery.event.drag-2.2.js" type="text/javascript"></script>
<!-- jquery progress bar -->
<link href="styles/jqm-progress-bar/jQMProgressBar.css" rel="stylesheet" type="text/css" />
<script src="js/lib/jquery-mobile/jquery.mobile.simpledialog2.min.js" type="text/javascript"></script>
<!--simple dialog-->
<script src="js/lib/jqm-progress-bar/jQMProgressBar.js" type="text/javascript"></script>
<!-- Slickgrid -->
<link href="slickgrid/slick.grid.css" rel="stylesheet" type="text/css" />
<link href="slickgrid/controls/slick.pager.css" rel="stylesheet" type="text/css" />
<script src="slickgrid/slick.core.js" type="text/javascript"></script>
<script src="slickgrid/slick.grid.js" type="text/javascript"></script>
<script src="slickgrid/slick.dataview.js" type="text/javascript"></script>
<script src="slickgrid/controls/slick.pager.js" type="text/javascript"></script>
<!-- toastr -->
<link href="js/lib/toastr/toastr.min.css" rel="stylesheet" type="text/css" />
<script src="js/lib/toastr/toastr.min.js" type="text/javascript"></script>
<!-- moment -->
<script src="js/lib/moment.min.js" type="text/javascript"></script>
<!-- Underscore -->
<script src="js/lib/underscore.min.js" type="text/javascript"></script>
<script src="js/lib/jquery-plugins/data-selector.js" type="text/javascript"></script>
<!-- statusbar -->
<script src="js/lib/statusbar.js" type="text/javascript"></script>
<!-- Own libs -->
<script src="js/app/namespace.js" type="text/javascript"></script>
<script src="js/app/translation.js" type="text/javascript"></script>
<script src="js/app/toast.js" type="text/javascript"></script>
<script src="js/app/config.js" type="text/javascript"></script>
<script src="js/app/settings.js" type="text/javascript"></script>
<script src="js/app/utils.js" type="text/javascript"></script>
<script src="js/app/database.js" type="text/javascript"></script>
<script src="js/app/grid.js" type="text/javascript"></script>
<script src="js/app/sidebar.js" type="text/javascript"></script>
<script src="js/app/logo.js" type="text/javascript"></script>
<script src="js/app/news.js" type="text/javascript"></script>
<script src="js/app/registration.js" type="text/javascript"></script>
<script src="js/app/sync.js" type="text/javascript"></script>
<script src="js/app/login.js" type="text/javascript"></script>
<script src="js/app/cart.js" type="text/javascript"></script>
<script src="js/app/productdetail.js" type="text/javascript"></script>
<script src="js/app/customer.js" type="text/javascript"></script>
<script src="js/app/recipe.js" type="text/javascript"></script>
<script src="js/app/endlessgrid.js" type="text/javascript"></script>
<script src="js/app/visitreports.js" type="text/javascript"></script>
<script src="js/app/reports.js" type="text/javascript"></script>
<script src="js/app/progresshandler.js" type="text/javascript"></script>
<script src="js/app/departments.js" type="text/javascript"></script>
<!-- iScroll -->
<script src="js/lib/iscroll/iscroll.js" type="text/javascript"></script>
<script src="js/lib/iscroll/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<link href="js/lib/iscroll/jquery.mobile.iscrollview.css" rel="stylesheet" type="text/css" />
<link href="js/lib/iscroll/jquery.mobile.iscrollview-pull.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.hashListeningEnabled = false;
});
</script>
<script src="js/app/app.js" type="text/javascript"></script>
<!-- Debugger -->
<!--<script src="http://192.168.100.199:8080/target/target-script-min.js#anonymous"></script>-->
<!--<script src="http://192.168.16.125:8080/target/target-script-min.js#anonymous"></script>-->
<!-- <script src="http://debug.phonegap.com/target/target-script-min.js#bee0a570-a515-11e3-8d7c-22000a98b3d6"></script> -->
</head>
<body>
Content is probably not relevant and also way too long
</body>
On the button regRegister put action
onclick="yourFunction()"
and read this : How to add function on button in phonegap?
The regRegister button has type=button, not type=submit, however I am not sure this is the problem. I had similar issues with tap not working in an Ionic / Cordova app and the problem was that Ionic's tap system was interfering with some maps I was loading (OpenLayers). In Ionic the solution is this one.
Perhaps one of the libraries you are loading interferes with jQuery Mobile.
I solved the issue as it was a HTML problem. On top of my HTML there was a div that covered the whole screen. This div had a display: none style attached to it which made it impossible for me to click on it. By removing this I was able to click every button again.
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>
In the following code i am trying to print and insert an element from javascript to the android emulator.I do not see the text hello world again..What am i doing wrong here..
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts/font.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
goLogin();
</script>
</head>
<body>
<div id="medn_content" class="medn_content" data-role="page" >
</div>
</body>
</html>
index.js
function goLogin(htm)
{
alert('here');
$("#medn_content").appendTo("<p> hello world again</p>");
}
Working example: http://jsfiddle.net/Gajotres/rrSdV/
You have an error in your code, this:
function goLogin(htm)
{
alert('here');
$("#medn_content").appendTo("<p> hello world again</p>");
}
should be this:
function goLogin(htm)
{
alert('here');
$("#medn_content").append("<p> hello world again</p>");
}
Basically change appendTo to append. There's a big difference how those functions work.
Also if you are using jQuery Mobile they you need to append new content after the page is loaded into the DOM. for that you will need to use proper jQuery Mobile page events. your code should look like this:
<script>
$(document).on('pagebeforeshow', '#medn_content', function(){
goLogin();
});
</script>
If you want to find out more about jQuery Mobile page events and how they work take a look at this ARTICLE or find it HERE.
In the end your code should look like this:
HTML:
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts/font.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
$(document).on('pagebeforeshow', '#medn_content', function(){
goLogin();
});
</script>
</head>
<body>
<div id="medn_content" class="medn_content" data-role="page" >
</div>
</body>
</html>
Javascript:
function goLogin(htm)
{
alert('here');
$("#medn_content").append("<p> hello world again</p>");
}
Use this script tag instead:
<script>
$( function() {
document.addEventListener("deviceready", goLogin, false);
});
function goLogin(htm)
{
alert('here');
$("#medn_content").appendTo("<p> hello world again</p>");
}
</script>
When trying to use jqplot in my Android PhoneGap application I get this error:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'jqplot' at file:
The graph is supposed to show after pressing a button.
I have exactly the same code running properly on a webpage in Chrome, which shows that the code is correct.
The link below has the same problem but nobody has answered it, so I thought i'd see if anyone has since found a work around.
How to plot jqplot chart inside phonegap app for Android
Includes:
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
<script type="text/javascript" src="jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/jqplot.canvasTextRenderer.js"></script>
jqplot code:
function makegraph() {
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
}
HTML:
<div id="chartdiv" style="height:400px;width:300px; "></div>
Thanks
Found the answer:
put data-ajax="false" in the href tag to force a page reload and the jqplot script will be loaded.
Otherwise put the jqplot script and css files after the data-role="page" tag and the script will be loaded each page transition.
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...