JavaScript - A Maybe More Complicated Scope Problem

I have a popup in one of my pages which is populated via AJAX call with a list of click-able options, this is all good, however I am now trying to display a javascript tree in the popup but it can not seem to 'see' the javascript routine that creates the tree, even if I hard code that into the popup itself, so the tree starts with d=new dTree() , and javasript is telling me that 'd' is undefined.

the code works fine in a regular webpage but when pulled up in a AJAX generated popup it cant see squat? I tried parent.dTree() etc but to no avail.

Is this because the javascript is loaded after the main page load via AJAX? if so is it accessible in anyway ?

Let's say I'm defining an object and I want the constructor to take one input and ten save it. I'd like to do something like this:

function apple(color) {
this.color = arguments.color;
}

But of course that doesn't work because arguments isn't a scope. My question is, is there a scope I can use. What I've been doing instead is this:

function apple(new_color) {this.color = new_color;}

But that just seems less than perfectly pretty.

I have devised the following constructor based loosely on the observer pattern
Code:

Observer = function (ConditionIsTrue , codeToExecute){
            
            var
                observer = this ,
                ConditionWasMet = false ,
                
                CheckIfReady = function () {
                
                    if (ConditionIsTrue()) {
                        
                        if(!ConditionWasMet)
                            codeToExecute();
                        
                        ConditionWasMet = true;
                    
                    }
                    else {
                        if (ConditionWasMet) ConditionWasMet = false;
                    }
                };
            
            Loop.call(observer , CheckIfReady)
            observer.speed(1)
        
        };

It works fine, no problems that I know of...

But the most interesting thing happened when I attached it to my lib and ran it through the http://closure-compiler.appspot.com/home compiler
Code:

$['Observer'] = function (//...etc...

For the first time the compiler has added something to my global scope
Code:

var i=!1;
window.$=function(){//...etc...
...
Observer:function(j,k){var h=i;Loop.call(this,function(){j()?(h||k(),h=!0):h&&(h=i)});this.speed(1)}
}
})();

Can someone explain to me why the var ConditionWasMet had to be exported to the global scope?
Was it already in the global scope? That would confuse me considering the observer can be called from multiple instances without conflict...
But I don't want any surprise conflicts jumping out at me later, I appreciate the consideration.

I don't even know where to begin with this one.
I don't know the terminology for what I am trying to do here, and the sample code is too big and cluttered to post. So I put together the following to illustrate the structure of the object that I am trying to overcome. I have a method chain within an object, and I need to override one of the methods, but when I do so I loose access to the private methods and properties of it's containing object... I googled this for several hours, and the best that I can come up with is that I need to somehow use call() to access the scope of another object. But I don't understand call() or apply() at all, and I've read many tutorials on those...

Code:

window.oModule['Report'] = (function(){
    var _privateProp1 = '' ,
        _privateMethod1 = function(){
            // ...
        } ,
        _publicMethod1  = function(){
            // ...
        } ,
        _publicMethod2 = (function(){
            var _sub_privateProp1 = '' ,
                _sub_privateMethod1 = function(param1,param2){
                    // ...
                } ,
                _sub_publicMethod1  = function(){
                    // ...
                } ,
                _sub_publicMethod2 = function(start , end){  // I need to replace this method from somewhere else
                    var _neededValue = '';
                    
                    for(var i = start ; i<end ; ++i) {
                        // ...
                        _neededValue += _sub_privateMethod1(arg1,arg2)
                    }
                    return _neededValue;
                } ;
            
            return{
                '_sub_publicMethod1' : _sub_publicMethod1 ,
                '_sub_publicMethod2' : _sub_publicMethod2
            }
    })() ;
    
    return{
        '_publicMethod1' : _publicMethod1 ,
        '_publicMethod2' : _publicMethod2
    }
})();

alert(oModule.Report._publicMethod2._sub_publicMethod2(1,5))  // This works fine

oModule.Report._publicMethod2._sub_publicMethod2 = function(start,end){  // Doing this modifies the output of all expressions that already call the sub method (which is what I need)
    var _neededValue = '';
    // ...
    return start+end
}

alert(oModule.Report._publicMethod2._sub_publicMethod2(1,5))  // This will alert 6 (as intended)


oModule.Report._publicMethod2._sub_publicMethod2 = function(start,end){  // Doing this modifies the output of all expressions that already call the sub method (which is what I need)
    var _neededValue = '';
    for(var i = start ; i<end ; ++i) {
        // ... different set of instructions
         _neededValue += _sub_privateMethod1(arg1,arg2)  // This line causes an error: _sub_privateMethod1 is undefined
    }
    return _neededValue
}

I am doing project exercises from a JavaScript book for a college class. I am creating a brand new .html document for each project.

I was under the impression that each unique page name would have its very own cookie scope. But to my surprise it seems adding/loading cookies using 'document.cookie' doesn't assign new cookies to each page. I am seeing that when I try to load document.cookie in new .html pages there are cookies that were already created in past pages in the document.cookie property/string.

So whats the 'default' scope of a document cookie. Do I have to set the domain property to get unique cookies for each .html page I create?

Thanks for the help.

Edit: Okay, it seems that cookies have a default scope of the folder your .html page resides in and all sub-folders that your page resides in. I moved my project folder so that it was a sibling of my projects folder and it got its own cookies that way.

Recently I had an issue while trying to copy an array:
I couldn't understand why modifying the new array caused modifications in the old array
Old Pedant cleared that up nicely for me in http://www.codingforums.com/showthread.php?t=240020

Now I'm trying to understand closures, and scope and all that fun stuff thanks to Venegal's great tutorial at reallifejs.com and I have the following:
Code:

<script>
    window.USER = (function(){
     
     var Employees = [['Alex',1,'ft',1],['Olivia',2,'ft',1],['Brenda',3,'ft',1],['Michael',4,'ft',1]];
     
     var info = ['Start String'];
     
     var Setup = function(){
       }
     
     return{
      CheckLogin : function(login){
       this.info = Employees[login];
       },
      
      Reset : function(){	
       },
      
      info:info,
      Emp:Employees
      };
     
     })();
</script>

And I think I got all the kinks worked out, but there was one thing that I don't understand...
Based on my other thread I expected the modification of USER.info to overwrite values in USER.Emp
Don't get me wrong, I didn't want that to happen, I am just confused as to why it didn't

I used the following buttons to test the values of USER.info and USER.Emp but again, writing to USER.info did not overwrite anything in USER.Emp....
Code:

<script>
document.write('<button onclick="alert(USER.info)">USER.info read</button>');
document.write('<button onclick="USER.info=\'Test String\'">USER.info write</button>');
document.write('<button onclick="alert(USER.Emp)">Employees read</button>');
document.write('<button onclick="USER.CheckLogin(0)">Check Login</button>');
</script>

So what I guess I'm asking is why? Or maybe: what is happening here, and how does it differ from my last issue? Was it maybe a scope issue? Or maybe something more sinister...?

Question: if I declare a variable in on js fiile, is this available to another js file that is loaded?

Answer: yes, it's available (unless inside of a function or something)

BUT: does it matter WHERE I declare this variable??

Let's say, I have the following in my HTML file:
<script src="script/main.js"></script> And then at the very bottom of my HTML page before the </body> tag I have:
<script type="text/javascript">var myvariable = "Sample Data";</script> So, is myvariable available to main.js?

In simple tests I've done, yes it does seem to be available

But... what if I have a lot of other js code running in between
Does this change anything?

Thanks


OM

This is a bit of a strange one. I have been trying to call a function in a child object from the parent object but the child seems to be going out of scope in onbeforeunload function. These function calls work outside of a onbeforeunload, so it only fails when called in onbeforeunload. I can fix it by making the child object a global but I was trying to avoid that. Anyone know why my childobject is out of scope when called in onbeforeunload? Notice I call that same function in windows onload event and it works fine. Here is the code (I have simplified as much as possible to just show the error):

Code:

<html>
   
   <head>
   <title>Broken Page</title>    
	  
<script language="javascript" type="text/javascript">
	
	var myparent;
	
	function windowLaunch()
	{
		myparent = new parent();
		myparent.getchildvalue();
		window.onbeforeunload = myparent.getchildvalue;
	}

	function parent()
	{
		this.mychild = new childobject("myinput");
		this.getchildvalue = function()
		{
			var tmpval = this.mychild.returnvalue();
		};

	}

	function childobject(thename)
	{
		this.myprop = thename;
		this.returnvalue = function()
		{
			return (document.getElementById(this.myprop).value);
		};
	}
	
</script>
   </head>
   
   <body id="thebody" onload="windowLaunch();">
    <div id="outerdiv">
            <span title="This Input Box">My Input:</span><br />
            <input id="myinput" style="width: 290px"/>
    </div>
   </body>
   
</html>

I have been researching like crazy, and I can't find any information that seems to fit what I need!

I am looking for a solution for the following problem:
We have products that have multiple parts that can be colored separately from each other. In other words, if it was a shirt, the sleeves, graphic, front panel, pocket, and back panel could all be a different color. We have a range of color options available that can be up to 50. So, if I made a single image for each combination, we're looking at thousands of images here. How can I use scripts to build a page that can pick all of these options and combine them together in a product image for the customer? Is it even possible?

I have tried layering 4 0r 5 images with relative and absolute positioning, and doing an image swap...but that is not something I can see us using on a regular basis. I must be missing something here. We've been looking around at other sites like Victorias Secret and Old Navy, and like their color changes....but theirs seem to only involve the single color layer.

Thanks for any advice!

Hello Everyone.

I have a bit of an issue trying to get one link to open more than one link at a time. Perhaps you can either help me or suggest a better way to do so.

I have created a table with hidden rows until a user clicks an open in either cell. Once the user clicks a cell, the next row of opens opens up.

What I am having trouble with is getting the table headings to be opened once hidden. Each set of options needs a title or question for the user to understand what choices to make. (these are the td's with colspan of 2)

I am using javascript to show and hide the cells I have so far, and I can hide them just fine, I just want to show both sets of cells once the user clicks one link. its a bit complicated because i have functions all over the place

Any help you give me would be greatly appreciated. Alternatively, I can be reached on Y!: tmdela

Here's the code...:

<html>
<head>
<script language="JavaScript">
function showCell() {
document.getElementById('cellName').style.visibility='visible';
}
function showCell2() {
document.getElementById('cellName2').style.visibility='visible';
}
function showCell3() {
document.getElementById('cellName3').style.visibility='visible';
}
function showCell4() {
document.getElementById('cellName4').style.visibility='visible';
}

function showCell5(){
document.getElementById('cellName5').style.visibility='visible';
}
function showCell6(){
document.getElementById('cellName6').style.visibility='visible';
}
function DoAllThese12(){
showCell();
showCell2();
showCellHeader();
}
function DoAllThese34(){
showCell3();
showCell4();
}
function DoAllThese56(){
showCell5();
showCell6();
}
</script>


<!--------------------------------CSS begins here, hides the table-->
<style type="text/css">
#cellName {visibility:hidden; }
#cellName2 {visibility:hidden; }
#cellName3 {visibility:hidden; }
#cellName4 {visibility:hidden; }
#cellName5 {visibility:hidden; }
#cellName6 {visibility:hidden; }
body{
font-family:Arial, Calibri, Sans-serif;
font-size: 15px;
}
a{
font-family: Arial, Calibri, Sans-Serif;
font-size: 11px;
color:#000;
}
a:link{text-decoration:none}
a:visited{text-decoration:none; color:#000;}
a:active{text-decoration:none}
a:hover{text-decoration:none;}

a:visited {
color: #000;
}
#container{
position:absolute;
margin:0 auto;
left: 30%;
top:0px;
}
#maincontent{
width: 420px;
margin: 0 auto;
}
#table{
margin:0 auto;
width: 450px;
}
td {
width: 50%;
border:0px;
}
.pane-list {
margin: 0;
padding: 0;
list-style: none;
}
.pane-list li {
background: #f9dfec;
padding: 10px 20px 2px;
border-top: solid 2px #FF0066;
cursor: pointer;
}
.pane-list li:hover {
background: #F6A8B6;
}


</style>
</head>

<!--------------------------------------------body-->
<body>
<div id="container">
<div id="maincontent">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</h3>
<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua
</p>
<BR>
</div><!--maincontent-->

<!-------------------------------------Container for table-->
<div id="menu">

<!-------------------------------------Line 1 of table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?-->
<div id="table">
<center>
<table border="0" id="table">
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?
</td>
</tr>
<td>
<ul class="pane-list">
<li>
<h3>
<a href="#" onclick="DoAllThese12()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</p>
</a>
</h3>
</li>
</ul>
</td>
<td>
<ul class="pane-list">
<li>
<h3>
<a href="http://www.google.com">My cancer has spread.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</p>
</a>
</h3>
</li>
</ul>
</td>
</tr>

<!------------------------------------Line 2 of Table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua-->
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?
</td>
</tr>
<td id="cellName">
<ul class="pane-list">
<li>
<h3>
<a href="#" onclick="DoAllThese34()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a>
</h3>
</li>
</ul>
</td>
<td id="cellName2">
<ul class="pane-list">
<li>
<h3>
<a href="http://www.google.com">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a>
</h3>
</li>
</ul>
</td>
</tr>

<!------------------------------------Line 3 of Table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua-->
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?
</td>
</tr>
<tr>
<td id="cellName3">
<ul class="pane-list">
<li>
<h3>
<a href="#" onclick='DoAllThese56()'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a>
</h3>
</li>
</ul>
</td>

<td id="cellName4">
<ul class="pane-list">
<li>
<h3>
<a href="#" onclick="DoAllThese56()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a>
</h3>
</li>
</ul>
</td>
</tr>

</table>
</center>
</div><!--table-->
</div><!--menu-->
</div><!--container-->
</body>
</html>

Hi all,

I'm just starting out with Javascript as a development language and this will probably be a relatively simple problem for someone to solve for me.

I am trying to access a variable (this.bodyEl.innerHTML) from within a function but get an error message indicating that it is "undefined". I know that it is a valid variable because I call it elsewhere outside of the inner function itself.

I'm sure this is just a scope issue, but I'd welcome any suggestions on how to solve it with an explanation of where I've gone wrong if you have the time.

Here's the code:

Code:

    displayFeed: function(responseData) {
        this.bodyEl.innerHTML = "xxxx"; // I can see this
        var responseDoc = Presto.Util.parseXml(responseData);
        var items = Ext.DomQuery.select("/rss/channel/item", responseDoc);
        items.each(function(item, bodyHTML) {
            var rssTitle = Ext.DomQuery.selectValue("/title", item);
            var rssDescription = Ext.DomQuery.selectValue("/description", item);
            var rssLink = Ext.DomQuery.selectValue("/link", item);
            // but this results in an undefined error
            this.bodyEl.innerHTML = '<a href="' + rssLink + '">' + rssTitle + '</a><br/>';
        }); // end of items processing
    }

This is a fragment of the code from my script. The first access of "this.bodyEl.innerHTML" works fine, but the second access in the items.each loop doesn't and I get an undefined variable error.

Is this a scoping problem, and if so how is it best solved.

Thanks in advance, Innes (NZ)

Hey everyone,

I wanted to write my own script for a fade-in animation, since the ones I have found have got too many options or need some framework, which makes them unnecessarily big. I wanted to learn too.

Unfortunately, the code didn't work as I wanted, and I commented some things so as to find out what's happening.

The only function called from outside is fadeIn with a string as argument (in the example, this string is: d1296668690535). This is the code:

Code:

var fadems = 500;	// Anim. duration in milliseconds
var fps = 20;		// Frames per second

function fadeIn(elemId){
	var frames = fadems/1000 * fps;
	var delay = 1000 / fps;
	var incrOp = 1 / frames;
	
	//document.getElementById(elemId).style.zoom = '1';
	
	setOp(elemId, 0);
	
	for(i=1; i<=frames; i++){
		debugOutLn("(fadeIn for) elemId = " + elemId);
		setTimeout("setOp(" + elemId + "," + incrOp*i + ")", delay*i);
	}
}

function setOp(elemId, val){
	debugOutLn("(setOp) elemId = " + elemId + "; val = " + val);
	// document.getElementById(elemId).style.opacity = val;
	// document.getElementById(elemId).style.filter = 'alpha(opacity = ' + val * 100 + ')';
}

Code:

function debugOutLn(str){
	document.getElementById("debug").innerHTML += str + "<br />";
}

And this is the text it outputs (on Opera 11.01):

Code:

(setOp) elemId = d1296668690535; val = 0
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(setOp) elemId =  [object HTMLDivElement] ; val = 0.1
(setOp) elemId =  [object HTMLDivElement] ; val = 0.2
(setOp) elemId =  [object HTMLDivElement] ; val = 0.30000000000000004
(setOp) elemId =  [object HTMLDivElement] ; val = 0.4
(setOp) elemId =  [object HTMLDivElement] ; val = 0.5
(setOp) elemId =  [object HTMLDivElement] ; val = 0.6000000000000001
(setOp) elemId =  [object HTMLDivElement] ; val = 0.7
(setOp) elemId =  [object HTMLDivElement] ; val = 0.8
(setOp) elemId =  [object HTMLDivElement] ; val = 0.9
(setOp) elemId =  [object HTMLDivElement] ; val = 1

Why is an object reference assigned to what was previously a string?


Thanks for the help!

Hello... Thanks for reading...

I am getting an undefined error when i try to get a value from this array in the interior loop...

Code:

// This is the array I am trying to access
AuditTable [0] = ["Visio Modifed date","Word Modified Date","User Status","User Comment","Last Audit","Audit Status","Audit Comment"]
AuditTable [1] = ["11/23/2009 8:52:18 AM","missing","OK","user comment number 1","1/1/2009","ok","audit comment number 1"]
AuditTable [2] = ["11/24/2009 12:21:19 AM","missing","Out of Date","Changes from 2008 not implemented","1/2/2009","Out of Date","needs update"]
AuditTable [3] = ["11/22/2009 9:24:42 PM","missing","Incomplete","Document doesnt cover all possibilities","1/3/2009","Inadequate","needs update"]

I have hard coded values and had success such as:
Code:

data = AuditTable[1][0]

But when I put the vars associated with the loop in I get an undefined error - AuditTable[i] is undefined:
Code:

// produces error
data = AuditTable[i][j]
//Works but retrieves wrong data
data = AuditTable[j][i]
//Works but retrieves wrong data
data = AuditTable[1][i]
//Works but retrieves wrong data
data = AuditTable[j][2]

I must be trying to access the array incorrectly or something... I have defined all the vars, and tried many combinations, alerted the values of both vars so I can prove it is not a scope issue... Am I missing something obvious? Thanks much...

Code:

var reportArray=new Array();
var reportData, title, subTitle, data;
		

for(i in parmarray)// loop thru AuditTable array and get values
		{
			title = '<div style="font-family:verdana; font-size:14px; font-weight:bold; margin:25px 0px 5px 30px">';
			title += namearray[i][0];
			title += '</div>';
			reportArray.push(title);//Take compiled variable value and put it into array
			
			for(j=0; j < AuditTable[0].length; j++)// loop thru AuditTable array and get values
			{
				
				subTitle = AuditTable[0][j];//points to first row of AuditTable where the labels are
				data = AuditTable[1][0];//points to the current row where actual data is
				
				html = i + j +'<div style="font-family:verdana; font-size:12px; color:#696969; font-weight:bold; margin-left:30px;">';
				html += subTitle;
				html += '</div><div style="font-family:verdana; font-size:12px; color:#a9a9a9; margin-left:30px; margin-bottom:10px">';
				html += data;
				html += "</div>";

				reportArray.push(html);// put results into array
			}		
		}

Hi pals,
I am really tired in this problem of event keyup. I given same in my keyup function like:

$(document).ready(function () {
alert("GGG"+parseInt(jQuery.browser.version)); //To display test value working
$("#find_text").keyup(function(e)
{
if(e.which == 13) {
alert('Enter key was pressed'); //enter Here
alert("FFF"+parseInt(jQuery.browser.version)); //Here got Error
}
});
});

I got Error : jQuery is not defined
alert("FFF"+parseInt(jQuery.browser.version));

I use keycode,which , but no help, It's Work nicely in Chrome Browser but not in FF.
Please give a Solution reply ASAP, I am really Tired.The code enter the Condition
But that jQuery part make error.

Thankfully
Anes P.A

This is a program that calculates discriminant/number of solutions for a given quadratic equation.. it all works, but the number of solution field is not filled, so i think i did something wrong on my if else statements for it.. help!


Code:

<html>
<head>
  <title>Untitled</title>
</head>
<script type="text/javascript">
<!--    Begin
    function quad(form) {
    a = form.a.value
    b = form.b.value
    c = form.c.value
    form.Dis.value = (b * b) - (4 * a * c)
    If(form.Dis.value > 0)
    {
        form.NumSol.value = 2
    }
    Else;(form.Dis.value = 0)
    {
        form.NumSol.value = 1
    }
      Else
    {
        form.NumSol.value = 0
    }
   
    }
// End -->
</script>

<body><center>
<form name="form1">
<input type="text" name="a" size=5>
x^2 +

<input type="text" name="b" size=5>
x +

<input type="text" name="c" size=5>

<input type="button" value="Calculate"
onClick="quad(this.form)">

Discriminant: <input type="text" name="Dis" size = 7 />
Number of Solutions: <input type="text" name="NumSol" size = 7 />


</form>
</center>



</body>
</html>