I've discovered a scenario where Safari 1.3 (I need to make my stuff
compliant with 1.3+) gets confused about the scope of local variables
WITHIN functions that were created in dynamic script blocks. I've made
this example where function def has a local i variable in a loop, and
it calls function abc which also has a local i variable in a loop. What
happens is that Safari is not respecting the scope and is allowing the
called function to corrupt a local variable in the parent function
Here's the whole test page including html tags. If you try it you'll
see that IE and Gecko both produce the output "in abc" twice, because
the def function correctly gets to call abc twice. On Safari, i gets
corrupted, and abc only gets called once... Any ideas what I can do to
prevent this? Code:
The very simple code (below) works fine in Safari (and Chrome, Firefox etc.), but it doesn't work in Mobile Safari. Why?(You can find a working example at: http:[url]....)
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>[code]......
I'm trying to write an 'each' function for a JavaScript array that behaves like Ruby's Array#each. (It doesn't matter if you know Ruby to help with this question.)
My problem is the scope of 'this' inside the iterator callback. I would like it to be the same as the object that called the each() on the array. Right now I have to do that with a closure or an explicitly-passed 'this' scope. For example:
Array.prototype.each = function( inScope, inCallback ){ for ( var i=0,len=this.length; i<len; ++i ){ inCallback.call( inScope, this[ i ], i ); } }
Inside the each() function, arguments.callee.caller would give me a reference to the showInfo function object. What I am looking for is a way to access the scope of the 'this' receiver within that particular invocation of showInfo(), so that I can use it in place of inScope without having to pass 'this' each call.
In the method nextImage, I can't figure out how to access thumbs. It keeps coming back as undefined. (Using Firefox)
function runPortal(portal_number){ // there are multiple runPortals on each webpage this.portal = document.getElementById('portal'+portal_number); // represents the div that holds the images this.thumbs = this.portal.getElementsByTagName('a').length; // represents all the images within the div that will be rotated this.length = this.thumbs.length; // that's how many images will be rotated // Hide everything for (var j=0;j<this.thumbs.length;j++){ if (j==0) continue; // Don't hide the first one this.thumbs[j].childNodes[0].style.display = 'none' } this.nextImage = function (){ // there are a fixed number of images to rotate. Start over if (this.i >= this.length){ this.i = 0; } // One fades away, the next appears Effect.dglPuff(this.thumbs[this.last].childNodes[0], {duration:.6, from:.7}); Effect.Appear(this.thumbs[this.i].childNodes[0]);
// iterate to the next image for the next run this.last = this.i; this.i++; } // Set up the image rotator // here is where I started guessing // thumbs needs to belong to the object rotator, I guess.
this.rotator = new PeriodicalExecuter(this.nextImage, 4); // This object runs the function every 4 seconds this.rotator.portal = document.getElementById('portal'+portal_number); // represents the div that holds the images this.rotator.thumbs = this.rotator.portal.getElementsByTagName('a'); // represents all the images within the div that will be rotated this.rotator.length=this.length; // that's how many images will be rotated this.rotator.i=0; // the counter for what image we're one this.rotator.last=0; // the counter for the previous image
function attributes() { var attr1 = arguments[0] || '_' var attr2 = arguments[1] || '_' return ( function (el1, el2) { var value1 = el1[attr1] + el1[attr2]; var value2 = el2[attr1] + el2[attr2]; if (value1 > value2) return 1; else if (value1 < value2) return -1; else return 0; } ); }
var a = [ { a:'smith', b:'john' }, { a:'jones', b:'bob' }, { a:'smith', b:'jane' } ]; a.sort(attributes('a', 'b')); for (var i =0; i < a.length; i++) { document.write(a[i].a + ', ' + a[i].b + '<br>'); }
My question is, are attr1 and attr2 guaranteed to exist through the lifetime of a.sort(attributes('a', 'b'))?
As I understand it, the anonymous inner function reference I am returning is a property of attributes(). As such, when I return a reference to the anonymous inner function, the outer attributes() function must continue to exist (as must attr1 and att2) until there are no further references to the inner anonymous function.
As a result, there is no danger of attr1 or attr2 "disappearing" during the repeated calling of the anonymous inner function.
Is my explanation basically correct, or am I deluding myself and I'm just lucky that the garbage collector hasn't recovered attr1 or attr2 while the sort is still going on? In other words, is the behaviour I'm seeing consistent and predictable, or should I change my approach?
I have a script in which a function launched by a START button continuously calculates and writes a value to a text box. The calculation is done in a for loop. In the loop is a conditional that is a global variable, a boolean. If the boolean is true, break ends the loop (or is supposed to!). A STOP button has an onclick function that sets the global variable to true.
What happens, though, is that the function for the STOP button is not executed until the for loop reaches the maximum value set for i. Anyone know how you can get one button to stop a process started by another?
I had a need for a two dimentional array. Looking for this solution, I ran accross a statement than all Javascipt arrays were arrays of objects. So I created a function prototype, at least thats what I was calling it:
Next I did: var myobject=new objRow("1", "1234 Main St.", "Apt 101");
At this point I was able to see myobject.addr1 or any other variable in the object instance.
Now I added this object to a table. var aryTestTable= new Array(); aryTestTable[0]= myobject; At this point I could see aryTestTable[0].addr1 Next I tried an additional object myobject=new objRow("1", "1234 Main St.", "Apt 101"); //with different data And added it to the table aryTestTable[1]= myobject; Where I could see: aryTestTable[1].addr2 or any other variable.
so far so good. Then I started the actual application code where I was reading a database table and creating the objects and adding them to the table. This was in a for loop wherein the myobject=new objRow("1", "1234 Main St.", "Apt 101"); was instantiated.
After the for loop was finished, I could not access the data in the table - undefined.
So my questions are: Have the my object instances popped off the stack? and What is the alternative way to implement this table of rows of values.
I'm showing a form in a Simplemodal dialog in combination with ajaxForm() to redirect the resulting page to another DOM element. The success function of ajaxForm() closes the modal dialog.The resulting page in the other DOM element has no access to the jquery function $(). When I load a page using ajax into the DOM element there is no issue access the jquery function, this only happens when I redirect the resulting page from the ajaxForm() function.
I've just realized that in Mozilla pointer variables always have local scope in a function. Unlike IE. I wondered if Mozilla was able to do it in some other way? readXML() is an init() function which might be a constraint - I'm no javascript expert.
// The following won't work in Mozilla.
var record;
function readXML() { record=xmlDoc.getElementsByTagName("record"); }
LiveSearch.prototype.initialize = function() { $("#thebutton").mousedown(function() { //when we click the button alert(this.theglobal); }); }
$(document).ready(function() { var objSearch = new LiveSearch("globalvalue"); }); </script>
On page load I create a new LiveSearch instance and it assigns theGlobal = "globalvalue" and proceeds to initialize(); At this point Im using JQuery to setup an onmousedown event on a button on my page with id="thebutton". When I click the button the alert comes back with 'undefined'. How can I get direct access to my theglobal variable? Code:
I think I've had JavaScript variable scope figured out, can you please see if I've got it correctly?
* Variables can be local or global * When a variable is declared outside any function, it is global regardless of whether it's declared with or without "var" * When it is declared inside a function, if declared with "var", it's local, if not, it's global * A local variable that is declared inside a function is local to the whole function, regardless of where it is declared, e.g.:
function blah() { for(var i ... ) { var j ... }}
i and j will both be visible within blah() after their declaration. * the notion of "function" in this context also applies for this kind of construct:
var myHandler = { onClickDo: function() {
in the sense that whatever one declares inside onClickDo with "var" will only be visible inside onClickDo. What else, am I missing anything?
If you run it, the alert messageis "pic2", so jquery sees the entire document, but is there a way to easily restrict it to the sub-tree under the current node (in this case the sub-tree under the span node, since that's what was clicked)? Yes, I can do something like alert($("#div1 img:eq(1)").attr("alt")); //undefined as expected
But I am looking for a solution that's more dynamic, so I don't need to hard code #div1.
I will do my best to explain this one and sorry if the title isn't that great. I am trying to write a javascript object and it is my first time, so it isn't that great and of course I have trouble.The object is suppose to populate a dropdown (popMake()) and then add an onchange event (checkValue()) to it. It seems to do this fine but when the select box is changed, I no longer have access to object, it's parameters, etc. In checkValue I don't have access to this.currentMake which was just set or anything (already said that).I believe it has something to do with scope (possibly closure, but I didn't see how it would fit her). So how can I do something like this and still have access to the object after the click?Code below:Code:
window.onload = function() { var mm = new makeModel(); mm.popMake();
In my UI framework, I have an event handler - just like many frameworks do. My handler is a static object, and contains methods to take care of things like mouse events, etc. However, upon adding a method to handle onfocus today, I ran into a very odd problem in Firefox. I've put together an example page that generates the error:
I've created a jQuery script that uses a switch statement. However, my experience with it, relative to variable scope, doesn't seem to follow the logic.According to the JavaScript/jQuery theory, a global variable was accessible (meaning read & write) throughtout any function within any script (one that page).However, apparently that theory wasn't completely true as it pertained to switch statements that contained variables. To illustrate my case in point, I've included a simplistic version of my code:
As shown, the variable "testVar" is not accessible from one case to the next case .Furthermore, to add insult to injury, I am seeing the same behavior within the conditional if else statement counterpart to the switch statement.
Here's the situation: I have a javascript object for controlling a custom DHTML scrollbar. So that I can use more than one on a page, the event listeners need to be passed a reference to the particular instance of the object that each needs to connect to, but as I discovered the hard way, inside an event listener, 'this' returns a reference to the DOM object throwing the event, rather than to the JS object. Short of coming up with a linked list of different objects and having the event handler search through it for the right object when an event is generated, then writing a reference to that object to some global variable, is there any convenient way to tie this together? I hope I've made myself clear enough...
I'm having trouble getting the following code to work properly. Every time I try to access the private testing variable from the priveleged MyMethod it gives an error. Says it can't find testing and that it has no properties so I can't run a push() command on it.
function MyClass() { var testing = new Array();
// define the method function MyMethod() { this.testing.push("hello"); }
// make the method priveledged this.MyMethod = MyMethod; }
// a test function it ensure the variables declared here are isolated function Start() { var myClass = new MyClass();
i'm having a slight problem understand how to use this.myVar in an object. And I use prototype.
[Code]...
Does anyone know how I can use this.myvar within the function. I have tried binding and bindAsEventListener.But nothing I've done has been able to get the right value!
I have this web application where users are able to fill out and submit reports. The reports and scripts are part of a whole system, that is, they are used on a couple of different clients written in both vb and c#. This is the web-version of those clients.The scripting language is javascript and is executed using different script engines on the different systems. But for the web-version it is just executed in the browser.The different fields in the report can be accessed by typing:ID1.value. To get ID1 to apply for the input-field with id ID1 I had to in the initfunction of the page write a window["ID1"] = document.getElementById("ID1");
But my problem is when this element change. Cause in the report I have a special element that in the browser is translated to a table-element with a report-field in each cell.When I switch the current row, I need to update the window["ID1"] to equal the correct report field on the selected row. But when trying to access the new variable ID1 from a buttons onclick event it is undefined.<input type="text" id="test" onclick="alert(ID1.value);" />What I think happens is that when the page is first drawn the onclick event is created and as I understand, variables inside an event has the same value as when the event was created.
So if ID1.value was something when the page was created it will be the same when it is called even if the value of ID1 is different. And that seems to be the case. When I debug the page, before entering the event, ID1.value has the correct value while inside the event it is undefined and after the event it has the correct value. If I write window["ID1"] correct value is also shown.But a weird thing is that in another place in the code I had the same problem but instead of having the code inside the onclick event I first had a global function changeActiveRow and inside that I had an eval, eval(document.getElementById("ID1_script")) where ID1_script is a hidden element whos value is a script using ID1.value and that works.
I am trying to convert some of my javascripts into a class and am running into difficulties which i think are related to variable scope.
Basically I have a constructor function for a calendarInput class that takes 4 parameters, the first is a reference name/number for this input. I also have some functions for importing my PHP classes into Javascript using AJAX (properties only. still trying to get methods working but that's another story!). The relevant function is called call_object_method(classname, methodname, createparams, methodparams, post, callbackfunction). This creates an instance of the specified PHP class using the parameters in createparams. It then calls the specified method using the parameters in methodparams. The result is passed back to the javascript function specified in the callbackfunction parameter (ie the value of xmlhttp.onreadystatechange is set to callbackfunction before xmlhttp.send() is called)
The function i am trying to fix is called show (x,y) which creates the html for the calendarInput and displays it at co-ordinates x, y.
this.showcallback = function() { alert(this); <!--//code to create html//--> }
}
I know i've cut out most of the innards of this. This is because I have already tested these functions and had the calendarInput working outside of a class, hence am pretty sure that this is ok (plus it runs to almost 1000 lines these days!!). My problem is that when I call the show method, the alert on the first line of the callback function returns the function showcallback instead of (as i was expecting) the instance of the calendarInput object. Whilst this kinda makes sense I can't figure out how to reference the Object instead. I have tried 'this.parent' but this returned undefined. I have tried changing the way i reference the callback function (ie the final parameter of call_object_method) but no joy.
New to javascript/jquery and have a question regarding scope. I want to bind an event within my class so it calls one of the class methods. The problem I run into is that the event handler is a anonymous function that runs outside the scope of the class, therefore it doesn't see the class methods or properties.
Is there a proper way to deal with this: Sample code: function myObject(tag) { // properties this.myvar = 'test'; this.tag = tag; // methods function sendRequest() { alert(this.myvar); } // initialization $(this.tag).click( function() { this.sendRequest(); });}
I'm having trouble letting functions I defined in jquery read javascript global variables I defined elsewhere.. for example I have a function defined within my jquery
$(document).ready(function(){ function performTabSlide() { // do something with currentPosition;
I've recently started developing javascript using jQuery and so far I'm really enjoying it.Being a professional programmer (mainly C, C++, java and python) there is one thing that's been puzzling me regarding variable scope and unnamed function declarations. Let me exemplify:
------------------------ var sum = 0; $(xmlobj).find("item").each(function(){
