Using select + onchange to change div element text

rubyonrails-talk
1

Hi all,

How can I update a div tag on the current page based on a select list?

<table>    <tr>       <td>       <%= select(:foo, :bar, %w/one two/) %>    <tr>       <td><div id='mydiv'>Some text</div> </table>

Using the above example, I would like 'mydiv' to change to 'one' or 'two' whenever a selection is made.

Thanks,

Dan

2

Hi!

Hi all,

How can I update a div tag on the current page based on a select list?

<table>    <tr>       <td>       <%= select(:foo, :bar, %w/one two/) %>    <tr>       <td><div id='mydiv'>Some text</div> </table>

I would to something like this:

In the view:

<%= select('client','seller_type',{"Zone" => "Z","Assigned" => "A"}, :selected => @client.seller_type) %> <br>

<br> <%= observe_field 'client_seller_type',   :frequency => 1,   :update => 'seller_type',   :url => {:action => 'seller_type'},   :with => 'type' %> <div id="seller_type">   <%= render :partial => 'seller_type' %> </div>

And then I would have something like this in the controller (client_controller.rb):

  def seller_type     unless(@params[:type].blank?)       if(@params[:type] == "Z")         @type = "Z"       else         if(@params[:tipo] == "A")           @type="A"         end       end     end     if request.xml_http_request?       render :partial => 'seller_type'     end   end

and have this partial (_seller_type.rhtml):

<% unless @tipo == "A" %> Assigned<br> <% else %> Zone<br> <% end %>

Off course, this is based on an existing code that I have (wich is more complex than shown here), but It tells you, more or less, how can you implement this kind of stuff. Your case would be simplier.

Using the above example, I would like 'mydiv' to change to 'one' or 'two' whenever a selection is made.

Yep, that would require less code than the one I put here, but I think the one I give is more general, and hopefully, more usefull.

Hope this helps,

Ildefonso Camargo

3

How can I update a div tag on the current page based on a select list?

Hi Dan - if you want the server to control the div contents, do something like:

observe_field('field_id', :url=>{...}, :update=>'div_id' )

if you want a JS function to control the div contents:

observe_field('field_id', :function=>"...", :update=>'div_id' )

Cheers Starr

4

Is there no way to do this without having to write a controller method, a separate partial, and a function call? That seems awfully complex for what seems like a simple op.

Thanks,

Dan

This communication is the property of Qwest and may contain confidential or privileged information. Unauthorized use of this communication is strictly prohibited and may be unlawful. If you have received this communication in error, please immediately notify the sender by reply e-mail and destroy all copies of the communication and any attachments.

5

It seems like overkill to setup an observer when an 'onChange' handler should do the trick. What I want is something like this:

<%=    select(:foo, :bar, %w/one two/, {},       {          :onChange => "new Ajax.updater('my_div', '', this[this.selectedIndex].value, {asynchronous:true, evalScripts:true}       }    ) %>

This doesn't quite work, as I think Ajax.updater demands a controller action that renders a partial, but I think you get the general approach I'm aiming for.

Any ideas?

Thanks,

Dan

This communication is the property of Qwest and may contain confidential or privileged information. Unauthorized use of this communication is strictly prohibited and may be unlawful. If you have received this communication in error, please immediately notify the sender by reply e-mail and destroy all copies of the communication and any attachments.

6

Hi, again.

Is there no way to do this without having to write a controller method, a separate partial, and a function call? That seems awfully complex for what seems like a simple op.

Well, the option that Starr said, I think it is better for what you want:

observe_field('field_id', :function=>"...", :update=>'div_id' )

ie, the observe_field will run a js function instead of calling the server, and thus will not require the whole server-side stuff. I have never used that approach, and thus I can't help you anymore with it.

I gave you the "general" approach I use, because I'm not updating to "static" data in my project, I actually do a "live" search. I simplified the code to make it easier to understand.

Hope this helps,

Ildefonso Camargo.

7

Dan-

  Did you just want to update the div with the selection in the select lis? And you don't want to make an ajax call at all? Then somethign like this will work for you:

<%=     select(:foo, :bar, %w/one two/, {},        {           :onchange => "$('my_div').update(this[this.selectedIndex].value); return false;"        }     ) %>

Cheers- -Ezra

8

Just a note -

For a simple application it may be a moot point, but I've found in more complex situations, it can become a real headache to manage lots of onEvent type handlers. The great thing about observers is that you can separate code (the javascript) from content (the form element).

Cheers Starr

9

There are a few plugins that make it even easier. My favorite is the KRJS plugin...

http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/

_Kevin

10

Thanks Ezra, that looks like it will do the trick.

Regards,

Dan

11

_Kevin wrote: