I am getting "Uncaught ReferenceError: isApp is not defined" in the console,
I had tried to find solution for this error from long morning but didn't able to get much, both of my isApp.js and mApp.js are saved in folder named as "js", can someone please help me to get out of this thing....thanks in advance
//"......isApp.js file code starts from here..............."
var iA = function () {
var t = this;
this.user;
var IsInvite = false;
this.serverUrl = someLocalhostUrl;
//some function - structure of functions is shown below
//this.function1 = function(){
//do something
//};
//lot of function
this.initialize = function () {
t.getUser();
var pk = typeof t.user;
if (!(typeof t.user === 'object')) {
t.user = null;
t.setUser();
}
}();
};
var isApp = new iA();
//"......isApp.js file code endss here..............."
//"......mApp.js file code starts from here..............."
var mApp = function () {
//var PostUrl = "http://localhost:52015/"
var PostUrl = isApp.serverUrl + "/";
var t = this;
var u = {};
this.ph, this.loc;
var user, Email, UserName;
var LoggedIn;
this.initiate = function () {
u = isApp.getUser();
if (u && u.LoggedIn) {
if (window.location.href.indexOf("index") == -1)
$.mobile.changePage("index.html#p-start");
//window.location = "index.html#p-home";
}
};
//some function - structure of functions is shown below
//this.function1 = function(){
//do something
//};
//lot of function
this.initiate();
};
m = new mApp();
//"......mApp.js file code ends here..............."
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css starts here-->
<link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<!--css ends here-->
<!--js starts here-->
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery.signalR-2.2.0.min.js"></script>
<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>
<script src="js/home.js"></script>
<!--js ends here-->
<!--<script>
$(function () {
$('.image').click(function () {
alert("selection needed");
});
document.getElementById("startDate").valueAsDate = new Date();
});
</script>-->
</head>
<body>
<div data-role="page" id="p-start">
<div data-role="main" class="ui-content ui-responsive ui-body-a">
<div class="align-center">
<h3>Its our Rocking app</h3>
<a href="#p-login">
<img src="images/temp-logo.jpg" class="logo" />
</a>
</div>
</div>
</div>
</body>
</html>
You load your mApp.js file before your isApp.js file and both scripts are executed right away, so naturally the function isn't defined yet when mApp.js is executed.
<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>
Related
I'm trying to create an autocomplete text field, that autocompletes the country that's filled in, if the country already exists in the google sheet. At the moment my code only works, when I write all the possible countries in the 'availabletags' variable. But I want it to get the values directly from the google sheet. This is the html & script:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="text">country</label>
<input id="text">
</div>
<div>
<button id="btn"> Run it! </button>
</div>
<script>
$(function() {
var availableTags = [ //should be changed to availableTags = list;
"belgium",
"france",
"greece",
"spain",
"italy",
"the netherlands"
];
$("#text").autocomplete({
source: availableTags
});
});
document.getElementById("btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("text").value;
google.script.run.userClicked(ucountry);
document.getElementById("text").value = "";
};
</script>
</body>
</html>
I wrote following code in google script to retrieve the countries from the google script, and when I look at the log, the list of countries from the google sheet is indeed in the list variable.
function doGet() {
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues(); // contains countries
Logger.log(list);
var template = HtmlService.createTemplateFromFile("page");
template.list = list.map(function(r){return r[0]; });
var html = template.evaluate();
return html;
}
function userClicked(country){
var url = "https://docs.google.com/spreadsheets/d/1IMxZwN3swMTf9EoF_k3iRV7Zc6iwzoWzov5-qC_MSKU/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([country]);
}
I would like to have the var availableTags = list; But when I do that, the autocomplete stops working. Any help would be appreciated!
Use google.script.run with SuccessHandler
This implies the creation of an additional .gs function that will be called from clientside onload.
Sample:
Code.gs
function doGet() {
var template = HtmlService.createTemplateFromFile("page");
var html = template.evaluate();
return html;
}
function getCountry(){
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues(); // contains countries
list = list.map(function(r){return r[0]; });
Logger.log(list);
return list;
}
function userClicked(country){
var url = "https://docs.google.com/spreadsheets/d/1IMxZwN3swMTf9EoF_k3iRV7Zc6iwzoWzov5-qC_MSKU/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([country]);
}
page.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="text">country</label>
<input id="text">
</div>
<div>
<button id="btn"> Run it! </button>
</div>
<script>
google.script.run.withSuccessHandler(tags).getCountry();
function tags(list) {
console.log(list);
var availableTags = list;
$("#text").autocomplete({
source: availableTags
});
};
document.getElementById("btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("text").value;
google.script.run.userClicked(ucountry);
document.getElementById("text").value = "";
};
</script>
</body>
</html>
I tried many times to submit my app to Samsung but I always get rejected because the back button or exit button of the watch doesn't work.
My app is a multiple page in one single HTML, as explained in the Tizen Documentation.
I don't know if it's a problem with the code within the app.js file where a problem with the multiple page in one single HTML file.
App.js file:
( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName === "back" ) {
var page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" ) {
try {
tizen.application.getCurrentApplication().exit();
} catch (ignore) {
}
} else {
tau.changePage("#main");
}
}
} );
} () );
index.html file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>BRStocks</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header>
<h2 class="ui-title">BR Stocks</h2>
</header>
<div class="ui-content content-padding">
<ul class="ui-listview">
<li>BVSP</li>
<li>IBOV</li>
<li>ABEV3</li>
<li>AZUL4</li>
<li>BTOW3</li>
</ul>
</div>
</div>
<div class="ui-page" id="two">
<span id='ABEV3'>START</span>
<header>
<h2 class="ui-title" id="title">Loading...</h2>
</header>
<div class="ui-content">
<div id="container">
<pre><span id="ticker"></span></pre>
<pre><span id="price"></span></pre>
<pre><span id="pctChange"></span></pre>
<a class="back" href="main" onClick="Clear();">Voltar</a>
</div>
</div>
</div>
<script>
function Clear()
{
document.getElementById('title').innerHTML="Loading...";
document.getElementById('ticker').innerHTML = '';
document.getElementById('price').innerHTML = '';
document.getElementById('pctChange').innerHTML = '';
}
function link(event) {
var element = event.target;
var ticker_id = element.getAttribute("ticker_id");
// do what you will with hike_id
console.log(ticker_id);
getPrice(ticker_id);
return;
}
function getPrice(y) {
if (self.fetch) {
console.log("fetch ok!")
fetch('xxxxxxxxxxxxxxxx')
.then(response => response.json())
.then(data => {
console.log("Fetching...")
//document.getElementById('title').innerHTML = data[y]['name']
var CompanyName = data[y]['name'];
var CompanyTicker = data[y]['ticker'];
var lastPrice = Number(data[y]['lastPrice']);
var pctChange = Number(data[y]['pctChange']);
pctChange = pctChange.toFixed(2);
document.getElementById('ticker').innerHTML = CompanyTicker;
document.getElementById('title').innerHTML = CompanyName;
document.getElementById('price').innerHTML = lastPrice.toLocaleString('pt-BR');
document.getElementById('pctChange').innerHTML = pctChange.replace('.',',') + '%';
if (pctChange < 0) {
console.log('Achou o sinal negativo');
document.getElementById('pctChange').className = 'redFont';
}else{
document.getElementById('pctChange').className = 'greenFont';
}
});
} else {
console.log("Something went wrong...")
}
}
function red(){
var elements = document.getElementById('pctChange').innerHTML;
console.log('Elemento: '+elements);
if (elements.includes('-')) {
console.log('Achou o sinal negativo');
document.getElementById('pctChange').className = 'redFont';
}else{
document.getElementById('pctChange').className = 'greenFont';
}
}
</script>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/circle-helper.js"></script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</body>
</html>
The html file is pretty simple. The multiple page works with href pointing to id tags (in this case is #two and #main the pages).
For any reason, the button back in the emulator and real gadget is not working. Neither back to previous page, nor exit the application.
instead of
<a class="back" href="main" onClick="Clear();">Voltar</a>
try
<a class="back" href="main" ontouchend="Clear();">Voltar</a>
(I took a random eg in your code you can apply that change to every 'onClick' attribute)
I have just figure out that for the buttons to work (and also the function tizenhwkey) you have to setup the config.xml file of your project.
I have just added the line below:
<tizen:setting background-support="disable" encryption="disable" hwkey-event="enable"/>
And now the function and buttons work fine!
This is the code that I want to work out, it's about AMap.com geolocation API. I want to know how to get this value (such as gLats in code) out of the function onComplete().
<!DOCTYPE html>
<html>
<head>
<title>amap</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=key"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id='container'></div>
<div id="tip"></div>
<div id="text"></div>
<div id="txt"></div>
<script type="text/javascript">
var map, geolocation;
map = new AMap.Map("", {
resizeEnable: true
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);
AMap.event.addListener(geolocation, 'error', onError);
});
function onComplete(data) {
var str=['succsee'];
var gLngs=data.position.getLng();
var gLats=data.position.getLat();
str.push('longitude：' + data.position.getLng());
str.push('latitude：' + data.position.getLat());
document.getElementById('tip').innerHTML = str.join('<br>');
document.getElementById('text').innerHTML = str.join('<br>');
}
function onError(data) {
document.getElementById('tip').innerHTML = 'failure';
}
</script>
</body>
</html>
As I can see, you are already accessing the needed values in onComplete():
str.push('longitude：' + data.position.getLng());
str.push('latitude：' + data.position.getLat());
You cannot simply get them, onComplete is a callback that is called when the values are available. So do anything about them in onComplete, you may want to assingn them to global variables, etc, to have them easyly accessible from anywhere in code.
Assigning them to globals is the way to go.
//declare in the global scope
var gLats = null;
var gLngs = null;
...
function onComplete(data)
{
var str=['success'];
gLats=data.position.getLat();
gLngs=data.position.getLng();
...
}
Please have a look at the following code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="infinite_999">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="name"></div>
<div id="rooms"></div>
<div id="booked"></div>
<div id="available"></div>
<script src="javascript.js"></script>
</body>
</html>
Javascript:
var hotel={
//Properties
name:'Pacific Idea',
rooms:20,
booked:15,
//Methods
checkAvailability = function () {
return this.rooms- this.booked;
}
};
var nameHotel=document.getElementById('name');
var roomHotel=document.getElementById('rooms');
var bookedHotel=document.getElementById('booked');
var availableHotel=document.getElementById('available');
nameHotel.textContent=hotel.name;
roomsHotel.textContent=hotel.rooms;
bookedHotel.textContent=hotel.booked;
availableHotel.textContent=hotel.checkAvailability();
Now according to this code, the name, number of booked rooms, number of available rooms of the hotel should be displayed. But unfortunately, it just doesn't display anything.
Please help me..
2 errors in your javascript code. one is checkAvailability = function (); should be ':' instead of '='. and roomsHotel typo error.
Try
var hotel={
//Properties
name:'Pacific Idea',
rooms:20,
booked:15,
//Methods
checkAvailability : function () {
return this.rooms- this.booked;
}
};
var nameHotel=document.getElementById('name');
var roomsHotel=document.getElementById('rooms');
var bookedHotel=document.getElementById('booked');
var availableHotel=document.getElementById('available');
nameHotel.textContent=hotel.name;
roomsHotel.textContent=hotel.rooms;
bookedHotel.textContent=hotel.booked;
availableHotel.textContent=hotel.checkAvailability();
So I have a website with a Header.html. In the header are three buttons. I've copied the Header.html into all of my other pages with jquery's load. Now what I would like to do is change the colour of one of the buttons depending on the page it's on. But when I use document.GetElementById in javascript it can't find the div of the button I've copied from the Header.html
Here's the Header.html
<div id="Header_Wrapper">
<div id="Header_PageLinksWrapper">
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_Games" href="..\Pages\Games.html">Games</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_AboutMe" href="..\Pages\AboutMe.html">About Me</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_CV" href="..\Pages\CV.html">CV</a>
</div>
</div>
</div>
The javascript file:
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html");
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
}
);
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = document.getElementById(id);
if (divElement == null)
{
console.log("Could not find element " + id);
}
divElement.style.color = 0xffffff;
}
One of the pages (eg. Games.html)
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Adabelle Combrink - Games</title>
<link rel="stylesheet" type="text/css" href="..\Templates\Header.css"/>
<link rel="stylesheet" type="text/css" href="..\Templates\Page.css"/>
<link rel="stylesheet" type="text/css" href="..\Pages\Games.css"/>
<script type="text/javascript" src="..\Scripts\jQuery.js"></script>
<script type="text/javascript" src="..\Scripts\Defaults.js"></script>
</head>
<body>
<header>
<div id="Header"></div>
</header>
</body>
</html>
What this gives me in the console is Could not find element PageLink_Games. I don't get that error if I use something that is in Games.html like Header.
Is there any other way of doing the same thing. I know you can include files into eachother with php but I haven't gotten that right and don't seem to be able to run .php files in Visual Studio.
jQuery.load has a success callback. Use it to assure your code is only executed after the loading is complete.
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", null, function() {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
Also your SetPageLinkColours function can be improved with jQuery:
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = $("#"+id);
if (!divElement.length)
{
console.log("Could not find element " + id);
}
else
{
divElement.css('color','white');
}
}
load function makes async request , so your code tries to find element before it rely appears. U need to use load function callback http://api.jquery.com/load/
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", function () {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);