thr3ads.net - Rails spinoffs - Nested AJAX Calls [Oct 2007]

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

Brady Fopma

2007-Oct-29 16:59 UTC

Nested AJAX Calls

Hi,

I''m new to Prototype and just can''t seem to figure out how to
do the
following.  Basically, I have an image that, when clicked, executes an
AJAX call to a perl script.  The script displays a movie, as well as a
select box with options for other movies that the user can view.  That
select box has the same ID as the originally clicked image.

I am able to get the first part to work (the image disappears, the
video plays, and the select box appears).  However, I''m not able to
get the select box to do anything upon a ''change'' event. 
Basically,
it seems like the original Event.observe is no longer listening for
event changes within this block of content.

I apologize in advance if this is a stupid question, or if it can''t be
done.  I imagine it''s some sort of scope issue.

Here''s my code:
-----------------------------------------------------------------------------------
index.html:

<html><head><title>Page Title</title></head>
<script src="/javascript/prototype.js"></script>
<script src="/javascript/admissions_video2.js"></script>

<body>
<div id="video" style="width: 319px;">
<input type="image" id="imgvideo"
name="imgvideo" value="campus_life"
src="/images/main/prospective_students/video.jpg"
width="319"
height="227" style="cursor: hand; cursor: pointer;">
</div>
</body>
</html>
-----------------------------------------------------------------------------------
admissions_video2.js:

    Event.observe(window, ''load'', init, false);
    function init(){
        Event.observe(''imgvideo'', ''click'',
query, false);
        Event.observe(''imgvideo'', ''change'',
query, false);
        Event.observe(''imgvideo'', ''keyup'',
query, false);
    }

    function query(){
        var url =
''/cgi-bin/offices/admissions/video/video2.pl'';
        var videoname = escape($F(''imgvideo''));

        var target = ''video'';
        var pars =  ''videoname=''+videoname;
        var myAjax = new Ajax.Updater(target, url, {method:
''get'',
parameters: pars});
    }
-----------------------------------------------------------------------------------
video2.pl:

use CGI;
use strict;
my $q = new CGI;
print $q->header(''text/html'');

my $videoname = $q->param("videoname");

print <<EOF;

#removed video playing stuff here temporarily until this works
<p>Video is $videoname</p>

<select id="imgvideo" name="imgvideo">
<option value=""> Play another video
<option value="overview"> Intro
<option value="academics"> Academics
<option value="arts"> Arts
</select>
EOF

----------------------------------------------------------------------------------------

Thanks in advance for your help!


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

Brian Williams

2007-Oct-29 17:13 UTC

head link

Re: Nested AJAX Calls

IIRC:

per RFC some number: ID is only to be used once per page, thus why it
doesn''t work.

I forget which but Prototype only recognizes the first or last instance of
an ID at page load - probably the last because the previous values would
more than likely be overwritten

thus your problems

BUT: i don''t know if this is true for v1.6  I''m using 1.5.1.1



On 10/29/07, Brady Fopma
<webmaster-tHqY4rn/Q3uHXe+LvDLADg@public.gmane.org>
wrote:>
>
> Hi,
>
> I''m new to Prototype and just can''t seem to figure out
how to do the
> following.  Basically, I have an image that, when clicked, executes an
> AJAX call to a perl script.  The script displays a movie, as well as a
> select box with options for other movies that the user can view.  That
> select box has the same ID as the originally clicked image.
>
> I am able to get the first part to work (the image disappears, the
> video plays, and the select box appears).  However, I''m not able
to
> get the select box to do anything upon a ''change'' event. 
Basically,
> it seems like the original Event.observe is no longer listening for
> event changes within this block of content.
>
> I apologize in advance if this is a stupid question, or if it
can''t be
> done.  I imagine it''s some sort of scope issue.
>
> Here''s my code:
>
>
-----------------------------------------------------------------------------------
> index.html:
>
> <html><head><title>Page Title</title></head>
> <script src="/javascript/prototype.js"></script>
> <script
src="/javascript/admissions_video2.js"></script>
>
> <body>
> <div id="video" style="width: 319px;">
> <input type="image" id="imgvideo"
name="imgvideo" value="campus_life"
> src="/images/main/prospective_students/video.jpg"
width="319"
> height="227" style="cursor: hand; cursor: pointer;">
> </div>
> </body>
> </html>
>
>
-----------------------------------------------------------------------------------
> admissions_video2.js:
>
>     Event.observe(window, ''load'', init, false);
>     function init(){
>         Event.observe(''imgvideo'',
''click'', query, false);
>         Event.observe(''imgvideo'',
''change'', query, false);
>         Event.observe(''imgvideo'',
''keyup'', query, false);
>     }
>
>     function query(){
>         var url =
''/cgi-bin/offices/admissions/video/video2.pl'';
>         var videoname = escape($F(''imgvideo''));
>
>         var target = ''video'';
>         var pars =  ''videoname=''+videoname;
>         var myAjax = new Ajax.Updater(target, url, {method:
''get'',
> parameters: pars});
>     }
>
>
-----------------------------------------------------------------------------------
> video2.pl:
>
> use CGI;
> use strict;
> my $q = new CGI;
> print $q->header(''text/html'');
>
> my $videoname = $q->param("videoname");
>
> print <<EOF;
>
> #removed video playing stuff here temporarily until this works
> <p>Video is $videoname</p>
>
> <select id="imgvideo" name="imgvideo">
> <option value=""> Play another video
> <option value="overview"> Intro
> <option value="academics"> Academics
> <option value="arts"> Arts
> </select>
> EOF
>
>
>
----------------------------------------------------------------------------------------
>
> Thanks in advance for your help!
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Brady Fopma

2007-Oct-29 18:38 UTC

head link

Re: Nested AJAX Calls

I understand that IDs need to be unique within a document.  I guess I
just assumed that since the previous ID "disappeared" that I could use
the same name again within the new content--maybe a bad assumption.
My question boils down to this: can I process AJAX calls on content
that was generated by a previous AJAX call?  Is there an easy way to
do this?  I''ve tried several different things to make Prototype
''observe'' events from the generated content, and it seems to
be
ignoring them.

Thanks again for your help,
Brady

On Oct 29, 12:13 pm, "Brian Williams"
<brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> IIRC:
>
> per RFC some number: ID is only to be used once per page, thus why it
> doesn''t work.
>
> I forget which but Prototype only recognizes the first or last instance of
> an ID at page load - probably the last because the previous values would
> more than likely be overwritten
>
> thus your problems
>
> BUT: i don''t know if this is true for v1.6  I''m using
1.5.1.1
>
> On 10/29/07, Brady Fopma
<webmas...-tHqY4rn/Q3uHXe+LvDLADg@public.gmane.org> wrote:
>
>
>
> > Hi,
>
> > I''m new to Prototype and just can''t seem to figure
out how to do the
> > following.  Basically, I have an image that, when clicked, executes an
> > AJAX call to a perl script.  The script displays a movie, as well as a
> > select box with options for other movies that the user can view.  That
> > select box has the same ID as the originally clicked image.
>
> > I am able to get the first part to work (the image disappears, the
> > video plays, and the select box appears).  However, I''m not
able to
> > get the select box to do anything upon a ''change''
event.  Basically,
> > it seems like the original Event.observe is no longer listening for
> > event changes within this block of content.
>
> > I apologize in advance if this is a stupid question, or if it
can''t be
> > done.  I imagine it''s some sort of scope issue.
>
> > Here''s my code:
>
> >
-----------------------------------------------------------------------------------
> > index.html:
>
> > <html><head><title>Page
Title</title></head>
> > <script src="/javascript/prototype.js"></script>
> > <script
src="/javascript/admissions_video2.js"></script>
>
> > <body>
> > <div id="video" style="width: 319px;">
> > <input type="image" id="imgvideo"
name="imgvideo" value="campus_life"
> > src="/images/main/prospective_students/video.jpg"
width="319"
> > height="227" style="cursor: hand; cursor:
pointer;">
> > </div>
> > </body>
> > </html>
>
> >
-----------------------------------------------------------------------------------
> > admissions_video2.js:
>
> >     Event.observe(window, ''load'', init, false);
> >     function init(){
> >         Event.observe(''imgvideo'',
''click'', query, false);
> >         Event.observe(''imgvideo'',
''change'', query, false);
> >         Event.observe(''imgvideo'',
''keyup'', query, false);
> >     }
>
> >     function query(){
> >         var url =
''/cgi-bin/offices/admissions/video/video2.pl'';
> >         var videoname = escape($F(''imgvideo''));
>
> >         var target = ''video'';
> >         var pars =  ''videoname=''+videoname;
> >         var myAjax = new Ajax.Updater(target, url, {method:
''get'',
> > parameters: pars});
> >     }
>
> >
-----------------------------------------------------------------------------------
> > video2.pl:
>
> > use CGI;
> > use strict;
> > my $q = new CGI;
> > print $q->header(''text/html'');
>
> > my $videoname = $q->param("videoname");
>
> > print <<EOF;
>
> > #removed video playing stuff here temporarily until this works
> > <p>Video is $videoname</p>
>
> > <select id="imgvideo" name="imgvideo">
> > <option value=""> Play another video
> > <option value="overview"> Intro
> > <option value="academics"> Academics
> > <option value="arts"> Arts
> > </select>
> > EOF
>
> >
----------------------------------------------------------------------------------------
>
> > Thanks in advance for your help!

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

Dan Dorman

2007-Oct-29 19:02 UTC

head link

Re: Nested AJAX Calls

On 10/29/07, Brady Fopma
<webmaster-tHqY4rn/Q3uHXe+LvDLADg@public.gmane.org>
wrote:> <body>
> <div id="video" style="width: 319px;">
> <input type="image" id="imgvideo"
name="imgvideo" value="campus_life"
> src="/images/main/prospective_students/video.jpg"
width="319"
> height="227" style="cursor: hand; cursor: pointer;">
> </div>
>
-----------------------------------------------------------------------------------
>     Event.observe(window, ''load'', init, false);
>     function init(){
>         Event.observe(''imgvideo'',
''click'', query, false);
>         Event.observe(''imgvideo'',
''change'', query, false);
>         Event.observe(''imgvideo'',
''keyup'', query, false);
>     }
The issue is that the image with those event handlers attached is
getting replaced with the HTML being returned by the Perl script. It''s
effectively a new element and thus needs to have those event handlers
re-attached to it. (In other words, the ''change'' and
''keyup'' events
don''t even need to be in init.)

You probably can''t handle that via the Ajax.Updater very easily; try
an Ajax.Request instead, then assign a function that adds the event
handlers to the Ajax.Request''s onComplete or onSuccess property.

The duplicate ID isn''t an issue in this case, since you''re
dynamically
replacing the original element with a new element ... there aren''t
ever two elements with the same ID.

:Dan Dorman

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

Brady Fopma

2007-Oct-29 19:28 UTC

head link

Re: Nested AJAX Calls

Thank you very much.  I just smacked myself in the head once I
realized how easy that was.  Appreciate your help.

Brady

On Oct 29, 2:02 pm, "Dan Dorman"
<dan.dor...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> On 10/29/07, Brady Fopma
<webmas...-tHqY4rn/Q3uHXe+LvDLADg@public.gmane.org> wrote:
>
> > <body>
> > <div id="video" style="width: 319px;">
> > <input type="image" id="imgvideo"
name="imgvideo" value="campus_life"
> > src="/images/main/prospective_students/video.jpg"
width="319"
> > height="227" style="cursor: hand; cursor:
pointer;">
> > </div>
> >
-----------------------------------------------------------------------------------
> >     Event.observe(window, ''load'', init, false);
> >     function init(){
> >         Event.observe(''imgvideo'',
''click'', query, false);
> >         Event.observe(''imgvideo'',
''change'', query, false);
> >         Event.observe(''imgvideo'',
''keyup'', query, false);
> >     }
>
> The issue is that the image with those event handlers attached is
> getting replaced with the HTML being returned by the Perl script.
It''s
> effectively a new element and thus needs to have those event handlers
> re-attached to it. (In other words, the ''change'' and
''keyup'' events
> don''t even need to be in init.)
>
> You probably can''t handle that via the Ajax.Updater very easily;
try
> an Ajax.Request instead, then assign a function that adds the event
> handlers to the Ajax.Request''s onComplete or onSuccess property.
>
> The duplicate ID isn''t an issue in this case, since
you''re dynamically
> replacing the original element with a new element ... there aren''t
> ever two elements with the same ID.
>
> :Dan Dorman

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

Richard Quadling

2007-Oct-30 09:35 UTC

head link

Re: Nested AJAX Calls

An alternative is to supply data in a format (JSON) and then have the
prototype convert that data into OPTIONS.

I use the following code. It may not be perfect, but it works for me ...

Element.addMethods ( ''SELECT'', {
	populateSelect : function(element, a_Values, m_Selected,
s_FirstOption, s_NewOption) {
		// Many thanks to Bastian Feder
<bastian.feder-tA70FqPdS9bQT0dZR+AlfA@public.gmane.org> for help
on simplifying the select add issues I was having.

		// Extend the select.
		element = $(element);

		// Determine what has been selected - allows for more than 1 selection.
		a_Selected 			(isNull(m_Selected) || typeof m_Selected ==
''undefined'')
				?
					[]
				:
					(typeof m_Selected == ''array'') || (typeof m_selected ==
''object'')
						?
							m_Selected
						:
							[m_Selected];

		// Remove any existing options.
		a_Options = element.options;
		a_Options.length = 0;

		// Add options if they have been supplied.
		if (a_Values.length > 0) {
			// Add the "First option" if it is supplied.
			if (typeof s_FirstOption == ''string'') {
				a_Options.add(new Option(s_FirstOption, ''-1'', true,
false));
			}

			// Add the "New option" if it has been requested.
			if (typeof s_NewOption == ''string'') {
				a_Options.add(new Option(s_NewOption, ''__NewOption__'',
true, false));
			}

			// Add each value in turn.
			a_Values.each ( function(m_Item) {
				// Allow for the item to be an object of Text/Value.
				s_Text = (!!m_Item.Text) ? m_Item.Text : (!!m_Item.Value) ?
m_Item.Value : m_Item;
				s_Value = (!!m_Item.Value) ? m_Item.Value : (!!m_Item.Text) ?
m_Item.Text : m_Item;

				// Determine if this item is selected - always select single items.
				b_Selected = (a_Selected.indexOf('''' + s_Value) != -1) ||
(a_Values.length == 1);

				// Add the option.
				a_Options.add(new Option(s_Text, s_Value, false, b_Selected));
			} );
		} else {
			// Nothing to add.
			a_Options.add(new Option(''Nothing to select'',
''-1''));
		}

		return element;
	}
} );


Basically it adds a populateSelect() method to all SELECT tags.

You supply the data as follows...

a_Values is an array. If the array is a simple array, then the text
displayed and the value assigned to the OPTION is the same.

If the array is an array of objects and they have a Text and a Value
property, then these are used.

m_Selected indicates which options are selected. Either a single value
or an array of values.

s_FirstOption allows me to supply the text for the first option in the
select. It will have a value of -1 and is used for something like
"Please select from this list of xxxxx".

s_NewOption is a similar sort of thing to s_FirstOption. It allows you
to add an option like "New xxxx". It has a value of
''__NewOption__''.

If you JSON your data within PERL, then you can simply pass that as
the a_Values.

Ok. This is probably quite messy, I''m no expert, but this works for me
really well. I''m not deleting the SELECT tag, so all event handlers
are still attached.

I hope this helps.

And if any experts out there can cast an eye over it and make any
comments, I''d be very grateful. We all learn from you guys.

Regards,

Richard Quadling.


On 29/10/2007, Brady Fopma
<webmaster-tHqY4rn/Q3uHXe+LvDLADg@public.gmane.org>
wrote:>
> Thank you very much.  I just smacked myself in the head once I
> realized how easy that was.  Appreciate your help.
>
> Brady
>
> On Oct 29, 2:02 pm, "Dan Dorman"
<dan.dor...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > On 10/29/07, Brady Fopma
<webmas...-tHqY4rn/Q3uHXe+LvDLADg@public.gmane.org> wrote:
> >
> > > <body>
> > > <div id="video" style="width: 319px;">
> > > <input type="image" id="imgvideo"
name="imgvideo" value="campus_life"
> > > src="/images/main/prospective_students/video.jpg"
width="319"
> > > height="227" style="cursor: hand; cursor:
pointer;">
> > > </div>
> > >
-----------------------------------------------------------------------------------
> > >     Event.observe(window, ''load'', init, false);
> > >     function init(){
> > >         Event.observe(''imgvideo'',
''click'', query, false);
> > >         Event.observe(''imgvideo'',
''change'', query, false);
> > >         Event.observe(''imgvideo'',
''keyup'', query, false);
> > >     }
> >
> > The issue is that the image with those event handlers attached is
> > getting replaced with the HTML being returned by the Perl script.
It''s
> > effectively a new element and thus needs to have those event handlers
> > re-attached to it. (In other words, the ''change'' and
''keyup'' events
> > don''t even need to be in init.)
> >
> > You probably can''t handle that via the Ajax.Updater very
easily; try
> > an Ajax.Request instead, then assign a function that adds the event
> > handlers to the Ajax.Request''s onComplete or onSuccess
property.
> >
> > The duplicate ID isn''t an issue in this case, since
you''re dynamically
> > replacing the original element with a new element ... there
aren''t
> > ever two elements with the same ID.
> >
> > :Dan Dorman
>
>
> >
>

-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
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 - Oct 2007 - Nested AJAX Calls

Nested AJAX Calls

Re: Nested AJAX Calls

Re: Nested AJAX Calls

Re: Nested AJAX Calls

Re: Nested AJAX Calls

Re: Nested AJAX Calls