Beginner question about refreshing a page containing an obse

Rails
1

Hi all,

I’m still learning the new world of AJAX and RJS and I got hit by a
problem I could not resolve today.

I have a simple form containing (among other things) a drop_down list
(collection_select with :include_blank => true). This drop_down list
is followed by a div that gets populated when the user selects a value
from the list (I have an observe_field that triggers a method in my
controller).

This method has a rjs template file which displays a partial (see code
below)

When the page is initially displayed, the div is empty. As soon as the
user makes a selection, some details about the selection show up in
the view, in the div located under the drop_down list.

All this works fine unless the user decides to reload the page using
the browser’s refresh button (or press the F5 key) after having made a
selection in the list.

In this case, the drop_down list continues to show the value selected
before the refresh, however, the div located below the drop_down list
is now empty again.

In other words:

  • user loads the page for first time
  • user makes a selection in drop_down list => info about selection
    shows up in div
  • user reloads page => selection is still visible, but info about
    selection is not visible anymore

I believe the reason is that the controller’s action that manages the
page is called again when the user refreshes the page and the model
associated to the page is reset (i.e. all fields set to nil, since the
controller does @my_model = MyModel.new). But the browser did not
reset the value in the drop_down list so the list and the div are no
longer in sync.

Is there a simple way to solve this problem? or am I doing something
wrong? or am I trying to do something impossible?

Thanks for your help

Rene (aka bubulle)

code extracts

– my_view.rhtml

<%= collection_select(:my_model, :stuff_id , Stuff.find(:all), “id”,
“name”, :include_blank => true) %>

<%= observe_field ‘my_model_stuff_id’,
:url => {:action => ‘show_stuff_details’},
:with => “stuff_id” %>

– show_stuff_details.rjs

page.show ‘my_info_div’
page.replace_html ‘my_info_div’, :partial => my_partial

2

Hi Rene,

bubulle wrote:

I believe the reason is that the controller’s action that manages the
page is called again when the user refreshes the page

Yes.

Is there a simple way to solve this problem? or am I doing something
wrong? or am I trying to do something impossible?

Not impossible at all. You simply need to plan for the refresh. The
partial is rendered if some value is present in the db, yes? So test
for
that in your view.

<% if some_stuff_exists %>
<%= render :partial => … %>
<% else %>
<%= %q{

} %>
<%= %q{
} %>
<% end %>

It’s often cleaner if you just have 2 partials. One with data and the
other
empty.

hth,
Bill

3

Hi Bill,

thanks a lot for your answer. But unfortunately, this does not solve
my problem because the problem occurs before the user saves anything
in the database.

Maybe I wasn’t clear enough in my description, so let me try to
clarify:

I have a view (new.rhtml) corresponding the the new action of my
controller.
This view contains a drop_down list initialized with some values
(including a blank one) and an empty div under the list.
The user displays the view, then selects a value. This triggers the
“observe_field action” to display some html (for simplicity, let’s say
it is just text) in the div.
At this point, the view shows the selected value and the info related
to that value in the div under the drop down list.
The user has not pressed the saved button, so there is no data in the
database.

If the user presses the refresh button, the new action from the
controller gets called again, but the drop_down list still shows the
same value AND the div is empty again.

I believe that the div is empty again because the model behind the
view is empty (and I do have the same piece of code you suggested) and
the value in the drop down list is the same as it was before the user
pressed the refresh button (and I’m not sure why it is so, to be
honest).

Is there a way to access that value so that I can set the data in the
div accordingly ?

Any idea why calling the new action resets the div, but not the value
in the drop down list?

Thanks

Rene