I don't know if this is too localized or not but I don't have much code. The problem I am having is an object being declared in a global js file named System.js called budgetModel which holds data for the entire web app is showing as undefined.
I created a class like object called BudgetModel in js within the System.js file and when a user logs in the website directs them to a page called index.php which onload executes two methods called setupSystem() and then setup().
Near the bottom of the html before the closing 'body' tag I placed two scripts, the System.js and a setup function to load the data that was passed from php to javascript using json as the variable budgetcost and another called budgetexp:
<script src="util/js/System.js" type="text/javascript"></script>
<script type="text/javascript">
function setup(){
budgetModel.setCost(budgetcost, budgetexp);
}
</script>
Also in the System.js file I have this global function and variable:
var budgetModel;
function setupSystem(){
budgetModel = new BudgetModel();
}
The setupSystem function is called before the setup function is called within the index.php file. The error I get is that it complains the budgetModel variable is not defined. How can this be fixed or is it even possible and if it is possible should my System.js script line be somewhere else?
EDIT:
I fixed the problem. There was a very very small syntax error in the System.js file.
I also noticed that window. syntax doesn't matter either way if the variable is declared global or not. Sorry for the bother everyone x_x
EDIT2:
Here is as much code as I can provide:
index.php:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="util/css/globalStyles.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body onload="setup();">
...
<script src="util/js/System.js" type="text/javascript"></script>
<script type="text/javascript">
function setup(){
if (typeof(budgetcost) !== 'undefined'){
setupSystem();
budgetModel.setModel(budgetcost, budgetexp);
teamAssumpModel.setModel(teamagents);
}
}
</script>
</body>
System.js:
var budgetModel;
var teamAssumpModel;
function setupSystem(){
window.budgetModel = new BudgetModel();
window.teamAssumpModel = new TeamAssumpModel();
}
function TeamAssumpModel() {
this.teamagents = [[]];
this.setModel = function(teamagents){
this.teamagents = teamagents;
};
this.getAgents = function(){
return this.teamagents;
};
}
function BudgetModel(){
this.budgetcost = [[]];
this.budgetexp = [[]];
this.setModel = function(budgetcost, budgetexp){
this.budgetcost = budgetcost;
this.budgetexp = budgetexp;
};
this.getExp = function(){
return this.budgetexp;
};
this.getCost = function(){
return this.budgetcost;
};
}
So this is pretty much what what I have. budgetModel works in the index.php but when I include this same file into another php file it reads as undefined. What else is required to make it visible to other php files?
Related
Say I have the following code in my HTML body:
<script src = "first.js"></script>
<script src = "second.js"></script>
So in first.js I have two variables declared in a global scope. Why can't I access them from second.js?
The following code works as expected. Without being able to see all your relevant code it's impossible to diagnose your issue. That's why you're being downvoted.
index.html
<script src="first.js"></script>
<script src="second.js"></script>
<script>
console.log(firstGlobal, secondGlobal); // true true
</script>
first.js
var firstGlobal = true;
second.js
var secondGlobal = true;
I have two files as below:
trycapture.js (which has) trycapture() (which has) drawaggregate() definition
main.js from which I want to call drawaggregate();
trycapture.js
trycapture(){
... some code
function drawaggregate(){
... definition
}
}
main.js
.. some variables
var try_obj = new trycapture();
try_obj.drawAggregate(emit_x1,emit_y1,emit_x2,emit_y2);
HTML
<head>
<script src="trycapture.js"></script>
<script src="js/main.js"></script>
</head>
How can I call that function. I tried creating an object right before calling drawaggregation() such as above:
I still get the error:
TypeError:try_obj.drawaggregate is not a function
Also, in index.html I made sure that I include trycapture.js before main.js How can I call that function?
Add
this.drawaggregate = drawaggregate;
after your function definition to make it a public method of the trycapture object.
Overall, you will change your trycapture.js to the following:
function trycapture(){
... some code
// Locally accessible only
function drawaggregate(){
... definition
}
this.drawaggregate = drawaggregate; // Makes it publicly accessible also
}
the drawaggregate() method can then be called like so:
var try_obj = new trycapture();
try_obj.drawaggregate();
I have two functions with same name "chiliClick". The uncommented function is not invoking even after hitting the button chili nor is it throwing any error in console. However the same function (commented) working fine with same code. Is there any difference? Please help
(function(){
var app = angular.module("myApp", []);
var clickController = function($scope){
$scope.spicy = 'very';
function chiliClick(){
$scope.spicy = 'chili';
}
// $scope.chiliClick = function(){
// $scope.spicy = 'chili';
// }
};
app.controller("clickController", clickController);
}());// Code goes here
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Hello Controller </title>
</head>
<body>
<div ng-controller="clickController">
<button ng-click="chiliClick()">Chili</button>
<button>jalapeño</button>
<p> this is {{spicy}} hot <p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="myApp.js"></script>
</body>
</html>
What are the differences between the declarations of function "chiliClick"?
The first one creates a local function.
function chiliClick(){
$scope.spicy = 'chili';
}
What that means is that it's essentially a local object in the scope of your controller. You'd be able to call it in that scope, but you never do. You can think of this as conceptually similar to a private function in other languages.
The second one creates a function as a property of the $scope object.
$scope.chiliClick = function(){
$scope.spicy = 'chili';
}
This time, you've attached the function to something that angular will let you call (the $scope object). You can think of this as similar to a public function.
Yes! there's a big difference.
Because in your commented function you wrote:
$scope.chiliClick = ...
When doing this, you provide your function to the scope, so your HTML knows about the chiliClick function.
but when you just do as in the uncommented one, your HTML doesn't know anything about the function (since it is local variable, declared inside your controller function).
I have a javascript file that I'm am calling in the head of an HTML file, it's called custom.js, it defines this function:
var example = function(element){
console.log(element);
};
Then in the actual HTML document, just before the body tag closes, I try to initialize it by calling the same function like this
example('.header-background');
I get the error example is not a function, what exactly am I doing wrong? Thank you so much for your help.
here is a bit more context
<!DOCTYPE html>
<html>
<head></head>
<body>
// the main body of html
<script src="custom/custom.js"></script> // here is the file with the example function
example ('.header-background'); // here im calling the function
</body>
</html>
Change var example to window.example. If you declare a variable with var inside of a function or closure it isn't globally accessible.
e.g.,
function foo()
{
var test = 'hi';
}
console.log(test); // error, test isn't accessible
function foo()
{
window.test = 'hi';
}
console.log(test); // works
Global variables should generally be avoided there. There's most likely a better way to do what you want to do.
Make sure to the file where your function in the html page you are calling the function:
<script type="text/JavaScript" src="youtpathtothefile/custom.js"></script>
Hope it helps
Please make sure two things:
your javascript file is loaded after jQuery library.
your javascript is loaded after the every dom in the html file has finish loading.
Maybe that could help you.
I have an HTML file with a couple of external JavaScript files. Here's an example, somewhat simplified from the real HTML and JavaScript files:
<head>
<title>Control Page</title>
<script language="JavaScript" src="control.js"></script>
<script language="JavaScript">
var myWindow;
var controlForm;
function onPageLoad() {
myWindow = document.getElementById('iframe1');
controlForm = document.getElementById('ControlForm');
}
</script>
</head>
<body onLoad="onPageLoad()">
....
</body>
</html>
and then in my JavaScript file control.js:
function messageArrival(message) {
chatwindow.contentWindow.document.write(message)
}
function makeNetMeetingCall() {
controlForm.Status.value = ....
}
....
My question: When I validate the external JavaScript file, it complains about the variables that are defined in the main HTML file because they aren't declared anywhere in the *.js file. For example, MyEclipse's JavaScript editor complains that it sees variables used that are not defined in any visible scope. How can I declare these variables in the JavaScript file so that it's clear the variables are expected to be defined externally, something similar to "extern" in C.
This sounds more like an issue with MyEclipse's JS editor than your JS.
Unfortunately, I'm not familiar with MyEclipse. However, I do know of a good JS validator, JSLint, which accounts for global variables by having you define them in the comments:
/*global getElementByAttribute, breakCycles, hanoi */
You could declare the variables in the global scope of your control.js file.
var controlForm;
function makeNetMeetingCall() {
// ...
}
this won't interfere with the code that finally defines these objects, as it executes first. But even if it didn't, without an initializer it wouldn't overwrite anything.
If you need proof about the overwriting, just did this in the JS shell:
$ js
js> var x = 1;
js> print( x );
1
js> var x;
js> print( x );
1
js>
In reality, the problem is that your "IDE" isn't aware of them. It hasn't connected the HTML page JS variables with the external javascript file. One way around this, is to put the variable declaration into the external javascript file.
You need to declare the variables before the controls.js script is included:
<script language="JavaScript">
var myWindow;
var controlForm;
function onPageLoad() {
myWindow = document.getElementById('iframe1');
controlForm = document.getElementById('ControlForm');
}
</script>
<script language="JavaScript" src="control.js"></script>
That should stop eclipse from complaining, but the execution will be the same.