Raghu Ram Mullapudi Raghu Ram Mullapudi - 4 months ago 14
AngularJS Question

I am getting "The requested resource is not available" 404 error

i am developing a web application,but when i am trying to run the welcome.html and click AddActor button then it directs to a form which post the data to a servlet. And when i am trying to run i am getting this error,please help me out

i am working with sts,tomcat 8,maven web app

enter image description here

and my dir structure is as below

enter image description here

welcome.html

<!doctype html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Film Management System</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="login.css">

<script type="text/javascript" src="../script/angular.min.js"></script>
<script type="text/javascript" src="../script/angular-route.min.js">></script>

<script type="text/javascript" src="../script/appConfig.js"></script>
<script type="text/javascript" src="../script/appCtrl.js"></script>

</head>

<body ng-app="myApplication">
<img src='../static/bg.png' width="1280" height="222"/>

<div ng-controller="myCtrl">
<a href="#/AddNewFilm" class="addfilm_buttton button1" ng-click="action.addFilm()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Add film</a>

<a href="#/ModifyFilm" class="modifyfilm_buttton button1" ng-click="action.modifyFilm()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Modify Film</a>

<a href="#/ModifyFilm" class="searchfilm_buttton button1" ng-click="action.searchFilm()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Search Film</a>

<a href="#/ModifyFilm" class="removefilm_buttton button1" ng-click="action.removeFilm()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Remove Film</a>

<a href="ViewAllFilms.html" class="viewallfilms_buttton button1" ng-click="action.getAllFilms()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">View All Films</a>

<a href="#/AddNewActor" class="addactor_buttton button1" ng-click="action.addActor()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Add Actor</a>

<a href="#/ModifyActor" class="modifyactor_buttton button1" ng-click="action.modifyActor()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Modify Actor</a>

<a href="#/SearchActor" class="searchactor_buttton button1" ng-click="action.searchActor()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Search Actor</a>

<a href="#/RemoveActor" class="removeactor_buttton button1" ng-click="action.removeActor()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Remove Actor</a>

<a href="ViewAllActors.html" class="viewallactors_buttton button1" onclick="return submitMyForm();" ng-click="action.getAllActors()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">View All Actors</a>

<a href="#/" class="show_buttton button1" ng-click="showButtons()" ng-show="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor || action.buttonClicked.getAllActors">Home</a>

<div ng-view></div>

</div>
</body>
</html>


my AddNewActor.html is

<div id="login">

<h2><span class="fontawesome"></span>Add New Actor</h2>

<form action="AddNewActor" method="post">

<fieldset>

<p><label for="firstName">Enter Actor First Name</label></p>
<p><input type="text" name="firstName" value="first name" onBlur="if(this.value=='')this.value='first name'" onFocus="if(this.value=='first name')this.value=''"></p> <!-- JS because of IE support; better: placeholder="mail@address.com" -->

<p><label for="secondName">Enter Actor last Name</label></p>
<p><input type="text" name="lastName" value="last name" onBlur="if(this.value=='')this.value='last name'" onFocus="if(this.value=='last name')this.value=''"></p> <!-- JS because of IE support; better: placeholder="password" -->

<p><input type="submit" value="Submit"></p>

</fieldset>

</form>
</div>


and my web.xml is

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>Film Management System</display-name>
<servlet>
<display-name>ViewAllActors</display-name>
<servlet-name>ViewAllActors</servlet-name>
<servlet-class>com.flp.fms.controller.ViewAllActors</servlet-class>
</servlet>
<servlet>
<description>
</description>
<display-name>ViewALLFilms</display-name>
<servlet-name>ViewALLFilms</servlet-name>
<servlet-class>com.flp.fms.controller.ViewALLFilms</servlet-class>
</servlet>
<servlet>
<description>
</description>
<display-name>AddNewActor</display-name>
<servlet-name>AddNewActor</servlet-name>
<servlet-class>com.flp.fms.controller.AddNewActor</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ViewAllActors</servlet-name>
<url-pattern>/ViewAllActors</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ViewALLFilms</servlet-name>
<url-pattern>/ViewALLFilms</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AddNewActor</servlet-name>
<url-pattern>/AddNewActor</url-pattern>
</servlet-mapping>
</web-app>


my AddNewActor.java(servlet)

package com.flp.fms.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class AddNewActor extends HttpServlet {
private static final long serialVersionUID = 1L;


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out=response.getWriter();
out.println("tdctdt");
}

}

Answer

It's probably because of the wrong servlet path. Since in your web.xml, there is a mapping

<servlet-mapping>
   <servlet-name>AddNewActor</servlet-name>
   <url-pattern>/AddNewActor</url-pattern>
</servlet-mapping>

The servlet AddNewActor will be invoked when you call to angularjs_webapp/AddNewActor, instead of angularjs_webapp/htmlTemplates/AddNewActor

You can fix it by making changes in your form action AddNewActor.html, to direct a call to its parent directory:

<form action="AddNewActor" method="post">

should be changed to

<form action="../AddNewActor" method="post">