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>
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.
I have develop the canvas image to store the gallery.I have add the plugins from
**cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git**
I have write the signature in the device, But unable to save in the gallery.
Here following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/modernizr.custom.34982.js"></script>
<script type="text/javascript" src="js/signatureCapture.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript">
var sigCapture;
$(document).ready(function(e)
{
sigCapture = new SignatureCapture( "signature" );
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log("Save =========>"+msg);
},
function(err){
console.log("Error =====>"+err);
},
document.getElementById('signature')
);
}
$("#submit").click( onSubmitClick );
$("#cancel").click( onCancelClick );
});
function onSubmitClick(event ) { }
function onCancelClick( event ) {
sigCapture.clear();
}
</script>
</head>
<body>
<h2>SIGNATURE</h2>
<div id="canvasContainer" >
<canvas id="signature" />
</div>
<button data-role="button" id="submit" data-theme="b">Save</button>
<button data-role="button" id="cancel" data-theme="b">Cancel</button>
</body>
</html>
Error console :
The image could not be decoded at file:///android_asset/www/index.html:55
please some one can help me how to save the canvas text in image gallery.
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'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
});
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"});
......