Newbie question:partial refresh of page after onchange event

Rails
1

I want to use a dropdown box to select sales orders (by ordernumber).
After selection of an order number, the screen must be partially
refreshed and show the details of the sales order.
I know that I have to use the collection_select method with the
‘onchange’ option (collection_select(:salesorder, :ordernr,
Salesorder.find(:all), :ordernr, :ordernr, {:prompt => “– Select an
order number –”}, {:onchange =>

The big question is: what comes after the onchange? I probably have to
use a partial render?

2

Egon R. wrote:

I want to use a dropdown box to select sales orders (by ordernumber).
After selection of an order number, the screen must be partially
refreshed and show the details of the sales order.
I know that I have to use the collection_select method with the
‘onchange’ option (collection_select(:salesorder, :ordernr,
Salesorder.find(:all), :ordernr, :ordernr, {:prompt => “– Select an
order number –”}, {:onchange =>

The big question is: what comes after the onchange? I probably have to
use a partial render?

you can’t use a partial here, since your code is run in the browser
(javascript)
so there are two ways to do it:

  • write it in ajax, then your code would have to call an action, which
    in turn can render the partial and return it to update parts of the
    page
  • when creating the page, throw in the whole information, only hidden
    and show it with javascript

the first approach is by far better, the second one would only work, if
there’s only a limited amount of data

3

Thorsten M. wrote:

Egon R. wrote:

I want to use a dropdown box to select sales orders (by ordernumber).
After selection of an order number, the screen must be partially
refreshed and show the details of the sales order.
I know that I have to use the collection_select method with the
‘onchange’ option (collection_select(:salesorder, :ordernr,
Salesorder.find(:all), :ordernr, :ordernr, {:prompt => “– Select an
order number –”}, {:onchange =>

The big question is: what comes after the onchange? I probably have to
use a partial render?

you can’t use a partial here, since your code is run in the browser
(javascript)
so there are two ways to do it:

  • write it in ajax, then your code would have to call an action, which
    in turn can render the partial and return it to update parts of the
    page
  • when creating the page, throw in the whole information, only hidden
    and show it with javascript

the first approach is by far better, the second one would only work, if
there’s only a limited amount of data

You can do this by calling remote function and using the observe_field
helper w/out specifying frequency (forces it to use onChange event):

i.e.

<% remote_function :url => {:action => ‘get_sales_order_details’} %>
<%= collection_select :salesorder, :ordernr, Salesorder.find(:all),
:ordernr, :ordernr, {:prompt => “– Select an order number –”}, {} %>
<% observe_field :ordernr,
:url => {:action => ‘get_sales_order_details’},
:with => :ordernr %>

In your controller you want define the get_sales_order_details
function…

def get_sales_order_details
@sales_order = SalesOrders.find(params[:id])
render :update do |page|
page.replace_html “order_details”, :partial => ‘sales_order_details’
end
end

…where “order_details” is the section of code in your main form (using

<div id="order_details></div> tags) to be replace with the partial (which I called 'sales_order_details'). <p>Hope this helps.</p>
4

On 1/16/08, Egon R. [email protected] wrote:

use a partial render?
Look at replace_html:

http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods.html#M000978

–
Greg D.
http://destiney.com/

5

Brian,

I had to change your code here and there to make it work, but I finally
managed. Thank you for putting me on the right track!

To help other newbies, here follows the final code:

In the view:
<% remote_function :url => {:action => ‘get_sales_order_details’} %>
<%= collection_select(:salesorder, :ordernr, Salesorder.find(:all),
:ordernr, :ordernr, {:prompt => “– Select an order number –”}, {:id
=> ‘ordernr_selected’}) %>
<%= observe_field ‘ordernr_selected’,
:url => {:action => ‘get_sales_order_details’},
:with => ‘ordernr’ %>

And in the controller:
def get_sales_order_details
@salesorder = Salesorder.find_by_ordernr(params[:ordernr])
render :update do |page|
page.replace_html “order_details”, :partial =>
‘sales_order_details’
end
end

Note that I use ‘find_by_ordernr(params[:ordernr])’ i.s.o.
‘find(params[:id])’, since I don’t have the :id field in my table. The
primary key here is the ordernr.

Brian P. wrote:

You can do this by calling remote function and using the observe_field
helper w/out specifying frequency (forces it to use onChange event):

i.e.

<% remote_function :url => {:action => ‘get_sales_order_details’} %>
<%= collection_select :salesorder, :ordernr, Salesorder.find(:all),
:ordernr, :ordernr, {:prompt => “– Select an order number –”}, {} %>
<% observe_field :ordernr,
:url => {:action => ‘get_sales_order_details’},
:with => :ordernr %>

In your controller you want define the get_sales_order_details
function…

def get_sales_order_details
@sales_order = SalesOrders.find(params[:id])
render :update do |page|
page.replace_html “order_details”, :partial => ‘sales_order_details’
end
end

…where “order_details” is the section of code in your main form (using

<div id="order_details></div> tags) to be replace with the partial (which I called 'sales_order_details'). <p>Hope this helps.</p> </blockquote>
6

Egon R., your code has been very helpful.

I am trying to implement it, but am getting unexpected results. Any
guidance you have would be appreciated.

Firebug gives me this error:

element has no properties
[Break on this error] var method = element.tagName.toLowerCase();

In my view:

<%= f.collection_select (:state_code, StateList.find(:all, :order =>
“state ASC”, :select => ‘distinct state, state_code’), :state_code,
:state, {:prompt => ‘Select a State’}, {:id => :state_code }) %>

<%= observe_field ‘state_list_state_code’,
:url => {:action => ‘get_city_list’},
:with => ‘state_code’ %>

In my controller:

def get_city_list
@counties = StateList.find_by_state_code(params[:state_code])
render :update do |page|
page.replace_html “order_details”, :partial => ‘city_list’
end
end

THANKS!

7

Becca G. wrote:
One correction to the above code @counties is @cities.

Corrected method below.

def get_city_list
@cities = StateList.find_by_state_code(params[:state_code])
render :update do |page|
page.replace_html “order_details”, :partial => ‘city_list’
end
end