Javascript object scope reference

[Rails junkie]

Hello All,

I am a newbie and trying to understand the variable scopes in JS. I
will try to explain my problem here and see if I make sense.

I created an object test.pgObject=function()
{
.........
this.param=param;
this.runOptions() {
this.buildList();
.......
}
this.buildList(){
this.param;
........
}
}

now i include this object js file in my other pages and initialize
object myobj=new test.pgObject();

then on same page, I have a <A> tag which onClick calls
"myobj.runOptions();" . It finds myobj.runoptions fine and object
reference is correct, however when it calls this.buildList , reference
of 'this' changes to window object instead myobj. then i get into
error because it does not find object with 'this' reference.

Is there anyways to do it correctly so that i don't run into problem
like this?

thanks

 

[David Mark]

Hello All,

I am a newbie and trying to understand the variable scopes in JS. I
will try to explain my problem here and see if I make sense.

I created an object  test.pgObject=function()
{
  .........
  this.param=param;
  this.runOptions() {
  this.buildList();
......}

this.buildList(){
this.param;
.......

}
}

Post real code.

now i include this object js file in my other pages and initialize
object myobj=new test.pgObject();

then on same page, I have a <A> tag which onClick calls
"myobj.runOptions();" . It finds myobj.runoptions fine and object
reference is correct, however when it calls this.buildList , reference
of 'this' changes to window object instead myobj. then i get into

The "this" identifier has nothing to do with scope.

 

[Rails junkie]

David,

Thanks. I think I mentioned the wrong thing here. Code is attached end
of this post.

If you see the code,onclick of <input type="button" "id="click"
value="Save" onClick="myobj.enableSearch();">
creates a DIV which has a element this.uid+"_save", onclick of that
calls this.RunFilter which is part of my myObj.
Probably if it's a single page insert everytime, I can somehow pass
create my links in DIV like myObj.runfilter()

but this DIV creation is part of generic code , whoever initializes
PGObect will get their own DIV created and all events of element in
the DIV should only point to it's own Oject?
Hope this makes sense. Please see the code below.

<script>
var myobj;

PgObject=function(module,filter)
{
var filterArray;
this.filter=filter;
this.module=module;
this.uid=1;
this.enableSearch=function()
{
this.searchWidget();
}
this.runFilter=function(filter)
{

var l_filter;
if (filter)
{l_filter=filter }
else {
l_filter=this.buildCriteria();

}

this.setExtParam(l_filter);
this.render();
return false;
}
this.buildCriteria=function()
{
var fltr=this.getFilterArray();
this.setExtParam(fltr);

}

this.setExtParam=function(l_filter)
{
this.defaultParam=l_filter;
}

this.getFilterArray=function()
{
//filterArray=new Array();
if ((this.filter) && (!filterArray))
{
filterArray=this.filter.split(",");
}
return filterArray;
}

this.searchWidget=function()
{
var srchStr="";
if (!document.getElementById(this.uid+"_searchsave")) {
var srchW=document.createElement('div');
srchW.id=this.uid+"_searchsave";
srchW.className="hide";
srchStr="<div class=\"hd\">Search Widget</div><div class=\"bd
\"><table><tr><td><span>Save As "+
"<input id=\""+this.uid+"_searchName\" type=\"text\" size=\"10\"/></
span>"+
"<A href=\"javascript:void(0);\" title=\"Save Search\" id=\""+this.uid
+"_save\" onclick=\"this.runFilter(this)\">"+
"<img src=\"./images/save.gif\" border=\"0\"></A></td></tr><tr><td>"+
"<span id=\""+this.uid+"_s-search-span\">My Saved Search<span id=
\""+this.uid+"_s-search-dd\"></span></span></td>"+
"<td><A href=\"javascript:void(0);\" title=\"Delete Search\" id=
\""+this.uid+"_dsearch\" onclick=\"this.deleteSearch(this)\">"+
"<img src=\"../images/jpg/delete_pg.png\" border=\"0\"></A></td></
tr></table></DIV>";
srchW.innerHTML=srchStr;
document.body.appendChild(srchW);
}
}
}

myobj=new PgObject('mypage','username=test');

</script>

<input type="button" "id="click" value="Save"
onClick="myobj.enableSearch();">

 

[liamgegan]

Yeah, post real code, what you've said is happening doesn't make a
great deal of sense in relation to the code you've posted. Perhaps the
problem is the scope of the call, do a search for function.apply if
nothing else.

L

 

[liamgegan]

Sorry, I replied before I saw your reply.

The problem is that your created div is a descendent of the window
object, not of the javascript object that created it. This may seem
like a bug or oversight until you realise that you're attaching the
object with the DOM object, not with your javascript object. To get
around this, you'll need to supply the qualified path to your object
as a part of the onClick, as follows:

var myobj;

PgObject=function(module,filter)
{
var filterArray;
this.filter=filter;
this.module=module;
this.uid=1;
this.enableSearch=function()
{
this.searchWidget();
}
this.runFilter=function(filter)
{
var l_filter;
if (filter)
{l_filter=filter }
else
{
l_filter=this.buildCriteria();
}

this.setExtParam(l_filter);
this.render();
return false;
}

this.buildCriteria=function()
{
var fltr=this.getFilterArray();
this.setExtParam(fltr);
}

this.setExtParam=function(l_filter)
{
this.defaultParam=l_filter;
}

this.getFilterArray=function()
{
//filterArray=new Array();
if ((this.filter) && (!filterArray))
{
filterArray=this.filter.split(",");
}
return filterArray;
}

this.searchWidget=function()
{
var srchStr="";
if (!document.getElementById(this.uid+"_searchsave"))
{
var srchW=document.createElement('div');
srchW.id=this.uid+"_searchsave";
srchW.className="hide";
srchStr="<div class=\"hd\">Search Widget</div><div class=\"bd
\"><table><tr><td><span>Save As "+"<input id=\""+this.uid+"_searchName
\" type=\"text\" size=\"10\"/></span>"+"<A href=\"javascript:void(0);
\" title=\"Save Search\" id=\""+this.uid+"_save\" onclick=\""+this.name
+".runFilter(this)\">"+"<img src=\"./images/save.gif\" border=\"0\"></
A></td></tr><tr><td>"+"<span id=\""+this.uid+"_s-search-span\">My
Saved Search<span id=\""+this.uid+"_s-search-dd\"></span></span></
td>"+"<td><A href=\"javascript:void(0);\" title=\"Delete Search\" id=
\""+this.uid+"_dsearch\" onclick=\"this.deleteSearch(this)\">"+"<img
src=\"../images/jpg/delete_pg.png\" border=\"0\"></A></td></
tr></table></DIV>";
srchW.innerHTML=srchStr;
document.body.appendChild(srchW);
}
}
}

myobj=new PgObject('mypage','username=test');
myobj.name='myobj';

 

[David Mark]

David,

Thanks. I think I mentioned the wrong thing here. Code is attached end
of this post.

If you see the code,onclick of  <input type="button" "id="click"
value="Save" onClick="myobj.enableSearch();">
 creates a DIV which has a element this.uid+"_save", onclick of that
calls this.RunFilter which is part of my myObj.
Probably if it's a single page insert everytime, I can somehow pass
create my links in DIV like myObj.runfilter()

but this DIV creation is part of generic code , whoever initializes
PGObect will get their own DIV created and all events of element in
the DIV should only point to it's own Oject?
Hope this makes sense. Please see the code below.

<script>
var myobj;

PgObject=function(module,filter)
{
 var filterArray;
 this.filter=filter;
 this.module=module;
 this.uid=1;
 this.enableSearch=function()
 {
 this.searchWidget();
 }
this.runFilter=function(filter)
{

var l_filter;
 if (filter)
 {l_filter=filter }
  else {
  l_filter=this.buildCriteria();

}

this.setExtParam(l_filter);
this.render();
return false;}

this.buildCriteria=function()
{
 var fltr=this.getFilterArray();
 this.setExtParam(fltr);

}

this.setExtParam=function(l_filter)
{
this.defaultParam=l_filter;

}

this.getFilterArray=function()
   {
     //filterArray=new Array();
     if ((this.filter) && (!filterArray))
      {
      filterArray=this.filter.split(",");
      }
      return filterArray;
   }

 this.searchWidget=function()
{
   var srchStr="";
   if (!document.getElementById(this.uid+"_searchsave")) {
   var srchW=document.createElement('div');
   srchW.id=this.uid+"_searchsave";
   srchW.className="hide";
  srchStr="<div class=\"hd\">Search Widget</div><div class=\"bd
\"><table><tr><td><span>Save As "+
        "<input id=\""+this.uid+"_searchName\" type=\"text\" size=\"10\"/></
span>"+
        "<A href=\"javascript:void(0);\" title=\"Save Search\"id=\""+this.uid
+"_save\" onclick=\"this.runFilter(this)\">"+

There is your problem. Don't create these event attributes with
innerHTML. Create and append the elements with DOM methods (e.g.
createElement, appendChild.) Then attach the events like this:

var that = this; // "this" in event listeners is the element
...
myAnchor.onclick = function() { that.runFilter(); };
...
myAnchor = null; // Prevents memory leaks in IE

 

[Rails junkie]

Thank you both. I am going to take my time and understand the solution
presented by you guys.
I will let you know if this work.

 

[liamgegan]

It's worth noting that David's solution is the more correct of the
two.

 

[Anjoe13]

"myobj.runOptions();" . It finds myobj.runoptions fine and object
reference is correct, however when it calls this.buildList , reference
of 'this' changes to window object instead myobj. then i get into
error because it does not find object with 'this' reference.

Basically, whenever you use browser to open an HTML file even an blank
one, it automatically creates an object called 'window' which is the
most top Object. If you didn't indicate any object id/name and tried
to call a method, the JavaScript thinks that you're calling method in
'window' object instead. But it seemed that you didn't try to define
any method for 'window' object, and that's why error appeared. Hope
this helps, also.

from http://njoscript.blogspot.com/