Πρόβλημα με populate μέσω JQuery + Java Servlet

nik324 · 24 Απριλίου 2015

Καλησπέρα,

ανεβάζω τον προβληματικό κώδικα:

index.jsp

<html>
<head>
<title>AJAX in Servlet using JQuery and JSON</title>
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>

<style type="text/css">
.main-content {
        padding: 20px;
}

.lightblue {
        background-color: rgb(185, 224, 243)
}

.page-content div {
        padding: 5px
}
</style>

<script>
        $(document).ready(function() {

                $('.ajax-link').click(function() {
                        $('.page-content').hide();
                        var category = $(this).attr("data-category");
                       // the URL for the request
                        $.get('ajaxAction', {
                                // Parameter to be sent to server side
                                category : category
                        }, function(jsonResponse) {
                                $.each(jsonResponse, function(index, value) {
                                        $("#" + index).html(value);
                                        if (index % 2 == 0) {
                                                $("#" + index).addClass("lightblue");
                                        }
                                });                             
                                
                                $('.page-content').show();      
                        });
                });
        });
</script>
</head>
<body>
     <div class="main-content">
        <div>
             <h3>Click on the links</h3>
              <ul>
                <li><a href="#" class="ajax-link" data-category="serial">Top 5 Serial</a></li>
                <li><a href="#" class="ajax-link" data-category="movies">Top 5 Movies</a></li>
                <li><a href="#" class="ajax-link" data-category="sports">Top 5 Sports</a></li>
              </ul>

                <h3>Result will be displayed below via Ajax</h3>
                <div class="page-content">
                        <div id="0"></div>
                        <div id="1"></div>
                        <div id="2"></div>
                        <div id="3"></div>index
                        <div id="4"></div>
                </div>
        </div>                  
      </div>
</body>
</html>

JsonServlet.java

package com.action;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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

import com.google.gson.Gson;

public class JsonServlet extends HttpServlet {

        private static final long serialVersionUID = 1L;

        protected void doGet(HttpServletRequest request,
                        HttpServletResponse response) throws ServletException, IOException {
        		System.out.println("Inside Servlet");
                String category = request.getParameter("category");
                List<String> result = new ArrayList<String>();

                if (category.equalsIgnoreCase("serial")) {
                        result.add("Game Of Throme");
                        result.add("Prison Break");
                        result.add("Breaking Bad");
                        result.add("Sherlok Home");
                        result.add("Suits");
                } else if (category.equalsIgnoreCase("movies")) {
                        result.add("Inception");
                        result.add("War Horse");
                        result.add("Avatar");
                        result.add("Titanic");
                        result.add("Life is Beautiful");
                } else if (category.equalsIgnoreCase("sports")) {
                        result.add("Basket Ball");
                        result.add("Football");
                        result.add("Tennis");
                        result.add("Rugby");
                        result.add("Cricket");
                }

                String json = new Gson().toJson(result);
                response.setContentType("application/json");
                response.getWriter().write(json);
        }
}

Web.xml

<web-app>
<servlet>
  <servlet-name>AjaxAction</servlet-name>
  <servlet-class>com.action.JsonServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>AjaxAction</servlet-name>
  <url-pattern>/ajaxAction</url-pattern>
</servlet-mapping>
<welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

Δεν γίνονται populate τα divs της jsp σελίδας. Από ότι φαίνεται δεν μπαίνει καν στο servlet (δεν τυπώνει ένα απλό μήνυμα που έχω μέσα στο servlet). Δεν μπορώ να καταλάβω τη φταίει. Αν χρειαστεί θα ανεβάσω την ακριβή δομή του Project.

samplist · 24 Απριλίου 2015

Μη βάλεις div id που αρχίζει από αριθμό, βάλε πχ id_1, id_2 κλπ κλπ. Δεν επιτρέπεται τα id να αρχίζουν με αριθμούς (από HTML5 νομίζω γίνεται).

http://www.w3.org/TR/html4/types.html#type-id

nik324 · 24 Απριλίου 2015

Δεν φταίει αυτό.

Ανεβάζω την δομή του προτζεκτ μήπως είναι εκεί το πρόβλημα

http://postimg.org/image/udfte28jb/

Επεξ/σία 24 Απριλίου 2015 από nik324

PC_MAGAS · 24 Απριλίου 2015

Του browser η κονσόλα τι λέει ποιο είναι το response του Ajax Call?

Είδες καθόλου τα developer tools του browser σου;

nik324 · 24 Απριλίου 2015

Του browser η κονσόλα τι λέει ποιο είναι το response του Ajax Call?

Είδες καθόλου τα developer tools του browser σου;

Οχι είμαι εντελώς αρχάριος σε τέτοια θέματα.

Ο κώδικας είναι από εδώ

http://www.simplecodestuffs.com/ajax-implementation-in-jsp-servlet-using-jquery-and-json/

Θέλω να καταλάβω πως δουλεύει το συγκεκριμένο παράδειγμα αλλα για να γίνει αυτό πρέπει να το δω να τρέχει σωστά

PC_MAGAS · 24 Απριλίου 2015

Οχι είμαι εντελώς αρχάριος σε τέτοια θέματα.

Ο κώδικας είναι από εδώ

http://www.simplecodestuffs.com/ajax-implementation-in-jsp-servlet-using-jquery-and-json/

Θέλω να καταλάβω πως δουλεύει το συγκεκριμένο παράδειγμα αλλα για να γίνει αυτό πρέπει να το δω να τρέχει σωστά

Τι Browser Χρησιμοποιείς για να δεις το αποτέλεσμα.

nik324 · 24 Απριλίου 2015

Τι Browser Χρησιμοποιείς για να δεις το αποτέλεσμα.

Chrome

nik324 · 25 Απριλίου 2015

Έλυσα το παραπάνω πρόβλημα αλλά επανέρχομαι με ένα νέο..

Μπορώ με το που πατηθεί ένα dropdown menu να ενημερόνεται το περιεχόμενο του μέσω JQuery και Servlet;

Κοιτάω το παρακάτω παράδειγμα

http://www.simplecodestuffs.com/dynamic-dependent-select-box-in-jsp-servlet-using-jquery-and-json-via-ajax/

και ψάχνω τρόπο να ενημερωθεί το πρώτο dropdown μέσω ενός servlet με το που πατηθεί. Αυτό που με απασχολεί είναι πως θα μεταφερθεί ο έλεγχος στο servlet μέσω της jquery

PC_MAGAS · 25 Απριλίου 2015

A) θές την .on() function της jquery μπορείς να το επιλέξεις με $('id_item').on(<;oti parapetroi xreiazontai>)

Θες την $.post() ή $.get() για να πάρεις τα δεδομένα που θες.

Γ) Στο item όπου θες όρισε ένα id και κάλεσε την $('id_που_όρισεσ').on(<παράμετροι>). Μια από της παραμέτρους είναι μια callback function που βάζεις εκεί μέσα την $.get() ή την $.post().

D)Kάλλεσε thn .done(<callback_function>) κολλήτά με την .get() ή .post() κάπως έτσι $.get().done() που στην <callback function> θα κάνεις την ανανέωση του UI. Περισσότερες Πληροφορίες στο http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

Σύνδεση

Πρόβλημα με populate μέσω JQuery + Java Servlet

Προτεινόμενες αναρτήσεις

nik324

samplist

nik324

PC_MAGAS

nik324

PC_MAGAS

nik324

nik324

PC_MAGAS

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση