Rails spinoffs - May 2007 - problem with effect + updater combo

Hey all,

I''m not doing this with Ruby, but perhaps you can help me anyway.
What I want to accomplish is this:  I have the following web page
structure...

[some stuff]
<div id=''upload_display''>
  <div id=''upload_form''>
    <form>
      [more stuff]
    </form>
  </div>
</div>

I want to make ''upload_form'' fade out, submit to an action,
then fade
back in the result.  My results page also has a div called
''upload_form''.  If I do this:

onsubmit="new Effect.Fade(''upload_form''); new
Ajax.Updater(''upload_display'', ''action.do'',
{ asynchronous:true,
method=''post'', parameters:Form.serialize(this), onComplete:
function()
{ new Effect.Appear(''upload_form''); } } );"

... then the form submit and div replacement occurs as expected but
the effects do not, since the first effect does not have time to
complete before the Ajax.Updater is called.

It seemed like using the afterFinish callback of the Effect.Fade would
be the solution, so I wrote this:

onsubmit="new Effect.Fade(''upload_form'',
                       { afterFinish: function()
                         {
                           new Ajax.Updater(
                             ''upload_display'',
                             ''action.do'',
                             {
                               asynchronous:true,
                               method: ''post'',
                               parameters:Form.serialize(this),
                               onComplete: function(){ new
Effect.Appear(''upload_form''); }
                             });
                         }
                       });"

However this results in a javascript error of
''form.getElementsByTagName is not a function'' in prototype.js.
Details from Firebug are...

form.getElementsByTagName is not a function
getElements(Object duration=1 fps=25 sync=false from=1 to=0
delay=0)prototype.js (line 1400)
serialize(Object duration=1 fps=25 sync=false from=1 to=0
delay=0)prototype.js (line 1383)
(no name)()picturesandvideos... (line 9)
event("afterFinish")effects.js (line 326)
loop(1178693796404)effects.js (line 290)
invoke(Object element=div#upload_form options=Object)prototype.js
(line 350)
collect(Object element=div#upload_form options=Object, 0)prototype.js
(line 294)
(no name)(Object element=div#upload_form options=Object)prototype.js
(line 263)
_each(function())prototype.js (line 455)
each(function())prototype.js (line 261)
collect(function())prototype.js (line 293)
invoke("loop")prototype.js (line 349)
loop()effects.js (line 241)
bind()prototype.js (line 48)
[Break on this error] var tagElements form.getElementsByTagName(tagName);


I also tried using a setTimeout("[Ajax.Updater call]",1000) after the
first effect to give it time to complete, but this resulted in the
exact same error.  If anyone has any advice on this issue, on how to
fix the error or an easier way to do what I''m attempting, I''d
really
appreciate it.

Thanks,
Ben


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

Hi there,

Your latest chaining has the right idea, but you''ll probably need to 
leave some room for the browser engine to actually update the DOM.  I 
suggest your onComplete callback uses a timeout before triggering the 
effect, in order to be sure the element with id="upload_form" is 
detected alright.

Something like:

onComplete: function() {
   setTimeout(function() {
     new Effect.Appear(''upload_form'');
   }, 10);
}

Also check out with Firebug that the returned XHTML in your AJAX call is 
indeed the proper markup, with the valid id= and all...

-- 
Christophe Porteneuve aka TDD
tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

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