*SOLVED* Javascript Variables passing to external js file?

Ravinos · Post by **Ravinos** » Sat May 28, 2011 5:53 am

I've run into another problem. I have my main page with some javascript code. The code produces JS variables from PHP and I want to use those variables in another external JS file. Since external JS files cannot have PHP code in them I need a way for IE to actually read variables used in the external file.. example:

Main.php

Code: Select all

<script>
var testVar = "<?php echo '$testphpvar'; ?>";

callExternalFunction();
</script>

external.js

Code: Select all

function callExternalFunction(){
alert(testVar);
}

One would think this is simple....the above will work in IE but the only way to get it to alert in Firefox is is to remove the var from var testVar = "<?php echo '$testphpvar'; ?>";. It of course breaks it in IE... How can I get it to work in both.

Post by **Jackolantern** » Sat May 28, 2011 6:08 am

I am kind of confused. This is in the same page, right? Why do you need to re-generate the variable in the external file? To my knowledge external JS files act as if they were "read-in" to the HTML page where they are included, kind of like PHP include files. I am not 100% sure about this, but can you just have your in-sheet JS code generate the value from PHP into a variable first, and then include the external JS file and use the same variable? I have never had a reason to try that myself, so I really don't know if it would work, but it seems like it might.

Post by **Jackolantern** » Sat May 28, 2011 6:14 am

Ok, I tried this and it works fine:

main page

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Jake Stantz" />
    <script type="text/javascript">
        var thevalue = "Hello world";
    </script>
    <script type="text/javascript" src="externalfile.js"></script>

	<title>Untitled 3</title>
</head>

<body>
Time to try it.


</body>
</html>

externalfile.js:

Code: Select all

alert(thevalue);

Running it results in an alert box coming up that says "Hello world", so it effectively used the same variable in both locations.

Ravinos · Post by **Ravinos** » Sat May 28, 2011 6:17 am

I could....and that is what I'm doing now.....but my page is literally 50kb in JS code alone. I want to split off the functions onto an external sheet for better organization. So for instance when a player clicks the to attack with a special ability, it will go and fire off that specific function on the external sheet. I have 10 different attack abilities right now and it's making the main page really...really ugly.

Theoretically it works but internet explorer hates when you leave the var off of javascript variables.

*Update*

Tried your code above and it works very well. However it doesn't work with the jquery library. I guess that is the actual issue. As soon as I placed the code into the standard below:

<script type = "text/javascript">
$(document).ready(function() {
});
</script>

It stopped working in Firefox unless I remove the var and then it stops working in IE.

Xaleph · Post by **Xaleph** » Sat May 28, 2011 12:42 pm

It doesn`t work because of scope. The jquery object is not global, in fact it`s bad to have global objects. If you are using the $(document).ready() you shield the jquery object. Because the .ready() is a function, and javascript has function scope. So it will not work. And that`s a good thing. hehe.

Now, you can pass in an object where all variables can be mutable. If you make an object where you set all your variables, you only have to create a function which accepts that. That way you can set the object, pass it to jquery and work with it.

Ravinos · Post by **Ravinos** » Sat May 28, 2011 3:42 pm

So it's starting to look like i'm going to have section of code that is at least 200kb in size because what i want to do isn't possible with Jquery...I'd have to pass every single variable being used in the function as an argument to that function which is going to increase the size even more.

I really want to have a library of the skills with their own functions completely and totally scripted. Right now it's just a generic script that fills in the blanks from the php variables. The only problem making a universal generic script is extremely difficult given the wide variety of what the abilities do. Some are just outright attacks, some leech health, some debuff the target, some slow the target, some put damage over time effects on the target.

In practice I have gotten all of these to work so long as I set up a new function for each skill inside the JQUERY scope. But like I said....with 30+ unique abilities it's going to clutter up the page bad.

Xaleph · Post by **Xaleph** » Sat May 28, 2011 7:21 pm

How about morphism? What is the common denominator? How can they be grouped? If you create an Atack object, there are not many specifics. However, you have damage dealing atacks, leech atacks, so that`s 2 inheriting objects. if you have about 4 to 5 inheriting objects, you can pretty much cover all atacks right? Same goes for healing. Some are instant heal, others are healing over time, or status remover/buffer. If you categorize your skills, you can narrow it down to a few objects. One thing to remember, allways look for the things they have in common. If this is the case, it belongs to the parent object. If not, it`s a specific.

The whole reason to have "classes" or "professions" and "atack types" is to abstract it.

Ravinos · Post by **Ravinos** » Sat May 28, 2011 8:40 pm

I guess I'll have to do it this way. After two days of trying to figure out how to get what I wanted working I guess I'll have to do it this way...which is similar to how I had it set up originally.

*Update*

I've reorganized my abilities to have every single status effect in the table and my javascript to make use of them all. If the ability gives a response of 0 to the script it just ignores that part of the ability. I was way over thinking it as is my reoccurring problem

Ravinos · Post by **Ravinos** » Mon May 30, 2011 5:27 am

Okay I figured out finally how to do what I originally wanted to do here is an example for anyone looking for the same. This allows you to call variables from an external js file and import and run them anywhere inside the main jquery code. Of course you will have to add external.js as a source.

internaljquery.php

Code: Select all

$(document).ready(function() {
testingVar = "This is a test!";
externalCallTest();
});

external.js

Code: Select all

(function($){
  externalCallTest = function() {
   	alert(testingVar);
  };
})(jQuery);

*UPDATE*
Okay so the above works in everything if you make all variables global however of course IE has a fit if the word isn't var isn't in front of everything. So I'm pretty much where I started.

Xaleph · Post by **Xaleph** » Sat Jun 04, 2011 2:25 pm

Good for you. However, what you also could have done is:


var myObject = {};

myObject = {
name : "Petey",
age : 25,
attribute : "strength",
skill : "Double Dash",
etc : etc
}

// both work
$(document).ready(function(){
// YourSiteObject.init(myObject);
YourSiteObject.init();
});

SOLVED Javascript Variables passing to external js file?

SOLVED Javascript Variables passing to external js file?

Re: Javascript Variables passing to external js file?

Re: Javascript Variables passing to external js file?

Re: Javascript Variables passing to external js file?

Re: Javascript Variables passing to external js file?

Re: Javascript Variables passing to external js file?

Re: Javascript Variables passing to external js file?

Re: Javascript Variables passing to external js file?

Re: Javascript Variables passing to external js file?

Re: SOLVED Javascript Variables passing to external js file?