Javascript object scope reference

Discussion in 'Javascript' started by Rails junkie, Jan 18, 2008.

  1. Rails junkie

    Rails junkie Guest

    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
    Rails junkie, Jan 18, 2008
    #1
    1. Advertising

  2. Rails junkie

    David Mark Guest

    On Jan 18, 11:27 am, Rails junkie <>
    wrote:
    > 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.
    David Mark, Jan 18, 2008
    #2
    1. Advertising

  3. Rails junkie

    Rails junkie Guest

    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();">
    Rails junkie, Jan 18, 2008
    #3
  4. Rails junkie

    Guest

    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

    On Jan 19, 3:27 am, Rails junkie <>
    wrote:
    > 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
    , Jan 18, 2008
    #4
  5. Rails junkie

    Guest

    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';
    , Jan 18, 2008
    #5
  6. Rails junkie

    David Mark Guest

    On Jan 18, 3:46 pm, Rails junkie <>
    wrote:
    > 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
    David Mark, Jan 18, 2008
    #6
  7. Rails junkie

    Rails junkie Guest

    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.


    On Jan 18, 1:26 pm, David Mark <> wrote:
    > On Jan 18, 3:46 pm, Rails junkie <>
    > wrote:
    >
    >
    >
    >
    >
    > > 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- Hide quoted text -
    >
    > - Show quoted text -
    Rails junkie, Jan 18, 2008
    #7
  8. Rails junkie

    Guest

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

    On Jan 19, 8:56 am, Rails junkie <>
    wrote:
    > 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.
    , Jan 18, 2008
    #8
  9. Rails junkie

    Anjoe13 Guest

    > 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.


    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/
    Anjoe13, Jan 19, 2008
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul Opal
    Replies:
    12
    Views:
    926
    Paul Opal
    Oct 11, 2004
  2. ann
    Replies:
    13
    Views:
    646
    Patricia Shanahan
    Sep 13, 2005
  3. Steven T. Hatton
    Replies:
    9
    Views:
    457
  4. Replies:
    1
    Views:
    464
    Mark Rae [MVP]
    Sep 20, 2007
  5. Xah Lee
    Replies:
    0
    Views:
    2,221
    Xah Lee
    Feb 26, 2009
Loading...

Share This Page