ajax is not working in rails 3.1

Question

I'm upgrading a rails 2 app to rails 3 and in the user registration I've a county select, but this is not working in rails 3.1.

The scenario if I select US it should list all states in US similarly if its Canada it list all the states in Canada, with out refreshing the page

Here is the code

in my view...

 <%
        country_codes = []
        country_names = []
        @content_data['available_contact_countries'].each {|country_obj|
            country_codes << country_obj.getIsoCode()
            country_names << country_obj.getName()
        }
    %>
    <%=
        select_html(
            :name => 'country',
            :values => country_codes,
            :labels => country_names,
            :selected => @content_data['country'],
            :tabindex => get_next_tabindex(@content_data),
            :onchange => "getContactCountryStates(this.options[this.selectedIndex].value,'');"
        ).html_safe
    %>
        </td>
      </tr>
     <tr>
          <td class="key" nowrap="nowrap">
 <%=
      display_form_label(
          :label => @content_data['label_state'] + ':',
          :field_name => 'state',
          :error_fields => flash['error_fields'],
          :required => true
      ).html_safe
  %>
          </td>
        <td>
    <%
        state_codes = []
        state_names = []
    %>
 <div id="state_div">
    <%=
        select_html(
            :name => 'state',
            :id => 'state_id',
            :values => state_codes,
            :labels => state_names,
            :tabindex => get_next_tabindex(@content_data)
        ).html_safe
    %>

This is my javascript as I placed it in the view file itself

   <script language="javascript" type="text/javascript">
      function getContactCountryStates(country_code,state_code) {

    var tab_index = document.getElementById('state_id').tabIndex;

    var v_name = 'state';
    var v_id = 'state_id';
    if (country_code != '') {
      new Ajax.Updater(
          "state_div",
          '<%=
                url_for(
                    :controller => controller.controller_name,
                    :action => 'get_country_states'
                )
          %>',
          {
              asynchronous: true,
              evalScripts: true,
              method: "get",
              parameters: 'country_code=' + country_code+'&state_code='+state_code+'&tab_index='+tab_index+'&v_name='+v_name+'&v_id='+v_id,
              onFailure: function(request) {
                  alert(request.responseText);
              }
          }
      );
    }
}

<% if (@content_data['country'] != '') %>
    getContactCountryStates('<%= @content_data['country'] %>',
                     '<%= @content_data['state'] %>');
<% end %>

and my controller

 def get_country_states

    country_code = params['country_code'] or raise \
      'country_code parameter is missing'
    v_name = params['v_name']  or raise \
      'v_name parameter is missing'
    v_id = params['v_id']  or raise \
      'v_id parameter is missing'

    state_code = params['state_code']
    tab_index = params['tab_index'] || ''

    user_manager = Java::com.mysentry.entity.user.UserManager.new()
    actor = user_manager.getSystemUser()
    state_manager = \
      Java::com.mysentry.entity.contact.StateManager.new()

    @content_data['states'] = \
      state_manager.findStatesForCountry(country_code,actor)
    if (@content_data['states'].size() == 0)
        @content_data['states'].add(state_manager.findOtherState(actor))
    end
    @content_data['selected_state'] = state_code
    @content_data['tab_index'] = tab_index
    @content_data['v_name'] = v_name
    @content_data['v_id'] = v_id
    render(:template => 'get_country_states', :nolayout => true)
end

def send_data(data, options = {})
    super(data, options)
end

and I believe i loaded all the javasrcipt files

 <script src="/assets/defaults.js" type="text/javascript"></script>

  <script src="/assets/prototype.js?body=1" type="text/javascript"></script>
  <script src="/assets/prototype.js?body=1" type="text/javascript"></script>
  <script src="/assets/prototype_ujs.js?body=1" type="text/javascript"></script>
  <script src="/assets/effects.js?body=1" type="text/javascript"></script>
  <script src="/assets/dragdrop.js?body=1" type="text/javascript"></script>
  <script src="/assets/controls.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
  <script src="/assets/application.js?body=1" type="text/javascript"></script>
  <script src="/assets/rails.js" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
  <meta content="KjqVznID2tqlycRcowaN/lNGQogHNjxM4NP1qs3q358=" name="csrf-token" />
  <script src="/assets/../javascripts/admin/menu.js" type="text/javascript"></script>
    <script src="/assets/../javascripts/tooltip.js" type="text/javascript"></script>
   <script language="javascript" type="text/javascript">
     function hidePopup() {
      Element.replace('overlay', '<div id="overlay"></div>')
      var body_elem = $('page');
      body_elem.removeClassName('body-overlayed');
      new Ajax.Request('/client/client/update_messages',
        {asynchronous:true, evalScripts:true});
  }

Answer 1

I figure out how what was the problem,

I'm using both prototype and jquery, so there is some conflict there to avoid the conflict we need to add

<script type="text/javascript">jQuery.noConflict();</script> and also we need to change the form tag as well