Form is not getting submit after clicking on button - spring

Question

Please check the below code:
Updated web.xml is:
<display-name>Spring MVC Form Handling</display-name>
<servlet>
<servlet-name>spring</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>spring</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
thats why the UI messed up.
link:
http://postimg.org/image/cf80ko6in/
and spring-servlet.xml is:
<context:component-scan base-package="com.hrportal.controller" />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
<bean id="messageSource"
class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basename" value="classpath:messages" />
<property name="defaultEncoding" value="UTF-8" />
</bean>
<bean id="localeChangeInterceptor"
class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor">
<property name="paramName" value="lang" />
</bean>
<bean id="localeResolver"
class="org.springframework.web.servlet.i18n.CookieLocaleResolver">
<property name="defaultLocale" value="en" />
</bean>
<bean id="handlerMapping"
class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
<property name="interceptors">
<ref bean="localeChangeInterceptor" />
</property>
</bean>
I do not know how to handle this warnings for error:404:
logs for server and I am getting error '404' on browser's console..
12:42:40,416 DEBUG DispatcherServlet:766 - DispatcherServlet with name 'spring' processing GET request for [/HRportal/scripts/jquery-1.9.1.js]
12:42:40,417 WARN PageNotFound:1020 - No mapping found for HTTP request with URI [/HRportal/scripts/jquery-1.9.1.js] in DispatcherServlet with name 'spring'
12:42:40,418 DEBUG DispatcherServlet:881 - Successfully completed request
12:42:40,419 DEBUG DispatcherServlet:766 - DispatcherServlet with name 'spring' processing GET request for [/HRportal/images/dataZen_Logo.png]
12:42:40,420 WARN PageNotFound:1020 - No mapping found for HTTP request with URI [/HRportal/images/dataZen_Logo.png] in DispatcherServlet with name 'spring'
12:42:40,421 DEBUG DispatcherServlet:881 - Successfully completed request
12:42:40,497 DEBUG DispatcherServlet:766 - DispatcherServlet with name 'spring' processing GET request for [/HRportal/images/facebook-icon.png]
12:42:40,499 WARN PageNotFound:1020 - No mapping found for HTTP request with URI [/HRportal/images/facebook-icon.png] in DispatcherServlet with name 'spring'
12:42:40,499 DEBUG DispatcherServlet:881 - Successfully completed request
12:42:40,501 DEBUG DispatcherServlet:766 - DispatcherServlet with name 'spring' processing GET request for [/HRportal/images/imagestwitter.png]
12:42:40,503 WARN PageNotFound:1020 - No mapping found for HTTP request with URI [/HRportal/images/imagestwitter.png] in DispatcherServlet with name 'spring'
12:42:40,527 DEBUG DispatcherServlet:881 - Successfully completed request
I am not able to solve these warnings.

Answer 1

You have done some mistakes:
1) you have form action as upcomingLeaves.do
<form:form commandName="loginForm" id="loginForm" action="upcomingLeaves.do">
and in Controller you have /upcomingLeaves
#RequestMapping(value = "/upcomingLeaves" ,method = RequestMethod.POST)
2) you trying to get form but initialized with button.
$("button").click(function(){
var $form = $(this); ....
3) I think you'd suppose to submit a form with one upcomingLeave once, But you have all the upcomingLeaves in single form. So when you submit the form, then Jquery will serialize all upcomingLeaves.
4) In your case you supposed to perform actions like: Accept , Reject and Cancel, then no need of $form.serialize(), you can perform these action by sending employee id itself.
Solution:
Render anchor tags with employee id. and make the job simpler..
Like:
<a class="emp-leave-action"
href='<c:url value="/leaveaccept.do/${upComLeave.employee_id}"/>'>Accept</a>
<a class="emp-leave-action"
href='<c:url value="/leavereject.do/${upComLeave.employee_id}"/>'>Reject</a>
<a class="emp-leave-action"
href='<c:url value="/leavecancel.do/${upComLeave.employee_id}"/>'>Cancel</a>
and implement GET methods like:
Accept:
#RequestMapping(value = "/leaveaccept.do/{empId}" ,method = RequestMethod.GET)
public String processAccept(#PathVariable("empId") Integer empId) {
//do emplyee leave accept work here
}
Reject:
#RequestMapping(value = "/leavereject.do/{empId}" ,method = RequestMethod.GET)
public String processReject(#PathVariable("empId") Integer empId) {
//do emplyee leave reject work here
}
Cancel:
#RequestMapping(value = "/leavecancel.do/{empId}" ,method = RequestMethod.GET)
public String processCancel(#PathVariable("empId") Integer empId) {
//do emplyee leave cancel work here
}
and finally use AJAX call like:
$("a.emp-leave-action").click(function(e){
e.preventDefault();
$.get( $(this).attr('href'), function( data ) {
alert( "action was performed." );
});
});