Question

I have a modal dialog box which is containing search field. when I select element from drop down list, I got an error “element is null”. Can not understand why did I get this error. Following is my code.

<%= label_tag :Search_by %>
<select name="search" id="search" >
    <option value="0">Trainer</option>
    <option value="1">Venue</option>
    <option value="2">Country</option>
</select>

<div id="div_to_be_updated" style="float:right">
</div>

<%= observe_field 'search', :update => 'div_to_be_updated',:url => {:controller => 'events', :action=> 'pop_up_search' }, :with => "'is_delivery_address=' + escape(value)" %>

controller code::

def pop_up_search
  @trainers= Trainer.all
  @countries= Country.all

  if ["0"].include?(params[:is_delivery_address])
    render :partial => 'layouts/pop_up_trainer_search'
  else
    if ["1"].include?(params[:is_delivery_address])
      render :partial => 'calendar/pop_up_venu_search'
    else
      render :partial => 'layouts/pop_up_country_search'
    end
  end
end     

_pop_up_trainer_search.html.erb

<span style="text-align: right">
    <% form_tag "/calendar/pop_up_trainer_view" do %>
        <%= collection_select("event", "trainer_id", @trainers , :id, :name, {:prompt => true}) %>
        <%= submit_tag "search" %>
    <% end%>
</span>

Why did I get this error? Can anybody help me to correct this?

Answer 1

Sounds like your error is happening on the client, not at the server.

That means there’s a problem with your JS.

That means that the observe_field is not being turned into good JS.

Suggestions

Examine the source of your web page, as it is sent from the server.

• Look at the Javascript that is observing the #search element.
• Check that there are no other elements with the search id
• Use Firebug or other JS debugger to follow the Javascript flow when a new value is selected in the select field

Added Since it works when in the main erb, but not the popup erb, a couple of ideas:

1. Don’t re-use the search id in the popups. It should be a unique dom element. Different ways to handle this, one is to hide, not destroy the popup.
2. Confirm that the JS is being called when the popup dialog is created. — Add an alert statement and see if it is evaluated.
3. Does it work the first time the dialog is created, but not on later times?
4. The JS debugger is your friend. Use it to carefully see what is happening on the browser. The Rails JS machinery is supposed to run JS that is in a partial but maybe there’s a problem there.