I''m not that familiar with Ajax, so there is a good chance that
I''m
doing something incredibly stupid, but here is the issue. I have a
search form that will display results on submit using Ajax callbacks
and cool effects.
Here is the operation that I would like
-User enters data
- On submit of the form, the spinner shows
- If there is an error, the error div is shown and everything else is hidden
- If results are successfully returned, spinner and error are hidden
and results are displayed in the search_results div with a :blind_down
effect.
Here is the view that I came up with:
<%= form_remote_tag(:html => {:action => :search}
:url => {:action => :list},
:update => {:success => ''search_results'', :failure
=> ''error''}
:before => %(Element.show(''spinner'');
Element.hide(''error'')),
:success => visual_effect(:blind_down,
''search_results''),
:failure => %(Element.hide(''search_results'');
Element.show(''error''))
:complete => %(Element.hide(''spinner'')))
%>
<%= text_field_tag(:query, @query) %> <%= submit_tag
''Search'' %>
<%= image_tag ''spinner.gif'', :id =>
''spinner'', :style => ''display:none'' %>
<%= end_form_tag %>
<div id="error"></div>
<div id="search_results"></div>
Everything seems to work fine after the first load of the page. The
first time results are loaded, however, the results quickly flash,
dissappear, and then reappear about 2 seconds later. Is this
something wrong with the effects javascript, or am I doing something
wrong?
Also, is this the correct way to do this sort of thing and/or is there
a better/more elegant way?
Thanks!