# Ajax/forms confusion

**URL:** <https://www.ruby-forum.com/t/ajax-forms-confusion/132973>\
**Category:** Rails\
**Created:** [March 26, 2008, 11:22am UTC](https://www.ruby-forum.com/t/ajax-forms-confusion/132973 "2008-03-26T11:22:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![milo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@milo](https://www.ruby-forum.com/u/milo)\
**Post date:** [March 26, 2008, 11:22am UTC](https://www.ruby-forum.com/t/ajax-forms-confusion/132973/1 "2008-03-26T11:22:31Z")

</div>

Some time ago I asked about the  
use of javascript “please wait” messages whilst a big query runs. Now I  
am back to working on this code I need to deal with this problem and  
have had no luck finding anything that works.

The setup is as follows:

1. A search\_form action prepares a complex form and submits a large  
number of parameters to…
2. A big\_query action which takes some time to run and then renders its  
big\_query view.

Until (2) has finished running users see the view of (1) with no clue  
that anything is actually happening. So, ideally some sort of javascript  
that would clear away the form in (1) and replace with the waiting  
message the moment the “submit” button is clicked would suit. But, I  
can’t find any means of both submitting the form and running the  
javascript. Perhaps it is form\_remote\_tag, but the syntax for this is  
not at all clear.

Perhaps something like this in search\_form.rhtml:

\<%= form\_remote\_tag({ :action =\> 'big\_query', :loading =\> "Element.show('spinner')", :complete =\> "Element.hide('spinner')", :update =\> "hide\_me"}) %\> \<%= submit\_tag %\>

Any clarification as to how this should work would be most welcome -  
thanks.

---

<div class="post-metadata">

**Author:** ![milo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@milo](https://www.ruby-forum.com/u/milo)\
**Post date:** [March 26, 2008, 11:37am UTC](https://www.ruby-forum.com/t/ajax-forms-confusion/132973/2 "2008-03-26T11:37:02Z")

</div>

Milo T. wrote:

> \<%= form\_remote\_tag({ :action =\> ‘big\_query’, :loading =\>  
> “Element.show(‘spinner’)”, :complete =\> “Element.hide(‘spinner’)”,  
> :update =\> “hide\_me”}) %\>

The values of the :loading and :complete keys are just JavaScript, so  
you can have any amount of stuff in there. The following should work  
(not tested it, though):

\<% form\_remote\_tag :url =\> {:action =\> :big\_query}, :loading =\> "Element.hide('hide\_me'); Element.show('spinner')", :complete =\> "Element.hide('spinner'); Element.show('hide\_me')", :update =\> "hide\_me" do %\> form stuff in here \<% end %\>

Arguments are the same as link\_to\_remote.

---

<div class="post-metadata">

**Author:** ![milo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@milo](https://www.ruby-forum.com/u/milo)\
**Post date:** [March 26, 2008, 12:02pm UTC](https://www.ruby-forum.com/t/ajax-forms-confusion/132973/3 "2008-03-26T12:02:06Z")

</div>

Mark B. wrote:

> \<% form\_remote\_tag :url =\> {:action =\> :big\_query}, :loading =\> "Element.hide('hide\_me'); Element.show('spinner')", :complete =\> "Element.hide('spinner'); Element.show('hide\_me')", :update =\> "hide\_me" do %\> form stuff in here \<% end %\>

Thanks, that’s a lot better than I’ve been getting so far.  
The only problem seems to be that the app wants to render everything  
within the same page afterwards, so if the user is re-directed (e.g. to  
login) then the page ends up looking rather odd. That’s presumably my  
lack of understanding of how rendering works, though.

---

<div class="post-metadata">

**Author:** ![milo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@milo](https://www.ruby-forum.com/u/milo)\
**Post date:** [March 26, 2008, 12:11pm UTC](https://www.ruby-forum.com/t/ajax-forms-confusion/132973/4 "2008-03-26T12:11:13Z")

</div>

On 26 Mar 2008, at 11:02, Milo T. wrote:

> Thanks, that’s a lot better than I’ve been getting so far.  
> The only problem seems to be that the app wants to render everything  
> within the same page afterwards, so if the user is re-directed (e.g.  
> to  
> login) then the page ends up looking rather odd. That’s presumably my  
> lack of understanding of how rendering works, though.

That is an unfortunate truth: the browser hides the behind the scenes  
redirect from the javascript (at least in firefox it does) so it just  
sees the final result without knowing that a redirect has happened.

Fred

---

<div class="post-metadata">

**Author:** ![milo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@milo](https://www.ruby-forum.com/u/milo)\
**Post date:** [March 26, 2008, 1:44pm UTC](https://www.ruby-forum.com/t/ajax-forms-confusion/132973/5 "2008-03-26T13:44:33Z")

</div>

@Milo – It may be obvious to you know, but when you use  
form\_remote\_tag the form expects javascript back presumably with the  
intention of changing one or more elements on the page. If your  
“big\_query” that renders a “big\_view” was previously using a full  
postback then you need another solution. Maybe some js hooked to the  
button (onclick) or form (onsubmit)?

submit\_tag “Start big query”, :onclick=\>“function(){$  
(‘spinner’).show(); return true;}”

The key is making sure you return true. That lets the form know that  
the click still needs the default handling available from the form. I  
think you should be able to do something like this to display a ‘wait’  
message; the view rendering or re-direct will take care of replacing  
the page when it’s ready.

On Mar 26, 7:02 am, Milo T. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<div class="post-metadata">

**Author:** ![milo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/85e7bf/32.png) [@milo](https://www.ruby-forum.com/u/milo)\
**Post date:** [March 26, 2008, 1:47pm UTC](https://www.ruby-forum.com/t/ajax-forms-confusion/132973/6 "2008-03-26T13:47:37Z")

</div>

AndyV wrote:

> If your  
> “big\_query” that renders a “big\_view” was previously using a full  
> postback then you need another solution.

What I did was move big\_query.rhtml to \_big\_query.rhtml and added  
“render\_partial” to the end of the action in the controller. This seems  
to do what is required, but I’ll give your suggestion a try as well.
