observe_field doesn't work

rubyonrails-talk
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')" %>

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

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

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

<script type="text/javascript"> 1 2//<![CDATA[ 3new Form.Element.EventObserver('pay_zones', function(element, value) {new Ajax.Request('/pays_distributeurs/sort', {asynchronous:true, evalScripts:true, onComplete:function(request) {Element.hide('indicator')}, onLoading:function(request) {Element.show('indicator')}, parameters:'_method=put&tag='+element.id +'&value='+element.value})}, 'changed') 4//]]> 5 </script> <label> <select id="pay_CodePays" name="pay[CodePays]"> </select> </label> <select id="pay_zones" class="combo_chage" prompt="Choisissez votre Départements" name="pay[zones]"> <option value="">Choissisez votre département</option> <option value="2">MARTINIQUE</option> <option value="97">HAUTS-DE-SEINE</option> </select>

4

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

Jason

5

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:

7

craps it's work but i have an other problem

I use 3 selects and 3 observe_field.

<label><%= select :pay,          :CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } , {:selected => nil , :prompt => "Choisissez votre Pays"}%></label> <%= 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

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

<label><%= select :pay,          :CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } , {:selected => nil , :prompt => "Choisissez votre Pays"}%></label> <%= 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

<label><%= select :pay,          :CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } , {:selected => nil , :prompt => "Choisissez votre Pays"}%></label> <%= 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

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

<label><%= select :pay,          :CodePays , @oPays.collect {|c| [ c.LibelleFr, c.id ] } , {:selected => nil , :prompt => "Choisissez votre Pays"}%></label> <%= 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

12

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

13

Thanks Peter, it's work now