thr3ads.net - Rails spinoffs - prototype.js: Using Ajax from withing my own class [Mar 2007]

If this information is useful, please help other people find it:
Share via:

smellis

2007-Mar-28 19:57 UTC

prototype.js: Using Ajax from withing my own class

Hi All,

 First off, I have to mention that I love prototype, it makes my life
so much easier and has taught me quite a few things.  I am having one
problem though, how do I use Ajax.Request with in a class that I have
created?  Here''s a little more information:

First an example class:

var MyClass = Class.create();
MyClass.prototype = {
   initialize: function (element)
   {
      this.element = element;
      this.get_some_data();
   },
   get_some_data: function ()
   {
      new Ajax.Request(''/path/to/action'',
{method:"get",
onSuccess:this.handle_the_data });
   },
   handle_the_data: function (t)
   {
      $(this.element).update(t.reponseText);
   }
}

Now, the xhtml:

<div id="my_widget_holder"></div>
<script type="text/javascript">
//<![CDATA[
   var widget = new MyClass(''my_widget_holder'');
//]]>
</script>


The handle_the_data function cannot access any properties or methods
from MyClass if it is called by Ajax.Request.  I realize that I can do
widget.element.update, but then I would have to always name an
instance of MyClass "widget" and I could not have more that one
instance on the page.

To rephrase my question, how can I use Ajax.Request in my own Class,
and still be able to access methods and properties withing my own
class?


If you need more information, I am creating a file browser widget for
my application.  The widget will live in a div and will be started by:

var widget1 = new fsW(''id of the div to live in'');

All of the structure for the widget is created in the set_up_widget
method, which is called internally by initialize.  The widget uses
Ajax.Request to get some json from the server describing files and
folders and created icons within the fileArea div.  The problem is
that this no longer refers to my object when I use Ajax.Request.

/*
	File Browser Widget Class

	Objects:
		host = the element that hosts the widget
		container = the main widget container, child of the host element
*/

var fsW = Class.create();
fsW.prototype = {

	initialize: function (element, folder)
	{

		this.host = $(element);
		this.set_up_widget();
		this.set_up_menu();
		this.current_folder_id = folder;
		this.get_ff(this.current_folder_id);
		return this;
	},

	set_up_widget: function ()
	{

		this.container = document.createElement(''div'');
		this.container.className = ''fsw_container'';
		this.host.appendChild(this.container);

		this.titleBar = document.createElement(''div'');
		this.titleBar.className = ''fsw_titlebar'';
		this.container.appendChild(this.titleBar);
		$(this.titleBar).update(''Workspace'');

		this.menuBar = document.createElement(''div'');
		this.menuBar.className = ''fsw_menubar'';
		this.container.appendChild(this.menuBar);

		this.fileArea = document.createElement(''div'');
		this.fileArea.className = ''fsw_filearea'';
		this.container.appendChild(this.fileArea);

	},

	set_up_menu: function ()
	{

		this.field_newfolder = document.createElement(''input'');
		this.field_newfolder.name = ''name'';
		this.button_newfolder = document.createElement(''span'');
		this.button_newfolder.className = ''fsw_button'';
		$(this.button_newfolder).update(''New Folder'');

		this.button_uploadFile = document.createElement(''span'');
		this.button_uploadFile.classname = ''fsw_button'';
		$(this.button_uploadFile).update(''Upload File'');

		this.menuBar.appendChild(this.field_newfolder);
		this.menuBar.appendChild(this.button_newfolder);
		this.menuBar.appendChild(this.button_uploadFile);

		$(this.button_newfolder).observe(''click'',
this.newfolder.bindAsEventListener(this));
		$(this.button_uploadFile).observe(''click'', function ()
{ alert(''button_uploadFile clicked!''); });

	},

	get_ff: function (folder)
	{

		var folders = new Ajax.Request(''/fs/get_ff/'' + folder,
{method:"get", onSuccess:this.get_ff_success });

	},

	get_ff_success: function (t, json)
	{

		var folders = json.folders_json;

		$(this.fileArea).update(t.responseText);

	},

	add_folder: function (folder)
	{

		alert(''folder'');
		$(this.fileArea).update(''newfolder'');

	},

	newfolder: function ()
	{

		var parameters = { name: $(this.field_newfolder).value, parent:
this.current_folder_id };

		new Ajax.Request(''/fs/newfolder'', {method:"post",
parameters:parameters, onSuccess:this.newfolder_success});

	},

	newfolder_success: function (t)
	{

		if (t.responseText != ''ok'')
		{
			alert(''There was a problem adding the folder!'');
		}
		else
		{
			alert(''Folder added successfully!'');
			this.test_function();
		}

	}

}


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Michael Peters

2007-Mar-28 20:00 UTC

head link

Re: prototype.js: Using Ajax from withing my own class

smellis wrote:> Hi All,
> 
>  First off, I have to mention that I love prototype, it makes my life
> so much easier and has taught me quite a few things.  I am having one
> problem though, how do I use Ajax.Request with in a class that I have
> created?  Here''s a little more information:
Look at Function.bindAsEventListener
http://prototypejs.org/api/function#method-bindaseventlistener
>       new Ajax.Request(''/path/to/action'',
{method:"get",
> onSuccess:this.handle_the_data });
This would now become something like
    new Ajax.Request(''/path/to/action'', { method:
''get'', onSuccess:
this.handle_the_data.bindAsEventListener(this) });


-- 
Michael Peters
Developer
Plus Three, LP


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Justin Perkins

2007-Mar-28 20:03 UTC

head link

Re: prototype.js: Using Ajax from withing my own class

You just need to bind the observer method when you''re attaching it,
like:

new Ajax.Request(''/path/to/action'', {method:"get",
onSuccess:this.handle_the_data.bindAsEventListener(this) });

-justin

On 3/28/07, smellis
<stephan.ellis-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Hi All,
>
>  First off, I have to mention that I love prototype, it makes my life
> so much easier and has taught me quite a few things.  I am having one
> problem though, how do I use Ajax.Request with in a class that I have
> created?  Here''s a little more information:
>
> First an example class:
>
> var MyClass = Class.create();
> MyClass.prototype = {
>    initialize: function (element)
>    {
>       this.element = element;
>       this.get_some_data();
>    },
>    get_some_data: function ()
>    {
>       new Ajax.Request(''/path/to/action'',
{method:"get",
> onSuccess:this.handle_the_data });
>    },
>    handle_the_data: function (t)
>    {
>       $(this.element).update(t.reponseText);
>    }
> }
>
> Now, the xhtml:
>
> <div id="my_widget_holder"></div>
> <script type="text/javascript">
> //<![CDATA[
>    var widget = new MyClass(''my_widget_holder'');
> //]]>
> </script>
>
>
> The handle_the_data function cannot access any properties or methods
> from MyClass if it is called by Ajax.Request.  I realize that I can do
> widget.element.update, but then I would have to always name an
> instance of MyClass "widget" and I could not have more that one
> instance on the page.
>
> To rephrase my question, how can I use Ajax.Request in my own Class,
> and still be able to access methods and properties withing my own
> class?
>
>
> If you need more information, I am creating a file browser widget for
> my application.  The widget will live in a div and will be started by:
>
> var widget1 = new fsW(''id of the div to live in'');
>
> All of the structure for the widget is created in the set_up_widget
> method, which is called internally by initialize.  The widget uses
> Ajax.Request to get some json from the server describing files and
> folders and created icons within the fileArea div.  The problem is
> that this no longer refers to my object when I use Ajax.Request.
>
> /*
>         File Browser Widget Class
>
>         Objects:
>                 host = the element that hosts the widget
>                 container = the main widget container, child of the host
element
> */
>
> var fsW = Class.create();
> fsW.prototype = {
>
>         initialize: function (element, folder)
>         {
>
>                 this.host = $(element);
>                 this.set_up_widget();
>                 this.set_up_menu();
>                 this.current_folder_id = folder;
>                 this.get_ff(this.current_folder_id);
>                 return this;
>         },
>
>         set_up_widget: function ()
>         {
>
>                 this.container =
document.createElement(''div'');
>                 this.container.className =
''fsw_container'';
>                 this.host.appendChild(this.container);
>
>                 this.titleBar =
document.createElement(''div'');
>                 this.titleBar.className = ''fsw_titlebar'';
>                 this.container.appendChild(this.titleBar);
>                 $(this.titleBar).update(''Workspace'');
>
>                 this.menuBar =
document.createElement(''div'');
>                 this.menuBar.className = ''fsw_menubar'';
>                 this.container.appendChild(this.menuBar);
>
>                 this.fileArea =
document.createElement(''div'');
>                 this.fileArea.className = ''fsw_filearea'';
>                 this.container.appendChild(this.fileArea);
>
>         },
>
>         set_up_menu: function ()
>         {
>
>                 this.field_newfolder =
document.createElement(''input'');
>                 this.field_newfolder.name = ''name'';
>                 this.button_newfolder =
document.createElement(''span'');
>                 this.button_newfolder.className =
''fsw_button'';
>                 $(this.button_newfolder).update(''New
Folder'');
>
>                 this.button_uploadFile =
document.createElement(''span'');
>                 this.button_uploadFile.classname =
''fsw_button'';
>                 $(this.button_uploadFile).update(''Upload
File'');
>
>                 this.menuBar.appendChild(this.field_newfolder);
>                 this.menuBar.appendChild(this.button_newfolder);
>                 this.menuBar.appendChild(this.button_uploadFile);
>
>                 $(this.button_newfolder).observe(''click'',
> this.newfolder.bindAsEventListener(this));
>                
$(this.button_uploadFile).observe(''click'', function ()
> { alert(''button_uploadFile clicked!''); });
>
>         },
>
>         get_ff: function (folder)
>         {
>
>                 var folders = new
Ajax.Request(''/fs/get_ff/'' + folder,
> {method:"get", onSuccess:this.get_ff_success });
>
>         },
>
>         get_ff_success: function (t, json)
>         {
>
>                 var folders = json.folders_json;
>
>                 $(this.fileArea).update(t.responseText);
>
>         },
>
>         add_folder: function (folder)
>         {
>
>                 alert(''folder'');
>                 $(this.fileArea).update(''newfolder'');
>
>         },
>
>         newfolder: function ()
>         {
>
>                 var parameters = { name: $(this.field_newfolder).value,
parent:
> this.current_folder_id };
>
>                 new Ajax.Request(''/fs/newfolder'',
{method:"post",
> parameters:parameters, onSuccess:this.newfolder_success});
>
>         },
>
>         newfolder_success: function (t)
>         {
>
>                 if (t.responseText != ''ok'')
>                 {
>                         alert(''There was a problem adding the
folder!'');
>                 }
>                 else
>                 {
>                         alert(''Folder added
successfully!'');
>                         this.test_function();
>                 }
>
>         }
>
> }
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

smellis

2007-Mar-28 20:12 UTC

head link

Re: prototype.js: Using Ajax from withing my own class

Well, that''s awesome.  If you look in the actual code I am using, you
will see that I use bindAsEventListener to catch a click event.  I
just didn''t put two and two together and realize that a click and a
response are the same thing, events!  Haha, thanks for opening my
eyes. -stephan

On Mar 28, 3:00 pm, Michael Peters
<mpet...-aUYv5hkjw45l57MIdRCFDg@public.gmane.org>
wrote:> smellis wrote:
> > Hi All,
>
> >  First off, I have to mention that I love prototype, it makes my life
> > so much easier and has taught me quite a few things.  I am having one
> > problem though, how do I use Ajax.Request with in a class that I have
> > created?  Here''s a little more information:
>
> Look at
Function.bindAsEventListenerhttp://prototypejs.org/api/function#method-bindaseventlistener
>
> >       new Ajax.Request(''/path/to/action'',
{method:"get",
> > onSuccess:this.handle_the_data });
>
> This would now become something like
>     new Ajax.Request(''/path/to/action'', { method:
''get'', onSuccess:
> this.handle_the_data.bindAsEventListener(this) });
>
> --
> Michael Peters
> Developer
> Plus Three, LP

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ryan Gahl

2007-Mar-28 20:22 UTC

head link

Re: prototype.js: Using Ajax from withing my own class

However, you don''t really need bindAsEventListener here, just bind().

bindAsEventListener is really only for wiring up dom event handlers where
you are expecting the event object passed in (from the click or whatever).

just bind will suffice here.

On 3/28/07, smellis
<stephan.ellis-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
> Well, that''s awesome.  If you look in the actual code I am using,
you
> will see that I use bindAsEventListener to catch a click event.  I
> just didn''t put two and two together and realize that a click and
a
> response are the same thing, events!  Haha, thanks for opening my
> eyes. -stephan
>
> On Mar 28, 3:00 pm, Michael Peters
<mpet...-aUYv5hkjw45l57MIdRCFDg@public.gmane.org> wrote:
> > smellis wrote:
> > > Hi All,
> >
> > >  First off, I have to mention that I love prototype, it makes my
life
> > > so much easier and has taught me quite a few things.  I am having
one
> > > problem though, how do I use Ajax.Request with in a class that I
have
> > > created?  Here''s a little more information:
> >
> > Look at Function
>
.bindAsEventListenerhttp://prototypejs.org/api/function#method-bindaseventlistener
> >
> > >       new Ajax.Request(''/path/to/action'',
{method:"get",
> > > onSuccess:this.handle_the_data });
> >
> > This would now become something like
> >     new Ajax.Request(''/path/to/action'', { method:
''get'', onSuccess:
> > this.handle_the_data.bindAsEventListener(this) });
> >
> > --
> > Michael Peters
> > Developer
> > Plus Three, LP
>
>
> >
>

-- 
Ryan Gahl
Application Development Consultant
Athena Group, Inc.
Inquire: 1-920-955-1457
Blog: http://www.someElement.com

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ryan Gahl

2007-Mar-28 20:27 UTC

head link

Re: prototype.js: Using Ajax from withing my own class

And to be even more clear, as I just noticed your statement:
" I just didn''t put two and two together and realize that a click
and a
response are the same thing, events! "

They''re not. The reason bind and bindAsEventListener exist are for the
same
thing, which is to fix an object instance''s scope to the executing
context
of the function being bound. Functions, in javascript, are objects, so
normally "this" within a function refers to the function itself,
unless the
function is being executed from within another object''s context. When
you
pass callback functions into processes like dom event handling or Ajax
requests... when those functions get executed they are now outside of the
context of the object. So in these cases you must use .bind(this)... and
.bindAsEventListener is, again, only if you need access to the DOM event
object.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

smellis

2007-Mar-28 20:31 UTC

head link

Re: prototype.js: Using Ajax from withing my own class

Aha, thanks.  I will use bind();

On Mar 28, 3:27 pm, "Ryan Gahl"
<ryan.g...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> And to be even more clear, as I just noticed your statement:
> " I just didn''t put two and two together and realize that a
click and a
> response are the same thing, events! "
>
> They''re not. The reason bind and bindAsEventListener exist are for
the same
> thing, which is to fix an object instance''s scope to the executing
context
> of the function being bound. Functions, in javascript, are objects, so
> normally "this" within a function refers to the function itself,
unless the
> function is being executed from within another object''s context.
When you
> pass callback functions into processes like dom event handling or Ajax
> requests... when those functions get executed they are now outside of the
> context of the object. So in these cases you must use .bind(this)... and
> .bindAsEventListener is, again, only if you need access to the DOM event
> object.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

jharwig

2007-Mar-28 20:34 UTC

head link

Re: prototype.js: Using Ajax from withing my own class

Ah... That is what the glorious "bind" and
"BindAsEventListener" are
for

Change your onsuccess to this:
onSuccess:this.handle_the_data.bind(this)

More information at http://prototypejs.org/api/function


smellis wrote:> Hi All,
>
>  First off, I have to mention that I love prototype, it makes my life
> so much easier and has taught me quite a few things.  I am having one
> problem though, how do I use Ajax.Request with in a class that I have
> created?  Here''s a little more information:
>
> First an example class:
>
> var MyClass = Class.create();
> MyClass.prototype = {
>    initialize: function (element)
>    {
>       this.element = element;
>       this.get_some_data();
>    },
>    get_some_data: function ()
>    {
>       new Ajax.Request(''/path/to/action'',
{method:"get",
> onSuccess:this.handle_the_data });
>    },
>    handle_the_data: function (t)
>    {
>       $(this.element).update(t.reponseText);
>    }
> }
>
> Now, the xhtml:
>
> <div id="my_widget_holder"></div>
> <script type="text/javascript">
> //<![CDATA[
>    var widget = new MyClass(''my_widget_holder'');
> //]]>
> </script>
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

smellis

2007-Mar-28 20:41 UTC

head link

Re: prototype.js: Using Ajax from withing my own class

sweet, it is working like a champ!  Many thanks to everyone! -stephan

On Mar 28, 3:34 pm, "jharwig"
<jason.har...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Ah... That is what the glorious "bind" and
"BindAsEventListener" are
> for
>
> Change your onsuccess to this:
> onSuccess:this.handle_the_data.bind(this)
>
> More information athttp://prototypejs.org/api/function
>
> smellis wrote:
> > Hi All,
>
> >  First off, I have to mention that I love prototype, it makes my life
> > so much easier and has taught me quite a few things.  I am having one
> > problem though, how do I use Ajax.Request with in a class that I have
> > created?  Here''s a little more information:
>
> > First an example class:
>
> > var MyClass = Class.create();
> > MyClass.prototype = {
> >    initialize: function (element)
> >    {
> >       this.element = element;
> >       this.get_some_data();
> >    },
> >    get_some_data: function ()
> >    {
> >       new Ajax.Request(''/path/to/action'',
{method:"get",
> > onSuccess:this.handle_the_data });
> >    },
> >    handle_the_data: function (t)
> >    {
> >       $(this.element).update(t.reponseText);
> >    }
> > }
>
> > Now, the xhtml:
>
> > <div id="my_widget_holder"></div>
> > <script type="text/javascript">
> > //<![CDATA[
> >    var widget = new MyClass(''my_widget_holder'');
> > //]]>
> > </script>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Mar 2007 - prototype.js: Using Ajax from withing my own class

prototype.js: Using Ajax from withing my own class

Re: prototype.js: Using Ajax from withing my own class

Re: prototype.js: Using Ajax from withing my own class

Re: prototype.js: Using Ajax from withing my own class

Re: prototype.js: Using Ajax from withing my own class

Re: prototype.js: Using Ajax from withing my own class

Re: prototype.js: Using Ajax from withing my own class

Re: prototype.js: Using Ajax from withing my own class

Re: prototype.js: Using Ajax from withing my own class