Btukfyl

I have an error and it says "DataTables warning: table id=table - Ajax error. For more information about this error, please see http://datatables.net/tn/7". After that I went to inspect element and there's 1 error and says "Failed to load resource: the server responded with a status of 404 (Not Found)"

Note: Whenever i've used this line
ajax:{
url: jsonUrl,
dataSrc:''
},
in myapp.js file i got error.

myapp.js

$(function() {

    //solving the active menu problem

    switch (menu) {

    case 'About Us':

        $('#about').addClass('active');

        break;



    case 'Contact Us':

        $('#contact').addClass('active');

        break;

    case 'All Products':

        $('#listProducts').addClass('active');

        break;



     default:

         if(menu =="Home") break;

        $('#listProducts').addClass('active');

     $('#a_'+menu).addClass('active');

        break;

    }



    //code for jquery datatable



    var $table = $('#productListTable');



    //execute the below code only where we have this table

    if($table.length){



        //console.log('inside the table');

        var jsonUrl='';

        if(window.categoryId==''){



            //console.log('inside the table'+jsonUrl);

            //alert(window.categoryId);

            jsonUrl = window.contextRoot + '/json/data/all/products';

        }

        else{



            jsonUrl = window.contextRoot + '/json/data/category/'+window.categoryId+'/products';

            //console.log('inside the table'+jsonUrl);

        }



        $table.DataTable({

            lengthMenu:[[3,5,10,-1],['3 Records','5 Records','10 Records','All']],

            pageLength:5,

            ajax:{

                url: jsonUrl,

                dataSrc: ''

            },

            columns: [

                      {

                          data: 'name'

                      },

                      {

                          data: 'brand'

                      },

                      {

                          data: 'unitPrice'

                      },

                      {

                          data: 'quantity'

                      }



                      ]

        });

    }



});

JsonController

package org.project.onlineshopping.controller;



import java.util.List;



import org.project.shoppingbackend.dao.ProductDAO;

import org.project.shoppingbackend.dto.Product;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;



@Controller

@RequestMapping(value = "/json/data")

public class JsonDataController {



    @Autowired

    ProductDAO productDAO;



    @RequestMapping(value = "/all/products")

    @ResponseBody

    public List<Product> getAllProducts() {



        return productDAO.listActiveProducts();

    }



    @RequestMapping(value = "/category/{id}/products")

    @ResponseBody

    public List<Product> getProductsByCategory (@PathVariable int id) {



        return productDAO.listActiveProductsByCategory(id);

    }

}

PageController

package org.project.onlineshopping.controller;



import org.project.shoppingbackend.dao.CategoryDAO;

import org.project.shoppingbackend.dao.ProductDAO;

import org.project.shoppingbackend.dto.Category;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.servlet.ModelAndView;



@Controller

public class PageController {



    @Autowired(required = true)

    private CategoryDAO categoryDAO;



    @Autowired

    ProductDAO productDAO;



    @RequestMapping(value = { "/", "/home", "/index" })

    public ModelAndView index() {

        ModelAndView mv = new ModelAndView("page");

        // mv.addObject("greeting", "Welcome to Spring MVC ");

        mv.addObject("title", "Home");



        // passing the list of Categories

        mv.addObject("categories", categoryDAO.list());



        mv.addObject("userClickHome", true);

        return mv;

    }



    @RequestMapping(value = "/about")

    public ModelAndView about() {

        ModelAndView mv = new ModelAndView("page");

        mv.addObject("title", "About Us");

        mv.addObject("userClickAbout", true);

        return mv;

    }



    @RequestMapping(value = "/contact")

    public ModelAndView contact() {

        ModelAndView mv = new ModelAndView("page");

        mv.addObject("title", "Contact Us");

        mv.addObject("userClickContact", true);

        return mv;

    }



    /*

     * Method to load all the products and based on category

     */



        @RequestMapping(value = "/show/all/products")

        public ModelAndView showAllProducts() {

        ModelAndView mv = new ModelAndView("page");

        mv.addObject("title", "All Products");



        // passing the list of Categories

        mv.addObject("categories", categoryDAO.list());



        mv.addObject("userClickAllProducts", true);

        return mv;

    }



        @RequestMapping(value = "/show/category/{id}/products")

        public ModelAndView showCategoryProducts(@PathVariable("id") int id) {

        ModelAndView mv = new ModelAndView("page");



        //categoryDAO to fetch a single category

        Category category = null;

        category = categoryDAO.get(id);



        mv.addObject("title", category.getName());



        // passing the list of Categories

        mv.addObject("categories", categoryDAO.list());



        // passing the single of Category Object

        mv.addObject("category", category);



        mv.addObject("userClickCategoryProducts", true);

        return mv;

    }

}

dispatcher-servlet.xml

<beans xmlns="http://www.springframework.org/schema/beans"

    xmlns:context="http://www.springframework.org/schema/context"

    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="

   http://www.springframework.org/schema/beans

   http://www.springframework.org/schema/beans/spring-beans.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.xsd

   ">

    <context:component-scan base-package="org.project.onlineshopping.controller" />

    <context:component-scan base-package="org.project.shoppingbackend" />





    <bean

        class="org.springframework.web.servlet.view.InternalResourceViewResolver">

        <property name="prefix" value="/WEB-INF/views/" />

        <property name="suffix" value=".jsp" />

    </bean>



<!-- Loading static resources -->

    <mvc:annotation-driven />

    <mvc:resources location="/assets/" mapping="/resources/**"></mvc:resources>

</beans>

web.xml

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 

         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

    version="3.1">



    <display-name>Archetype Created Web Application</display-name>

    <!--  Configuring front controller -->

    <servlet>

        <servlet-name>dispatcher</servlet-name>

        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<load-on-startup>1</load-on-startup>  

    </servlet>



    <servlet-mapping>

        <servlet-name>dispatcher</servlet-name>

        <url-pattern>/</url-pattern>



    </servlet-mapping>



</web-app>

page.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>



<spring:url var="css" value="/resources/css" />

<spring:url var="js" value="/resources/js" />

<spring:url var="images" value="/resources/images" />



<c:set var="contextRoot" value="${pageContext.request.contextPath}" />



<!DOCTYPE html>

<html lang="en">



<head>



<meta charset="utf-8">

<meta name="viewport"

    content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="">

<meta name="author" content="">



<title>Online Shopping - ${title}</title>



<script>

    window.menu = '${title}';

    window.contextRoot = '$contextRoot';



</script>



<!-- Bootstrap core CSS -->

<link href="${css}/bootstrap.min.css" rel="stylesheet">



<!-- Bootstrap Readable Theme  We can change any Theme by using this css-->

<link href="${css}/bootstrap-readable-theme.css" rel="stylesheet">



<!-- Bootstrap DataTable -->

<link href="${css}/dataTables.bootstrap.min.css" rel="stylesheet">





<!-- Custom styles for this template -->

<link href="${css}/myapp.css" rel="stylesheet">



</head>



<body>

    <div class="wrapper">



        <!-- Navigation -->



        <%@ include file="./shared/navbar.jsp"%>



        <!-- Page Content -->



        <div class="content">

            <!--  Loading Home Content Here -->

            <c:if test="${userClickHome == true}">

                <%@ include file="home.jsp"%>

            </c:if>



            <!--  When User Click On About Us Page Load only -->

            <c:if test="${userClickAbout == true}">

                <%@ include file="about.jsp"%>

            </c:if>



            <!--  When User Click On Conatct Us Page Load only -->

            <c:if test="${userClickContact == true}">

                <%@ include file="contact.jsp"%>

            </c:if>



            <!--  When User Click On All Product and Category Product Page Load only -->

            <c:if test="${userClickAllProducts == true or userClickCategoryProducts == true}">

                <%@ include file="listProducts.jsp"%>

            </c:if>



        </div>





        <!-- Footer -->

        <%@ include file="./shared/footer.jsp"%>



        <!-- Bootstrap core JavaScript -->

        <script src="${js}/jquery.min.js"></script>

        <script src="${js}/bootstrap.bundle.min.js"></script>



        <!-- DataTable Plugin -->

        <script src="${js}/jquery.dataTables.min.js"></script>



        <!-- DataTable Bootstrap Script -->

        <script src="${js}/dataTables.bootstrap.min.js"></script>





        <!--  Self Coded JavaScript Code myapp.js-->

        <script src="${js}/myapp.js"></script>



    </div>

</body>



</html>

listProducts.jsp

<div class="container">



    <div class="row">



        <!-- Would be to display sidebar -->

        <div class="col-md-3">



            <%@ include file="./shared/sidebar.jsp"%>

        </div>



        <!--  to display the actual products -->

        <div class="col-md-9">



            <!--  Added breadcrumb component -->

            <div class="row">



                <div class="col-lg-12">



                    <c:if test="${userClickAllProducts == true}">



                        <script>



                            window.categoryId='';



                        </script>



                        <ol class="breadcrumb">

                            <li><a href="${contextRoot}/home">Home </a></li>

                            <li class="active">All Products</li>

                        </ol>

                    </c:if>



                    <c:if test="${userClickCategoryProducts == true}">





                        <script>



                            window.categoryId ='${category.id}';





                        </script>



                        <ol class="breadcrumb">

                            <li><a href="${contextRoot}/home">Home</a></li>

                            <li class="active">Category</li>

                            <li class="active">${category.name}</li>

                        </ol>

                    </c:if>

                </div>



            </div>



                <div class="row">



                    <div class="col-xs-12">



                        <table id="productListTable" class="table table-striped table-borderd">





                            <thead>



                                <tr>



                                    <th>Name</th>

                                    <th>Brand</th>

                                    <th>Price</th>

                                    <th>Qty. Available</th>





                                </tr>



                            </thead>





                            <tfoot>



                                <tr>



                                    <th>Name</th>

                                    <th>Brand</th>

                                    <th>Price</th>

                                    <th>Qty. Available</th>





                                </tr>



                            </tfoot>





                        </table>



                    </div>



                </div>

        </div>



    </div>



</div>

console log

INFO: Server startup in 10509 ms

Nov 24, 2018 12:55:45 AM org.hibernate.hql.internal.QueryTranslatorFactoryInitiator initiateService

INFO: HHH000397: Using ASTQueryTranslatorFactory

Hibernate: 

    select

        category0_.id as id1_0_,

        category0_.is_Active as is_Activ2_0_,

        category0_.description as descript3_0_,

        category0_.image_url as image_ur4_0_,

        category0_.name as name5_0_ 

    from

        Category category0_ 

    where

        category0_.is_Active=?

Hibernate: 

    select

        category0_.id as id1_0_,

        category0_.is_Active as is_Activ2_0_,

        category0_.description as descript3_0_,

        category0_.image_url as image_ur4_0_,

        category0_.name as name5_0_ 

    from

        Category category0_ 

    where

        category0_.is_Active=?

Nov 24, 2018 12:55:49 AM org.springframework.web.servlet.PageNotFound noHandlerFound

WARNING: No mapping found for HTTP request with URI [/onlineshopping/show/all/$contextRoot/json/data/all/products] in DispatcherServlet with name 'dispatcher'

In chorme Network + XHR + Header and Request And Response

General



Request URL: http://localhost:8080/onlineshopping/show/all/$contextRoot/json/data/all/products?_=1543049749173

Request Method: GET

Status Code: 404 Not Found

Remote Address: [::1]:8080

Referrer Policy: no-referrer-when-downgrade



Response Headers



Content-Language: en

Content-Length: 1053

Content-Type: text/html;charset=utf-8

Date: Sat, 24 Nov 2018 08:55:48 GMT

Server: Apache-Coyote/1.1



Request Headers



Accept: application/json, text/javascript, */*; q=0.01

Accept-Encoding: gzip, deflate, br

Accept-Language: en,hi;q=0.9

Connection: keep-alive

Cookie: JSESSIONID=7AE8F79FEA7D8A640CAC792459B69770

DNT: 1

Host: localhost:8080

Referer: http://localhost:8080/onlineshopping/show/all/products

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36

X-Requested-With: XMLHttpRequest



Query String Parameters 

_: 1543049749173