CODEWITHSUNDEEP
javajquerytomcat
Erycoking
Erycoking

Reputation: 559

JQuery is not working in tomcat

I have been trying to run use jquery in my javaee application instead of plain javascript. The code below show the application that i have been unable to get my head around. Every time i run the app it gives me a blank page. Somehow the jquery is not loading on the tomcat server. How do I go about it?. 

<html>
<head>
    <title>Erycoking | JSON</title>
    <script  src="WEB-INF/lib/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $.getJSON("${pageContext.request.contextPath}/getCDs.jsp", function (response) {
                var cds = response.catalog.cd;
                alert(JSON.stringify(cds));
                $.each(cds, function (ind, val) {
                    $('body.container').append('<li>' + cds[ind].title + ' : '
                        + cds[ind].artist + '</li>');
                });
            });
        });
    </script>
</head>
    <body>
        <ul class='container'></ul>
    </body>
</html>

my getCDs.jsp is down here

<jsp:useBean id="fetchBean" class="fetcher.FetchXML" />
<jsp:getProperty name="fetchBean" property="json" />

my FetchXML.java is down here

public class FetchXML {
    public void setJson(String json){}
    public String getJson(){
        JSONObject json = null;

        try {
            String xml = "";
            URL url = new URL("http://www.w3schools.com/xml/cd_catalog.xml");
            URLConnection conn = url.openConnection();
            BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));

            String line = null;
            while((line = br.readLine())  != null) xml+= line;
            br.close();

            xml = xml.replace("'", "");
            json = XML.toJSONObject(xml.toLowerCase());

        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return json.toString();
    }
}

And finally my web.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">
    
    <welcome-file-list>
        <welcome-file>fetch.jsp</welcome-file>
    </welcome-file-list>


    
</web-app>

Here is my file structure enter image description here

Upvotes: 0

Views: 2965

Answers (2)

Erycoking
Erycoking

Reputation: 559

I solved my own problem by adding the following line of code

 System.setProperty("java.net.preferIPv4Stack", "true");
 System.setProperty("http.proxyHost", "172.16.63.3");
 System.setProperty("http.proxyPort", "3128");
 HttpURLConnection urlConnection = (HttpURLConnection) new URL("https://www.w3schools.com/xml/cd_catalog.xml").openConnection();

I was working behind a proxy and had forgotten to set the proxy.I also changed it to a HttpURLConnection. Many thanks for all who spared there time to help me solve this bug especially @DanielC.

Upvotes: 0

Daniel C.
Daniel C.

Reputation: 5758

Here is one example:

As you can see in the picture I have the index.html and script.js files at the same level of WEB-INF folder.

enter image description here

Then if a need to access the javascript resource in my index.html file I only have to use the relative path, in this example both resources are located at the root path of my web application

enter image description here

Web app Url is: -> http://localhost:8080/myapp

Then index page is: -> http://localhost:8080/myapp/index.html

Then script.js file is -> http://localhost:8080/myapp/script.js

Looking at your html file I think one possible solution will be something like this, it will work only if jquery-3.2.1.min.js resource is at the same level as WEB-INF folder:

<html>
<head>
    <title>Erycoking | JSON</title>
    <script  src="jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $.getJSON("${pageContext.request.contextPath}/getCDs.jsp", function (response) {
                var cds = response.catalog.cd;
                alert(JSON.stringify(cds));
                $.each(cds, function (ind, val) {
                    $('body.container').append('<li>' + cds[ind].title + ' : '
                        + cds[ind].artist + '</li>');
                });
            });
        });
    </script>
</head>
    <body>
        <ul class='container'></ul>
    </body>
</html>

Upvotes: 2

Related Questions