Hi, Mandy :-) Long time no talk, eh? Been very busy :-)

Anyway, like others have said already in this thread... without bind(), it becomes a pretty messy block of code every time you want to do this...

I'm assuming the call to function2() requires knowledge of the state of the instance of the "o" object, otherwise as Jeremy stated, just make it some globally visible function.

Prototype's bind() function is as follows:

Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
}

In a nutshell, it returns a modified function, which itself returns the original function applied to the object passed as the argument (optionally with any additional arguments supplied passed in as well).

The "non-prototypish" way to do this would be to recreate something similar to the above code, wrapped in a closure, every time you want to do this. You can do it one line though, but still ugly IMHO :-), but if you're into using the lower level constructs as much as possible for some kind of cross library interoperability or "future-proofing" concerns, then the OP's class can be rewritten as follows...

o = Class.create();
o.prototype = {
       initialize: function() {
               this.fetchAjaxData();
       },

       fetchAjaxData: function(){
               url=""
               pars="x=1&y=1";
              
               var myAjax= new Ajax.Request(
                       url,
                       {
                               method: 'get',
                               parameters: pars,
                               onComplete: function() { this.ajaxFetched.apply(this); }
                       });
       },

       ajaxFetched: function(){
               alert('ajaxFetched called');
               this.function2();
       },

       function2: function(){
               alert('function2 called');
       }
}


On 5/25/06, Maninder, Singh <[EMAIL PROTECTED]> wrote:
Ryan,
 
What's the non prototyp-ish way to handle this?
 
What if we don't want to use bind()?
 
Thanks in advance,
Mandy.
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]]On Behalf Of Ryan Gahl
Sent: Thursday, May 25, 2006 10:28 AM
To: [email protected]
Subject: Re: [Rails-spinoffs] functions calling functions

Yup you're missing something fundamental... what's happening is a scope issue. Functions in _javascript_ are first class objects. That means (normally) from within a function the term "this" refers to the function itself...

So in ajaxFetched you have...

ajaxFetched: function(){
                alert('ajaxFetched called');
                this.function2();
        },

..."this.function2()" is trying to find a function called function2 as a member of the Object ajaxFetched. Since there is no ajexFetched.function2, it fails.

Prototype gives us a very handy tool to overcome this "problem" (not actually a problem but a designed feature of the language -- it wasn't originally purposed for class based OO)... called bind().

bind() ensures that the "this" in the object's functions refers to the object itself, and not the function. In your example, change the line where you attach ajexFetched to the onComplete event (as I have it below), and everything should be good to go...

fetchAjaxData: function(){
                url="">                pars="x=1&y=1";

                var myAjax= new Ajax.Request(
                        url,
                        {
                                method: 'get',
                                parameters: pars,
                                onComplete: this.ajaxFetched.bind(this)
                        });
        },


I can all but gaurantee you that when the rest of the people on this list wake up in the morning, you'll get a slew of helpful comments about "closures" and scope issues.

This is by far the most common question/problem we see here :-)

Welcome to OO _javascript_.


On 5/24/06, Kev'n <[EMAIL PROTECTED]> wrote:
I think I may be missing a fundamental concept I hope someone can help
me with. I have functions that won't call other functions. Particularly
after an Ajax request.

In the following object the ajax request onComplete calls the
ajaxFetched function successfully. ajaxFetched tries to call function2
but function2 does not execute.

Any ideas or workarounds?

thanks
Kevin


o = Class.create();
o.prototype = {
        initialize: function() {
                this.fetchAjaxData();
        },

        fetchAjaxData: function(){
                url="">                pars="x=1&y=1";

                var myAjax= new Ajax.Request(
                        url,
                        {
                                method: 'get',
                                parameters: pars,
                                onComplete: this.ajaxFetched
                        });
        },

        ajaxFetched: function(){
                alert('ajaxFetched called');
                this.function2();
        },

        function2: function(){
                alert('function2 called');
        }
}

Event.observe(window, 'load', function(){var O = new o();});

_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs


_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs



_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Reply via email to