im currently using PhoneGap and for some reason when i click a button, the function is undefined. iv tryed putting it inside the deviceReady function, as well as the document ready function, but neither seemed to make a difference.
I can't see what the problem is, if anyone can help that would be great.
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/libary.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
<title>Libary</title>
</head>
<body>
<div id="capture" class="wrapper" data-role="page">
<div data-role="header">
<h1>Libary</h1>
</div>
<div data-role="content" class="app">
Retrieve Photo
<p id="pictureStatus"></p>
<div id="imagelocation">
<img id="capturedImage"></img>
</div>
</div>
</div>
</body>
</html>
My JavaScript/jQuery:
document.addEventListener("deviceready", onDeviceReady, false);
var platform;
function onDeviceReady() {
//Find out what platform the device is running
platform = device.platform;
//Camera Section
function retrievePicture() {
// Take a picture using device camera and retrieve image
//navigator.camera.getPicture(onCaptureSuccess, onCaptureFail, {Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY});
$('#pictureStatus').text("hello");
}
function onCaptureSuccess(imageData) {
$('#capturedImage').css("display", "block");
var imageLocation = imageData;
$('#capturedImage').attr("src", imageLocation);
$('#pictureStatus').text(imageLocation);
}
function onCaptureFail(message) {
$('#pictureStatus').text(message);
}
}
Please don't define functions inside functions like that. Remove your retrievePicture() from inside the onDeviceReady() function and it should work fine.
As mentioned by #Robin van Baalen, this may be an interesting and relevant read - What you need to know about Javascript scoping.
Also, Functions and function scope.
Related
I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.
I recently discovered that my upload for an already existing php, Javascript, jQuery, bootstrap application stopped working. I have been trying to resolve this issue for over a week now. On the javascript console I am getting this error
: main.js:604 Uncaught TypeError: $(...).clipresize is not a function. Please any assistance will be of great assistance. I was thinking that the many references to various Jquery files could be causing this error or is it that all browsers have been recently upgraded not to support some snippets being referenced. I am confused.
The application codes are below:
add.php
<!DOCTYPE html>
<html lang="en" class="no-js">
<!--<![endif]--><!-- start: HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload</title>
<!-- start: META -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description">
<meta content="" name="author">
<!-- end: META -->
<!-- start: MAIN CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/fonts/style.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/main-responsive.css">
<!--<link rel="stylesheet" href="../css/all.css">-->
<link rel="stylesheet" href="../css/bootstrap-colorpalette.css">
<link rel="stylesheet" href="../css/perfect-scrollbar.css">
<link rel="stylesheet" href="../css/theme_light.css" type="text/css"
id="skin_color">
<link rel="stylesheet" href="../css/print.css" type="text/css"
media="print">
<link href="../css/bootstrap-modal-bs3patch.css" rel="stylesheet"
type="text/css">
<link href="../css/bootstrap-modal.css" rel="stylesheet" type="text/css">
<link href="../css/validate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-
16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-hover-dropdown.min.js"></script>
<script src="../js/jquery.blockUI.js"></script>
<script src="../js/jquery.icheck.min.js"></script>
<script src="../js/jquery.mousewheel.js"></script>
<script src="../js/perfect-scrollbar.js"></script>
<script src="../js/less-1.5.0.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/bootstrap-colorpalette.js"></script>
<script src="../js/main.js"></script>
<script src="../js/index.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-modalmanager.js"></script>
<script src="../js/validations.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="../js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="../js/jquery.maskMoney.js"></script>
<script src="../js/form-elements.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
UIModals.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Index.init();
});
</script>
.......
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.form.min.js" type="text/javascript"></script>
<script src="materialize.js" type="text/javascript"></script>
<link rel="stylesheet" href="materialize.css">
.................
<script type="text/javascript">
$(document).ready(function() {
$('#add_app').submit(function(e) {
var value = manage_form();
if(value==false)
{
return false;
}else{
e.preventDefault();
$('#loader-icon').show();
$(this).ajaxSubmit({
//target: '#targetLayer',
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total,
percentComplete){
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' +
percentComplete +' %</div>')
},
success:function (data){
$('#modal1').openModal();
$('#loader-icon').hide();
$("#progress-bar").width('0%');
var res = data.split("~");
$('#mode7').html('<a href="add.php?flag=edit&id='+res[1]+'"
class="btn light-green modal-action modal-close waves-effect waves-
green btn-flat">Okay</a>');
document.getElementById('row_id').value = res[1];
document.getElementById('row1_id').value = res[1];
document.getElementById('package').value = res[0];
//document.getElementById('process_id').html = data;
//$('#mode7').html('<a href="add.php?
flag=edit&id='+res[1]+'" class="btn light-green modal-action modal-close
waves-effect waves-green btn-flat">Okay</a>');
},
resetForm: true
});
return false;
}
});
});
and the "main.js" script that throws the error is below:
//Window Resize Function
var runWIndowResize = function(func, threshold, execAsap) {
//wait until the user is done resizing the window, then execute
$(window).clipresize(function() {
runElementsPosition();
});
};
I finally was able to get my progress bar working and all the assets uploaded to the required folder by removing a mailing library called Php Mailer in my php submit script. The Php mailer library was failing in my application and I discovered that it was throwing up a blank or null output which was causing my application to break by not responding to the submit button. And broken libraries at times are the reason for which many formerly functioning web applications are said to stop functioning. The solution many times will be to update the required libraries or to remove them and find a way to tweak the application to work without those libraries. Thanks
I have a problem, when i try to make a phonegap build and test it on my android phone javascript don't run.
I have simple config.xml file, and there is a preview of my index.html's head :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Mobile_style.css"><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
// do your thing!
}
</script>
<script type="text/javascript">
window.onload = function()
{
MY JS CODE
}
</script>
</head>
<body onload="onBodyLoad()">
MY HTML
</body>
I have two html files, the index.html and the game.html, i have the same links and scripts in the game's head.
i have try to put my code on the but thats not working.
I have search some hours but i can solve the problem.
Thanks for your help !
You should include only one version of jquery. Also you don't need both cordova.js and phonegap.js, choose one script.
Your code may look much more cleaner:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="Mobile_style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Device is ready");
}
</script>
</head>
<body>
MY HTML
</body>
</html>
I simply can't get the jQuery Mobile Transitions (I only want the "slide" one!) to happen but it's all a no-go. It just loads the page normally each time.
Full HTML code here:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0-alpha.1.min.css">
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<title>Parent Guide</title>
<script>
//iScroll initiate
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" id="header"><h1>The Parent Guide</h1></div>
<div data-role="content" id="wrapper">
<div id="scroller">
<div id="content">
Link
</div>
</div>
</div>
<div data-role="footer" id="footer"><div class="footer_abt"></div></div>
</div>
</body>
</html>
Just change jquery-1.9.0.min.js with a jquery-1.8.2.min.js version and that is that.
I tried everything but still can't fire the deviceready event. I also tried to fire the pause event which worked OK. I'm using cordova 2.0.0. Here is my code:
<html>
<head>
<title>Taxiii</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale =1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script src="cordova-2.0.0.js"></script>
<script src="jquery.js"></script>
<script src="xui.js"></script>
<script src="iscroll.js"></script>
<script src="loadData.js"></script>
<script src="loadServices.js"></script>
<script src="js.js"></script>
<script src="methods.js"></script>
<script src="setSizes.js"></script>
<script src="map.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=true"></script>
<script>
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("123")
}
</script>
</head>
<body onload="onLoad()">
...
I've tried more syntaxes but none worked.
There's no need to wrap document.addEventListener("deviceready", onDeviceReady, false); inside function onLoad(). Try without it and tell if it helped.