I am trying to use my js file to hold all of my variables that I will use across my html files to either update or retrieve the values. I feel silly because I was able to access the helpers.js variables from my index.html file but not my mainMenu.html. Any help would be greatly appreciated. I am trying to get the first name of the user to my mainMenu.html.
I tried following this link as a reference but I am stuck: [Global variables in Javascript across multiple files
My js file with all of the variables I will be referencing:
'helpers.js'
var companyName = "";
var firstName = "";
var lastName ="";
var clientOrEmployee ="";
var online = "";
var offline = "";
function setFirstName(val){
firstName = val;
}
function getFirstName(){
return firstName;
}
My html file that is WORKING PROPERLY and acts as a login page. It shows that the information was entered in correctly (1 score matched), then it shows the company, user status, user first name and last name, and then it shows the first name as it is referenced by the helpers.js file, followed by how many online and offline information they have.
'index.html'
<!doctype html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="helpers.js"></script>
<title>X2nSat</title>
<style>
.error {color: #FFFFFF;}
</style>
</head>
<meta name="description" content="title">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
<body bgcolor="FFFFFF">
<link rel="stylesheet" href="login.css" />
<div id="wrapper">
<br><br><br>
<div id="main">
<center>
<form name="myform">
<br>
<center>
<img src="logo.png" />
</center>
<br>
<center><h1>Login</h1></center>
<br>
<strong>Email: </strong>
<br>
<input type="text" name="email">
<span class="error">
<br>
<?php echo $emailErr;?>
</span>
<br><br>
<strong>Password: </strong>
<br>
<input type="password" name="password">
<span class="error">
<br>
<?php echo $nameErr;?>
</span>
<br><br>
<input type="button" value="Log In" name="Submit" onClick="validate()">
</form>
<br><br><br>
</center>
</div> <!-- main -->
<script type="text/javascript" >
Parse.initialize("secretID", "secretID");
function validate() {
var em = document.myform.email.value;
var pw = document.myform.password.value;
var valid = false;
/* =========
Query for finding email, password, company name, first name, last name and client or employee status ================ */
var Clients = Parse.Object.extend("Clients");
var query = new Parse.Query(Clients);
query.equalTo("email", em);
query.equalTo("password",pw);
query.find({
success: function(results) {
if(results.length==0){
alert("Error: The information you have entered is incorrect. Please try again.");
}
else{
alert("Successfully retrieved " + results.length + " scores.");
}
// Do something with the returned Parse.Object values
for (var i = 0; i < results.length; i++) {
var object = results[i];
var company = object.get('ComapnyName');
var firstname = object.get('firstName');
var lastname = object.get('lastName')
var clientoremployee = object.get('client_or_employee');
companyName = company;
firstName = firstname;
lastName = lastname;
clientOrEmployee = clientoremployee;
alert(company+ " "+clientoremployee + ' : ' + firstname+ ' ' + lastname);
}//for loop end
//start
alert(getFirstName()); //this is working 100%!!!!!!
/*=====
Query to find the number of online of offline sites
=====*/
var statusInfo = Parse.Object.extend("ClientCompanyInfo");
var query2 = new Parse.Query(statusInfo);
query2.equalTo("CompanyName", companyName);
query2.find({
success: function(object) {
// Successfully retrieved the object.
var onlineCount = 0;
var offlineCount = 0;
for (var i = 0; i < object.length; i++) {
var site = object[i];
var status = site.get('site_status');
if(status == "Online"){
onlineCount++;
}
if(status == "Offline"){
offlineCount++;
}
// alert(site.get('playerName'));
}//end for loop
online = onlineCount;
offline = offlineCount;
alert("Success: object length ="+object.length);
alert("Online Sites: "+ onlineCount +" Offline: "+offlineCount);
window.location.href = "mainMenu.html";
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
//end
},//end if success
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}//end error
}); //find
}//validate
</script>
</div><!-- wrapper -->
<!-- ============ FOOTER SECTION ============== -->
<br><br><br>
<div id="footer">
<div style="position:relative; bottom:10px; text-align:center; width: 90%; margin:0 auto; height:30px; border:1px so\
lid black;" >
<id= "footer">
Copyright © Inc.
</div>
</div>
</body>
</html>
PROBLEMS: Everything is great UP TO THIS POINT... then I try to reference the helpers.js file in my mainMenu.html file and is giving me the value of 'undefined' as the user's first name. How is this possible? What am I missing???
'mainMenu.html'
<!doctype html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="helpers.js"></script>
<!--<script src="index.html"></script>-->
<title>X2nSat</title>
<style>
.error {color: #FFFFFF;}
</style>
</head>
<meta name="description" content="title">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0" bgcolor="#FFFFFF" ><tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="30px" valign="top" bgcolor="FFFFFF">
<link rel="stylesheet" href="mainMenu.css" />
<div id="wrapper">
<td style="vertical-align:middle" align="left">
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span><center>Home</center></span></a></li>
<li><a href="#"><span><center>Sites</center></span></a></li>
<li><a href="#"><span><center>Usage</center></span></a></li>
<li><a href="#"><span><center>Contact</center></span></a></li>
<li><a href="#"><span><center>Log Out</center></span></a></li>
</ul>
</div>
</td>
<!-- ============ RIGHT COLUMN (CONTENT) ============== -->
<td width="81%" valign="top" bgcolor="#FFFFFF">
<center>
<img src="x2nsatLogo.png" />
</center>
<h2><center>Site Report</center></h2>
<p>Welcome
<script type="text/javascript" >
Parse.initialize("secretID", "secretID");
getFirstName();
</script>
</p>
</div><!-- wrapper -->
</table>
</body>
</html>
Can anyone help me out to why this file is having a hard time accessing the helpers.js getFirstName() function?
Thank you in advance!!!!!
P.S. Please let me know if you need me to clarify anything!!!!
