Problem with ajax in spring MVC. Not recognizing the method in controller

[david007]

Hi,

I am facing some problem with ajax call in my JSP. I am making the call to the URL using JQUERY. I have placed Request mapping annotation in my controller. but the method handler is not recognized and giving the error. No request handling method with name 'states' in class [customer.customerController]. Please help in resolving this issue. I have similar ajax calls in my other programs. if this is solved i can do the rest.

Here is my dispatcher servlet code

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc" 
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
       http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
       http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
       http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

     
    <context:component-scan base-package="customer" />
    <context:component-scan base-package="geography" />
    <mvc:view-controller path="/" view-name="welcome" />
    <mvc:annotation-driven />
    <bean id="messageSource"
		class="org.springframework.context.support.ResourceBundleMessageSource" 
                p:basename="configuration" />
                
    <bean id="viewResolver1" class="org.springframework.web.servlet.view.ResourceBundleViewResolver" 
        p:basename="views" />
        
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" />
    
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer" 
        p:definitions="/WEB-INF/tiles-defs.xml" />
    
   <bean id="myDataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
    <property name="driverClassName" value="org.postgresql.Driver"/>
    <property name="url" value="jdbc:postgresql://localhost:5432/AWMI"/>
    <property name="username" value="postgres"/>
    <property name="password" value="admin"/>
    </bean>
 
<bean id="mySessionFactory" class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean">
<property name="dataSource" ref="myDataSource" />
<property name="annotatedClasses">
<list>
<value>customer.customer</value>
<value>customer.categories</value>
<value>geography.countries</value>
<value>geography.states</value>

</list>
</property>
<property name="hibernateProperties">
<props>
<prop key="hibernate.dialect">org.hibernate.dialect.PostgreSQLDialect</prop>
<prop key="hibernate.show_sql">true</prop>
<prop key="hibernate.hbm2ddl.auto">update</prop>
<prop key="hibernate.connection.autocommit">true</prop>
</props>
</property>
</bean>

<bean id="mycustomerDAO" class="customer.customerDAOImpl">
<property name="sessionFactory" ref="mySessionFactory"/>
</bean>

</beans>

Here is my controller code

 @RequestMapping(value="/states.htm",method = RequestMethod.GET)
   
  public @ResponseBody List states(@RequestParam int country_id) {
       System.out.println("reached states");
       System.out.println("country id is "+country_id);
       List statesList=customerDAO.listStates(country_id);
       return statesList;
  }

Here is my JSP code that is making the ajax call using JSON. i have included JSON library in my class path

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
    function loadStates() {
        var country_value = $("#country option:selected").val();
        $.ajax({
              $.getJSON("/states.htm?country_id='" + country_value +"'", function(data) { 
              var content = '';
              $.each(data, function(){
                content += '<option value="' + this.stateId + '">' + this.stateName + '</option>';
              });
              $('#state').html(content);
              })
        });
    }
</script>

here is my Hibernate DAO code to retrieve the information

import geography.*;
import java.util.List;


import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.orm.hibernate3.HibernateTemplate;
import org.springframework.stereotype.Repository;

@Repository("customerDAO")
public class customerDAOImpl implements customerDAO {


public HibernateTemplate hibernateTemplate;
@Autowired 
public void setSessionFactory(SessionFactory sessionFactory)
{
    this.hibernateTemplate = new HibernateTemplate(sessionFactory);
}

@Override
public void savecustomer(customer customer) {
hibernateTemplate.saveOrUpdate(customer);
}

@Override
@SuppressWarnings("unchecked")
public List<customer> listcustomer() {
return hibernateTemplate.find("from customer");
}

@Override

public List<countries> listCountries() {
  return hibernateTemplate.find("from countries order by name");
}

@Override

public List<categories> listCategories() {
return hibernateTemplate.find("from customer_category order by name");
}

@Override

public List<states> listStates(int id) {
return hibernateTemplate.find("from states where country_id="+id+" order by name");
}

}

please let me know where i am making the mistake.

[david007]

After reading some couple of threads in the forum i tried this approach too. but still the method is not getting recognized in controller

<script type="text/javascript">
    function loadStates() {
        var country_value = $("#country option:selected").val();
        alert(country_value);
        $.ajax({
        url: '/states.htm',
        data: ({country_id : country_value}),
        complete:function(){alert('req complete');},
        success: function(data) {
            alert('inside function');
            var size=data.length;
            alert(size);
            var content='test';
            content+='<form:select path="customer.province">';
            content+='<form:option value="' + Select + '" label="' + Select State + '"></form:option>';
            $.each(data, function(i,data){
              content += '<form:option value="' + this.stateId + '" label="' + this.stateName + '"></form:option>';  
         });
         content+='</form:select>';
        $('#state').html(content);
      }
      });
    }
</script>

[david007]

Hi,

i have solved the problem after searching through the forum and following the links suggested by the authors. but it tooks lot of time to figure out. this is the solution to the problem. i <c:URL> to locate the page.

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
    function loadStates(){
        var country_value = $("#country option:selected").val();
        alert(country_value);
        $.getJSON("<c:url value="/states.htm" />",{country_id:country_value}, function(data) { 
          alert("reached json");
          var content = '';
          $.each(data, function(){
            content += '<option value="' + this.stateId + '">' + this.stateName + '</option>';
          });

          $('#state').html(data);
        });
    }
</script>

Thank you very much for all those authors who took their valuable time in the forum and suggestions

[lucienmarc]

hi,
I am bit new to jquery.....need code where we fetch data from server using $.getJSon and show it on the UI ...
.....thnx