I am using phonegap 3.3.0.0.19.6 on a Windows 8 platform. I have Nexus 7 connected via usb to test my app.
I have issue invoking any javascript code using onclick. I have tried to display a simple alert box, which doesn't work. I have then followed the phonegap tutorial:
http://docs.phonegap.com/en/3.0.0/cordova_notification_notification.md.html
I have found similar questions within the following links. However the solutions within these posts, do not answer my current issue with phonegap.
How to fix onclick in Phonegap/Android especially in lower versions of Android?
Android/ Phonegap - onClick() not working
Everything worked ok when I tried triggering a standard alert box in chrome. However, when I deploy to Nexus, no dialog box was displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial- scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
<title>Example Page</title>
<link rel="stylesheet" href="../www/css/themes/default/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="../www/css/themes/default/jqm-demos.css">
<link rel="shortcut icon" href="../www/favicon.ico">
<script src="../www/js/fontsize.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.mobile-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//wait for device api libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device apis are available
function onDeviceReady() {
// empty
}
function showAlert() {
navigator.notification.alert(
'Message box please display....', // message
altertDismissed, // no callback
'Message Box Title', // title
'Continue' // button texr
);
}
</script>
</head>
<body>
<div class="txtwrapper">
<div data-role="page">
<div data-role="header">
<h1>Example Page</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Show Alert</p>
</div><!-- /content -->
</div><!-- /page -->
</div><!-- /textWrapper -->
</body>
</html>
I have used plugman to install to install the plugin
plugman install --platform android --project example --plugin org.apache.cordova.dialogs
The nexus is running Android 4.4.2
At the moment I can not trigger any javascript code using onclick.
A solution using the native alert box or the standard alert message box would answer my question.
Thanks in advance
Try this one it will work
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../www/js/fontsize.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.mobile-1.4.2.min.js" type="text/javascript" charset="utf- 8"></script>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//wait for device api libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device apis are available
function onDeviceReady() {
// empty
}
function showAlert() {
navigator.notification.alert(
'Message box please display....', // message
altertDismissed, // no callback
'Message Box Title', // title
'Continue' // button texr
);
}
function altertDismissed(){
navigator.notification.alert("alert box is dismissed");
}
</script>
</head>
<body>
<div class="txtwrapper">
<div data-role="page">
<div data-role="header">
<h1>Example Page</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Show Alert</p>
</div><!-- /content -->
</div><!-- /page -->
</div><!-- /textWrapper -->
</body>
</html>
just copy this and replace it will work.
Related
I feel kinda silly asking this question but I have tried everything I know and even consulted the api docs all to no avail.
My question is how to fix:
Uncaught TypeError: Cannot read property 'v0' of null
What I am doing is compiling a dart based chrome app with dart2js using dart-sdk version 1.10 I have also tried dart-sdk version 1.9 with the same result.
All of my code is located at:
https://github.com/dragonloverlord/Pages
I am building my project in pycharm community edition 4.5 with the dart plugin if that matters.
I have tried using 'build mode=debug' but no different message was given I had the source maps set up as well but nothing changed.
The os that I am building on is linux ubuntu 15.04
I have found the solution to the issue and it's actually very simple!
All you have to do is move the dart scripts to the body of the document like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart"></script>
</body>
</html>
Compared to having them in the head of the document like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart"></script>
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
</body>
</html>
A very simple fix that is often forgotten!
Also adding defer to the dart script will fix the issue like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart" defer></script>
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
</body>
</html>
I know there are similar kind of questions asked and answered as well. But my problem is different. Here is code sample that I am using to load and stylize my content.
$("body").on("click","[data-view]",function(){
var view=$(this).attr("data-view");
$("#mainView").load("pageRouter.php?view="+view).trigger("create");
});
I searched forums and found .trigger("create") is the way to stylize the dynamically loaded content.But it is not helping.
Solution
You are doing it incorrectly, load is asynchronous function so you need to wait for it to load the content before you can enhance the content.
You will need to do this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("create");
});
This will work if you are only loading content but if you are loading a full page, with header and footer then use this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("pagecreate");
});
Read more about lead and its callback here.
Working example:
index.php
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$("#index").load("load.php", function() {
$(this).trigger("pagecreate");
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
</div>
</body>
</html>
load.php
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a data-role="button">Button</a>
</div>
I have a strange problem with an app developed using phonegap and jquery mobile:
when the app starts, styles are not applied but if I browse within the app and then go back to the index, I can see styles well applied.
What should I change?
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
var intervalloRefresh;
var intervalloRisultati;
var iter=0;
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
</script>
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> -->
<script type="text/javascript" src="jquery/jquery.mobile-1.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#pulsantiera{width:25%;height:100%;float:left;}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="pulsantiera" data-role="controlgroup" data-type="vertical">
<!-- Allineamento -->
Allinea
Percorsi
Programma
Info
Foto
Chat
Y
A
N
</div>
<div style="width:74%;height:100%;margin-left:26%" >
<h1 id="title">PATH</h1>
<div id="content">
<img src="images/IT_MAPPA.jpg">
</div>
<div id="vote" stle="display:none"></div>
</div>
</div>
</div>
</body>
</html>
Have you tried switching the position of your CSS and JS files?
If parsed from top to bottom:
1) jquery is initialized
2) jquery mobile is initialized
3) then the CSS is loaded
So the CSS needed for the JQM widgets is not there when JQM kicks into gear.
Try switching to:
1) all CSS
2) jquery
3) jquery mobile
Also check the JQM page template. The CSS always goes first.
I am trying to create a very simple phone gap application for iOS. I am using query mobile. the problem is, that i can't get javascript event to fire on button click.
Code i have now:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p>Show alert</p>
</div>
</div>
</body>
</html>
I tried multiple solutions to fix my problem, but none of them works. When have button with # in href, it doesn't event change the color on click. When i add url, it changes color. But it never call javascript function.
Another problem is, that document.addEventListener("deviceready", onDeviceReady, false); works only in the index page. If i press button in initial page which redirects to another page, OnDeviceReady function is never called.
Anybody has any ideas?
onDeviceReady() is only called once (when the device (ie Cordova) is ready). You'll want $(document).on('pageinit', '#pageid', function() { }); for something to fire every time the page is navigated to.
In the body tag you need to add tag and the onBodyLoad() function in the javascript should be like:
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
I am a total noob with phone gap and query mobile, so i made a stupid mistake. Problem is, that it loads not whole page, when i click on button, but only body part. This means, that it uses only javascript which is in the first page. And that was my problem. Now i have putted all javascript into separate file (all javascript for both files) and it works.
Try the following with jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
$(function() {
$("#my_link").click(function() {
showAlert();
});
});
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p><a id="my_link" href="#" data-role="button">Show alert</a></p>
</div>
</div>
</body>
</html>
Hope this helps. Let me know about your results.
Even though i had z-index set higher for the md-button it still wouldn't click on iOS. It clicked fine on Android. I had to set a parent container in my case the <md-subheader> to z-index: -1; then it worked.
I am a fresher in jquery mobile. I using the code get from stackoverflow. My problem is, this solution works well in samsung and other but not works in iphone and sonyericsson. Please help anyone...
I want to go back at the top of the page while scroll-down at bottom of the page by clicking link..
Here is my code:
<a id="uptotop" class="ui-btn-right" data-icon="arrow-u" data-theme="a">▲TOPにもどる </a>
<script type="text/javascript">
$('div').live('pagebeforecreate',function(event, ui){
$('#uptotop').live('click',function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
});
</script>
what about using a simple anchor? example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1><a name="top"></a>Header</h1>
</div> <!-- /header -->
<div data-role="content">
<p>lots of content here...<br>scroll down to find the button...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Back to top of page ...
</p>
</div> <!-- /content -->
</div> <!-- /page -->
</body>
</html>