I have these 2 html files (simplified to show the problem i'm having):
Index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body onload="app.initialize();">
My Calendar
</body>
</html>
calendar.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>
</head>
<body onload="app.initialize();">
Index
</body>
</html>
index.js:
var app = {
initialize: function() {
this.bindEvents()
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false)
},
onDeviceReady: function() {
app.receivedEvent('deviceready')
},
receivedEvent: function(id){
alert(location.pathname.substring(location.pathname.lastIndexOf("/") + 1))
}
}
Now when the app first starts it alerts with the message "index.html".
But after that, everytime I click the links to bounce between the 2 pages, the content is shown (the respective links to the other page) but I get no alert, meaning the javascript is not beeing loaded again. But if I refresh the page the alert shows up. I want this to load the javascript without needing to refresh the page.
Thanks,
This is happening because the device is already ready by the time you've selected the next page and thus it won't fire the "deviceready" event again.
I'd change the structure of both pages to:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
My Calendar
</body>
</html>
Note I've moved index.js underneath jQuery mobile and removed the "onload" event.
Then I'd take advantage of the pagecreate event from jQuery mobile to trigger the alert
$(document).ready(function(){
app.initalize();
});
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
$(document).on("pagecontainershow", app.onDeviceReady);
},
onDeviceReady: function() {
app.receivedEvent('deviceready')
},
receivedEvent: function(id){
alert($.mobile.pageContainer.pagecontainer('getActivePage').data('url'));
}
}
Related
In my AspNetCore 3.1 web application, I added required js and css references to my project for Bootstrap notification. But I'm gettin this error when I call the notify function.
Here is my css references:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title></title>
<link href="~/css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/css/bootstrap-notify.min.css" />
</head>
Here is my js references
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/scripts.js"></script>
Bootstrap notify call:
$.notify({
title: 'Hello World',
message: 'Hello :)',
type: 'success'
});
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Desktop App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<link href="assets/style.css" rel="stylesheet">
<link href="assets/overlay.css" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap.min.css" />
<link href="assets/material-icons.css" rel="stylesheet">
<base href="./">
</head>
<body>
<app>
Loading
</app>
<script src="js/ajax-d3.min.js"></script>
<script src="js/ajax-nvd3.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/desktop.min.js"></script>
</body>
</html>
when I load this html on browser material floating label is working fine but when i load it with electron it stops working ..
It should work like
but its working like
please help !!
I am following this tutorial:
http://www.indiageeks.in/phonegap-jquery-ajax-example-jsonjavascript-object-notation-response/
but when I press the buttons the request not sent
this is my code
and when check the console I get this
it iays thet my function " connect is not defined "
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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 href="jQueryMobile/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="jQueryMobile/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<title>Taha king</title>
<script charset="utf−8" type="text/javascript">
function connect(e){
alert("mmmmmmmmmmmm");
var term= {button:e};
$.ajax({
url:'http://www.indiageeks.in/tutorials/reply.php',
type:'POST',
data:term,
dataType:'json',
error:function(jqXHR,text_status,strError){
alert(“no connection”);
},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});}
</script>
</head>
<body>
<div data-role="header">
<h1>Your resource app</h1>
</div>
<div dara-role="content">
<center><b>Bikes or Cars</b></center>
<center><input onclick="connect(this.value)" type="button" value="cars" /></center>
<center><input onclick="connect(this.value)" type="button" value="bikes" /></center>
<center><b>Results</b></center>
<ul id="result"></ul>
</div>
<div dara-role="footer">
<h4>© carsRent.ps</h4>
</div>
<!-- <script type="text/javascript" src="cordova.js"></script>-->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Try to remove this:
charset="utf−8"
from your script tag.
If you want utf-8 encoding there is no need for that since you are using:
<meta charset="utf-8">
connect() function was not exist. You forgot to insert it. please recheck again.
I have this code, but all that happens when I move my slider is that the functions will restart. I want the function to update with the value of the slider position.
Edit: here is the entire page:
<!DOCTYPE html>
<html>
<head>
<meta 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">
<title>sliding</title>
<link rel="stylesheet" href="assets/components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/components/bootstrap/dist/css/bootstrap-theme.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script src="assets/js/simple-slider.js"></script>
<link href="assets/css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="assets/css/simple-slider-volume.css" rel="stylesheet" type="text/css" />
<script src="assets/js/timbre.js"></script>
</head>
<body>
<div class="app container">
<!-- start building -->
<script>
var x=200;
function sin(){T("sin", {freq:x, mul:0.5}).play();}
$('#slider').on('change', function(){
x = $(this).val();
});
</script>
<button onclick="sin()"></button>
<input type="text" data-slider="true" data-slider-range="1,000" id="slider">
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script src="assets/components/jquery/jquery.min.js"></script>
<script src="assets/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/index.js"></script>
</body>
</html>
According to the jQuery Simple Slider docs on getting slider values, the event you need to bind to is a custom event called slider:changed, not the standard DOM change event.
If you modify
$('#slider').on('change', function(){
x = $(this).val();
});
to
$('#slider').on('slider:changed', function(evt, data){
x = data.value;
});
you should be able to copy the new value of the slider to your global variable.
I am using Phonegap and i want to use zoom in / out option on pinch using jquery mobile.
I have tried jgesture and hammer plugins for zooming it. Where i am wrong in this code?
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=yes, 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.4.1.min.css" />
<title>Hello World</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.metaViewportContent = "width=device-width, minimum-scale=1, maximum-scale=2";
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Use hammer.js pinch, pinchin, pinchout
Here's the event documentation for their API on github:
https://github.com/EightMedia/hammer.js/wiki/Getting-Started
ALSO you've essentially made it not user scalable...:
initial-scale=1, maximum-scale=1, minimum-scale=1,
This line:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/>
And then you use jquery to set it again:
$.mobile.metaViewportContent = "width=device-width, minimum-scale=1, maximum-scale=2";
No good, read up on it here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta