Hey all, Has anyone seen an example of how to modify two divs with one ajax action? For example, I have a comment form with an Ajax submit that displays the submitted comment above the form. However, it would be cool if it could also kill the form (render its div blank). Is it possible to cause actions on two distinct divs? I know that, in this specific case, I could find away to put the comment display and the form inside a single div and update that one, upon submit, with just the comment display. However, in other applications this hack wouldn''t work, so I am wondering if there is a more general approach. Thanks, Jeff
On Aug 4, 2005, at 7:04 PM, Jeff Casimir wrote:> Hey all, > > Has anyone seen an example of how to modify two divs with one ajax > action? > For example, I have a comment form with an Ajax submit that > displays the submitted comment above the form. However, it would > be cool if it could also kill the form (render its div blank). Is > it possible to cause actions on two distinct divs? > > I know that, in this specific case, I could find away to put the > comment display and the form inside a single div and update that > one, upon submit, with just the comment display. However, in other > applications this hack wouldn''t work, so I am wondering if there is > a more general approach.This doesn''t precisely answer your question, but if all you want to do is hide a div, you can either hide it ("Element.hide(''form_div'')") or remove it ("Element.remove(''form_div'')"). And either of those fit nicely in the "complete" callback of a link_to_remote or form_remote_tag helper. - Jamis
I tried to do this a while back, and everyone I talked to in #rubyonrails and #javascript all said you can''t do it. I ended up creating a template for everything and just rendered the template as the ajax action''s response. Pat On 8/4/05, Jeff Casimir <jeff-+RlNNtFrnNmT15sufhRIGw@public.gmane.org> wrote:> Hey all, > > Has anyone seen an example of how to modify two divs with one ajax action? > > For example, I have a comment form with an Ajax submit that displays the > submitted comment above the form. However, it would be cool if it could > also kill the form (render its div blank). Is it possible to cause > actions on two distinct divs? > > I know that, in this specific case, I could find away to put the comment > display and the form inside a single div and update that one, upon > submit, with just the comment display. However, in other applications > this hack wouldn''t work, so I am wondering if there is a more general > approach. > > Thanks, > Jeff > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
This is not rails specific but I know openrico has support for this through their html updater. On 8/4/05, Jeff Casimir <jeff-+RlNNtFrnNmT15sufhRIGw@public.gmane.org> wrote:> Hey all, > > Has anyone seen an example of how to modify two divs with one ajax action? > > For example, I have a comment form with an Ajax submit that displays the > submitted comment above the form. However, it would be cool if it could > also kill the form (render its div blank). Is it possible to cause > actions on two distinct divs? > > I know that, in this specific case, I could find away to put the comment > display and the form inside a single div and update that one, upon > submit, with just the comment display. However, in other applications > this hack wouldn''t work, so I am wondering if there is a more general > approach. > > Thanks, > Jeff > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
On Aug 4, 2005, at 7:30 PM, Pat Maddox wrote:> I tried to do this a while back, and everyone I talked to in > #rubyonrails and #javascript all said you can''t do it. > > I ended up creating a template for everything and just rendered the > template as the ajax action''s response.You can certainly do it, just not out-of-the-box with the current set of helpers. One possible way to do it is to render the contents of both divs into a single string, separated by some unique separator. Something like: SEPARATOR = "-^-v-^-v-^-" def my_action div1 = render_to_string(:action => "firstdiv") div2 = render_to_string(:action => "seconddiv") render :text => "#{div1}#{SEPARATOR}#{div2}" end Then, in your view, you do something like this: <%= link_to_action "Populating two divs from one Ajax call!", :url => { :action => "my_action" }, :complete => "processTwoDivs(request)" %> And finally, you have a Javascript function defined somewhere: function processTwoDivs(request) { var parts = request.getRequestText().split("-^-v-^-v-^-") $(''firstdiv'').innerHTML = parts[0] $(''seconddiv'').innerHTML = parts[1] } Hope that gets you pointed in the right direction, anyway. I''m sure there are other ways to accomplish this, too, like using headers to pass div contents around and so forth. - Jamis> On 8/4/05, Jeff Casimir <jeff-+RlNNtFrnNmT15sufhRIGw@public.gmane.org> wrote: > >> Hey all, >> >> Has anyone seen an example of how to modify two divs with one ajax >> action? >> >> For example, I have a comment form with an Ajax submit that >> displays the >> submitted comment above the form. However, it would be cool if it >> could >> also kill the form (render its div blank). Is it possible to cause >> actions on two distinct divs? >> >> I know that, in this specific case, I could find away to put the >> comment >> display and the form inside a single div and update that one, upon >> submit, with just the comment display. However, in other >> applications >> this hack wouldn''t work, so I am wondering if there is a more general >> approach. >> >> Thanks, >> Jeff >> _______________________________________________ >> Rails mailing list >> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> http://lists.rubyonrails.org/mailman/listinfo/rails >> >> > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
Jamis Buck wrote:> On Aug 4, 2005, at 7:04 PM, Jeff Casimir wrote: > >> Hey all, >> >> Has anyone seen an example of how to modify two divs with one ajax >> action? >> For example, I have a comment form with an Ajax submit that displays >> the submitted comment above the form. However, it would be cool if >> it could also kill the form (render its div blank). Is it possible >> to cause actions on two distinct divs? >> >> I know that, in this specific case, I could find away to put the >> comment display and the form inside a single div and update that >> one, upon submit, with just the comment display. However, in other >> applications this hack wouldn''t work, so I am wondering if there is >> a more general approach. > > > This doesn''t precisely answer your question, but if all you want to > do is hide a div, you can either hide it ("Element.hide(''form_div'')") > or remove it ("Element.remove(''form_div'')"). And either of those fit > nicely in the "complete" callback of a link_to_remote or > form_remote_tag helper. > > - Jamis > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/railsI would take Jamis''s advice or consider making your submit button not submit but call some javascript. Something like <SCRIPT Language="Javascript"><!-- function ajaxSubmit(thebutton) { if(thebutton.form.onsubmit()) thebutton.form.submit() //any other javascript you want to run } //--></SCRIPT> The submit button then has an onclick="ajaxSubmit(this); return true;" So when you click the submit button for the form you get to make the ajax request and then run any other javascript you want. So you could do something similar and after the ajax request use javascript to empty the div that contains your form with innerHTML or some other method. Matthew Margolis
Contrary to what have been said, this is supported by the current set
of helpers:
You need to use :complete => evaluate_remote_response (and don''t
use :update) on your remote form/link,
and then use the update_element_function in your view/partial.
from the api docs on update_element_function:
# Calling view
<%= form_remote_tag :url => { :action => "buy" },
:complete =>
evaluate_remote_response %>
all the inputs here...
# Controller action
def buy
@product = Product.find(1)
end
# Returning view
<%= update_element_function(
"cart", :action => :update, :position => :bottom,
:content => "<p>New Product:
#{@product.name}</p>")) %>
<% update_element_function("status", :binding => binding) do
%>
You''ve bought a new product!
<% end %>
This example shows how to update two divs.
Thomas
Am 05.08.2005 um 03:04 schrieb Jeff Casimir:
> Hey all,
>
> Has anyone seen an example of how to modify two divs with one ajax
> action?
> For example, I have a comment form with an Ajax submit that
> displays the submitted comment above the form. However, it would
> be cool if it could also kill the form (render its div blank). Is
> it possible to cause actions on two distinct divs?
>
> I know that, in this specific case, I could find away to put the
> comment display and the form inside a single div and update that
> one, upon submit, with just the comment display. However, in other
> applications this hack wouldn''t work, so I am wondering if there
is
> a more general approach.
>
> Thanks,
> Jeff
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>