Observe_field doesn't work

Rails
1

Hello,

I try to use observe_field with select

my code

<%= observe_field :pay_zones,
:on => “changed”,
:url => sort_pays_distributeurs_path,
:with => “‘_method=put&tag=’+element.id+‘&value=’+element.value”
,
:loading => “Element.show(‘indicator’)”,
:complete => “Element.hide(‘indicator’)” %>

<%= select :pay,
:CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } ,
{:selected => nil , :prompt => “Choisissez votre Pays”}%>

but i have a javascript error

element has no properties

getValue(null)prototype.js (line 3484)
getValue()prototype.js (line 3673)
initialize(“pay_zones”, function())prototype.js (line 3637)
klass()prototype.js (line 50)
[Break on this error] var method = element.tagName.toLowerCase();
http://beta.expay.local/javascripts/prototype.js?1194877354
Line 3484

where is my error ?

thanks

2

On 12 Nov 2007, at 14:24, Bolo wrote:

where is my error ?

There is no DOM element on the page with id pay_zones

Fred

3

there is no DOM element on the page with id pay_zones

i think same thing like u but i have one

Choissisez votre département MARTINIQUE HAUTS-DE-SEINE
4

Define the observe_field block after pay_zones. DOM can be picky about
this
kind of thing.

Jason

5

On 12 Nov 2007, at 14:54, Bolo wrote:

there is no DOM element on the page with id pay_zones

i think same thing like u but i have one

Oops, your observe_field needs to be after the thing it’s observing.

Fred

6

it’s works thank u :slight_smile:

On Nov 12, 11:28 am, Frederick C. [email protected]

7

craps it’s work but i have an other problem

I use 3 selects and 3 observe_field.

<%= select :pay,
:CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } ,
{:selected => nil , :prompt => “Choisissez votre Pays”}%>
<%= select :pay, :zones , @oZones.collect {|c| [ c.LibelleFr,
c.id ] } ,{:prompt => @region}, { :selected => nil, :prompt =>
“Choisissez votre Départements”, :class => ‘combo_chage’}%>
<%= select :pay, :code_postaux , @oVilles.collect {|c| [ c.Ville,
c.id ] },{:prompt => @sous_region},{:selected => nil, :prompt =>
“Choisissez votre Ville”, :class => ‘combo_chage’}%>
<% end %>
<%= observe_field :pay_CodePays,
:on => “changed”,
:url => sort_pays_distributeurs_path,
:with => “’_method=put&tag=’+element.id+’&value=’+element.value”
,
:loading => “Element.show(‘indicator’)”,
:complete => “Element.hide(‘indicator’)” %>

<%= observe_field :pay_zones,
:on => “changed”,
:url => sort_pays_distributeurs_path,
:with => “’_method=put&tag=’+element.id
+’&value=’+element.value” ,
:loading => “Element.show(‘indicator’)”,
:complete => “Element.hide(‘indicator’)” %>

<%= observe_field :pay_code_postaux,
:on => “changed”,
:url => sort_pays_distributeurs_path,
:with => “’_method=put&tag=’+element.id
+’&value=’+element.value” ,
:loading => “Element.show(‘indicator’)”,
:complete => “Element.hide(‘indicator’)” %>

When i change the first select , the action is correctly called. But i
change the second select , no action is called. Nothing in firebug

8

On 12 Nov 2007, at 16:44, Bolo wrote:

<%= observe_field :pay_CodePays,
+’&value=’+element.value" ,
:loading => “Element.show(‘indicator’)”,
:complete => “Element.hide(‘indicator’)” %>

<%= observe_field :pay_code_postaux,
:on => “changed”,
:url => sort_pays_distributeurs_path,
:with => “’_method=put&tag=’+element.id
+’&value=’+element.value” ,
:loading => “Element.show(‘indicator’)”,
:complete => “Element.hide(‘indicator’)” %>

Maybe if you would add a :url to your other observers? :slight_smile:

Also, I’m seeing a lot of replication here for your ajax indicator.
If u want to show the same indicator for all ajax requests, you’re
much better off just putting the following code in your /public/
javascripts/application.js file:

Ajax.Responders.register({
onCreate: function() { new Effect.Appear(‘indicator’, { duration:
0.3 }); },
onComplete: function() {
if (0 == Ajax.activeRequestCount)
new Effect.Fade(‘indicator’, { duration: 0.3 });
}
});

Then just remove all those :loading and :complete calls.

Also, you don’t need the :on => “changed” as that is what
observe_field will default to when using selects.

Best regards

Peter De Berdt

9

Maybe if you would add a :url to your other observers? :slight_smile:

my observers have all a :url

I added the function in applications.js and remove all :on =>“changed”
and i have the same problem

<%= select :pay,
:CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } ,
{:selected => nil , :prompt => “Choisissez votre Pays”}%>
<%= select :pay, :zones , @oZones.collect {|c| [ c.LibelleFr,
c.id ] } ,{:prompt => @region}, { :selected => nil, :prompt =>
“Choisissez votre Départements”, :class => ‘combo_chage’}%>
<%= select :pay, :code_postaux , @oVilles.collect {|c| [ c.Ville,
c.id ] },{:prompt => @sous_region},{:selected => nil, :prompt =>
“Choisissez votre Ville”, :class => ‘combo_chage’}%>
<% end %>
<%= observe_field :pay_CodePays,
:url => sort_pays_distributeurs_path,
:with => “‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

<%= observe_field :pay_zones,
:url => sort_pays_distributeurs_path,
:with =>
“‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

<%= observe_field :pay_code_postaux,
:url => sort_pays_distributeurs_path,
:with =>
“‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

you can see problem here

http://www.wexpay.com/pays_distributeurs

bye

10

Maybe if you would add a :url to your other observers? :slight_smile:

my observers have all a :url

I added the function in applications.js and remove all :on =>“changed”
and i have the same problem

<%= select :pay,
:CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } ,
{:selected => nil , :prompt => “Choisissez votre Pays”}%>
<%= select :pay, :zones , @oZones.collect {|c| [ c.LibelleFr,
c.id ] } ,{:prompt => @region}, { :selected => nil, :prompt =>
“Choisissez votre Départements”, :class => ‘combo_chage’}%>
<%= select :pay, :code_postaux , @oVilles.collect {|c| [ c.Ville,
c.id ] },{:prompt => @sous_region},{:selected => nil, :prompt =>
“Choisissez votre Ville”, :class => ‘combo_chage’}%>
<% end %>
<%= observe_field :pay_CodePays,
:url => sort_pays_distributeurs_path,
:with => “‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

<%= observe_field :pay_zones,
:url => sort_pays_distributeurs_path,
:with =>
“‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

<%= observe_field :pay_code_postaux,
:url => sort_pays_distributeurs_path,
:with =>
“‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

you can see problem here

http://www.wexpay.com/pays_distributeurs

bye

11

On 14 Nov 2007, at 15:49, Bolo wrote:

c.id ] } ,{:prompt => @region}, { :selected => nil, :prompt =>
<%= observe_field :pay_zones,
:url => sort_pays_distributeurs_path,
:with => “’_method=put&tag=’+element.id+’&value=’+element.value”
%>

<%= observe_field :pay_code_postaux,
:url => sort_pays_distributeurs_path,
:with => “’_method=put&tag=’+element.id+’&value=’+element.value”
%>

you can see problem here

The problem you’re experiencing is because you replace your selects
via ajax, while the observers are still bound to the old ones.

The easiest way to solve this problem is by putting the selects in a
span or div tag with an id, render them as partials with the
observers in the partial:

_first_select.rhtml
<%= select :pay,
:CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } ,
{:selected => nil , :prompt => “Choisissez votre Pays”}%>
<%= select :pay, :zones , @oZones.collect {|c| [ c.LibelleFr,
c.id ] } ,{:prompt => @region}, { :selected => nil, :prompt =>
“Choisissez votre Départements”, :class => ‘combo_chage’}%>
<%= observe_field :pay_CodePays,
:url => sort_pays_distributeurs_path,
:with => “’_method=put&tag=’+element.id+’&value=’+element.value”
%>

Then do a replace_html of the first_select div.

I don’t know why you’re using here either, it’s not
semantically correct.

Best regards

Peter De Berdt

12

Thanks Peter, it’s work now

13

Maybe if you would add a :url to your other observers? :slight_smile:

my observers have all a :url

I added the function in applications.js and remove all :on =>“changed”
and i have the same problem

<%= select :pay,
:CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } ,
{:selected => nil , :prompt => “Choisissez votre Pays”}%>
<%= select :pay, :zones , @oZones.collect {|c| [ c.LibelleFr,
c.id ] } ,{:prompt => @region}, { :selected => nil, :prompt =>
“Choisissez votre Départements”, :class => ‘combo_chage’}%>
<%= select :pay, :code_postaux , @oVilles.collect {|c| [ c.Ville,
c.id ] },{:prompt => @sous_region},{:selected => nil, :prompt =>
“Choisissez votre Ville”, :class => ‘combo_chage’}%>
<% end %>
<%= observe_field :pay_CodePays,
:url => sort_pays_distributeurs_path,
:with => “‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

<%= observe_field :pay_zones,
:url => sort_pays_distributeurs_path,
:with =>
“‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

<%= observe_field :pay_code_postaux,
:url => sort_pays_distributeurs_path,
:with =>
“‘_method=put&tag=’+element.id+‘&value=’+element.value”
%>

you can see problem here

http://www.wexpay.com/pays_distributeurs

bye