just trying to get jquery mobile firing with phonegap, but I can't get my hello world firing.
All of the references to the Js is correct.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery_mobile.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$(document).ready(function() {
$(document).bind("deviceready", function(){
navigator.notification.alert("hello world");
});
});
}
</script>
</head>
<body>
</body>
</html>
Try this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Hello With JQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0rc1.min.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript">
var onDeviceReady = function() {
alert("OnDeviceReady fired.");
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();">
</body>
</html>
Did you include the reference where the html and js ar located in Xcode?
You should try to start debugging by placing something in the body of the html and see if that appears when you compile and run.
Try removing the addEventListener and Function like this:
<script type="text/javascript">
$(document).ready(function(){
$(document).bind('deviceready', function(){
navigator.notification.alert("hello world");
});
});
</script>
There is no need to listen for 'deviceready' twice. The document will be ready first, followed by JQM firing deviceready.
I hope it helps!
I had a similar issue. Commenting out jquery or jquerymobile reference caused the app to work but i could not get it to work with both in the header. Both files were in the www folder of phonegap. I even tried referencing the code from the jquery.com but it didn't work.
Related
I would like to write a java script file that searches for closeText value and console.log it but i am a confused how to do this my approach is based on this documentation but i can't figure out how to do this , i all get is an error ReferenceError: $ is not defined
my problem
html.index file
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.4.2.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<iframe id=target ></iframe>
<script src="script.js"></script>
</body>
</html>
and the script.js
var target = document.getElementById('target');
var closeText = $( ".selector" ).dialog( "option", "closeText" );
console.log(closeText);
You need link JQuery before your code like bellow.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
//your code here
</script>
you can find your version of jquery from here
I am struggling to use toast message on my website which may be visible on the click of a button. here is the code below.
<html>
<head>
<link rel="stylesheet" href="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar / Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>
Even adding event listener calling in function script did not work for me.
I am using the below library which suggested me to use external scripts and style as have been used in the code above.
https://codeseven.github.io/toastr/
I am a novice, please help me out with this.
Also, if you can help me out figuring out how can I directly get it done on WordPress, it would be highly appreciable.
Try This code... There are some small mistakes.. I fixed... Check this..
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>
I made a angularjs HTML SPA that works fine.In a specific situation I need the power of a HTA. As far as I know there are no restrictions in using a HTA in combination with angular or any other valid HTML. Nevertheless I get an error when using the line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
in a HTA, even when it's the only script tag in the header.
The error message is: Script error, Code 0, URL http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
I would expect that others have encountered this error before but I can't find anything on stackoverflow.Does anybody recognize this problem? Is there a solution or workaround?
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div >
...Do something
</div>
</body>
</html>
You have declared ng-app and ng-controller on HTML element, but its handlers are not defined. Also, as noted in comment, you must elevate implicit IE version to use sane JS engine with X-UA-Compatible meta. Adding those two lines fixes described error:
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>angular.module('myApp',[]).controller('myCtrl',['$scope',function($scope){}])</script>
</head>
<body>
<div>
...Do something
</div>
</body>
</html>
Was just wondering if someone could be able to help me out. I've come across a strange issue that i've never encountered and I have no idea how to solve it :
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="global.js"></script>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
my javascript file and my jquery file is imported here. Which "should" to the external jquery file. But it doesn't, i have to run the code from there with script tags. Any possible solution?
If it helps the code in the Global.js is this :
$(document).ready(function(){
$("#txtbox").keyup(function(){
var name = $('#txtbox').val();
$('#display').html((name));
});
});
global.js should be loaded after jQuery
Add your script tag after the jquery script references.
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
You need to process your code after jquery has loaded. I imagine when you were inserting it directly in the page it was below where you loaded jquery in the head tag.
I'm building a mobile game with HTML5 and Javascript, for Android devices.
Android doesn't support HTML5 Audio, that's why i've choose to use a phonegap plugin : https://github.com/phonegap/phonegap-plugins/tree/master/Android/LowLatencyAudio
My structure is very simple, i've got 3 objects.
game, which is my main object.
animation, which is my object where are all my sprites animations.
sound, which all my sound are played, looped or stopped.
Here, my index.html file :
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" charset="UTF-8" src="cordova.js"></script>
<script type="text/javascript" charset="UTF-8" src="PGLowLatencyAudio.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/src/pixi.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/game.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/sound.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/animation.js"></script>
<script type="text/javascript" charset="UTF-8">
function onDeviceReady(){
PGLowLatencyAudio.preloadFX('drum','assets/son/drum/drumPiste1.mp3', game.sound.successHandler, game.sound.errorHandler);
};
function onBodyLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
};
</script>
</head>
<body onload="onBodyLoad()">
<div id="wrapper"></div>
<script type="text/javascript" charset="UTF-8">
game.init();
game.sound.init();
game.animation.init();
</script>
</body>
I'm using the PGLowLatencyAudio.preloadFX function of the plugin, to preload my mp3 file.
After, I call my init function of my object sound, which is like that :
game.sound = {
init: function(){
soundsArray = [];
game.sound.playSound();
},
successHandler: function(result){
alert(result);
},
errorHandler: function(error){
alert(error);
},
playSound: function(){
PGLowLatencyAudio.play('drum', game.sound.successHandler, game.sound.errorHandler);
},
};
In my init function, i call my playSound function, to play the sound i've previously preload.
It try to play sound before preload, but i don't understand why.
Error message is : A reference does not exist for the specified audio id.
Here's the link, which i followed for a similar project earlier.
It has the solution to the problem !