Using select + onchange to change div element text

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

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

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

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.

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.

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.

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

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

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

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

Regards,

Dan

_Kevin wrote: