Jquery Ajax request and Jsp response

Question

I'm exercising with Ajax, Jquery and Jsp but I have a problem, I would like to display nested select, the second depends on the first, but I can not see anything when i do my choose in the first select. I hope you can help me, here is the code:

index.html

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/city.js"></script>
</head>
<body>

    <div id="state">  State
        <select id="state">
            <option id="IT" value="italy" selected="selected">Italy</option>
            <option id="FR" value="france">France</option>
            <option id="SP" value="spain">Spain</option>
        </select>
    </div> 

    <div id="city"> City
        <select id ="city"></select>
    </div>

</body>
</html>

city.js

    $(document).ready(function () {
      $("#state").onchange(function () {
        var state = $("select#state option:selected").val();

        $.ajax({
          type: "POST",
          url: 'jspState.jsp',
          data: {stateName: state},
          success: function (result) {
            $("#city").html(result);
          },
          error: function (e) {
            alert('Errore');
          }
        })
      })
    })

jspState.jsp



    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% response.setContentType("text/html");
String state = request.getParameter("stateName");
                            String it = "italy";
                            String fr = "france";
                            String sp = "spain";%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/city.js"></script>
</head>
<body>

    city
        <select id ="city"> <% if (0==it.compareTo(state)) {  %>
            <option  value="palermo">Palermo</option>
            <option  value="roma">Roma</option>
            <option  value="milano">Milano</option>
            <% } if (0==fr.compareTo(state)) { %>       
            <option value="paris">Paris</option>
            <option value="marsille">Marsille</option>
            <option value="nice">Nice</option>
            <% } if (0==sp.compareTo(state)) {  %>
            <option value="madrid">Madrid</option>
            <option value="barcelona">Barcelona</option>
            <option value="sivilla">Sivilla</option>
            <% } %>
        </select>

</body>
</html>

`$(document).html(result);`? maybe `$('body').html(result);`. — Musa, Jan 20 '15 at 13:12
it does not look nice to replace the whole page (you should replace just the content of the second select node). However if you do wish to replace the whole page, look at http://stackoverflow.com/questions/1236360/how-do-i-replace-the-entire-html-node-using-jquery — John Donn, Jan 20 '15 at 14:03
i try but nothing changes...it could be a problem of jsp response? — Juppy, Jan 20 '15 at 14:35
you may try to debug your javascript code with Chrome developer tools putting a breakpoint on, or inserting a line with the single word "debugger" just before, the line $(document).html(result). If there is something wrong with the response, you will see it. — John Donn, Jan 20 '15 at 15:39
@JohnDonn i change index.html and city.js, now i see the alert with error — Juppy, Jan 21 '15 at 12:52

score 2 · Answer 1 · answered Jan 28 '15 at 15:29

I hope you figured it by yourself now (and got acquainted with the tools which help you debug such errors, such as Chrome developer tools or similar).

In case you didn't: if you, before putting your page URL in Chrome address bar, open the Chrome developer tools, you would see an error message on the line

$("#state").onchange(function () {

in city.js. Searching the internet would suggest that the syntax of $("#state").onchange( function(.. is not correct, and that you have to write $("#state").on('change',function (.. instead.

If you put debugger; before $("#city").html(result);, you would see that result contains not just the string city <select>.., but also <body><html> which should not be enclosed by the <div id="city"> element.

I attach now the corrected code:

index.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/city.js"></script>
    </head>
    <body>

        <div id="state">  State
            <select id="state">
                <option id="IT" value="italy" selected="selected">Italy</option>
                <option id="FR" value="france">France</option>
                <option id="SP" value="spain">Spain</option>
            </select>
        </div> 

        <div id="city"> City
            <select id ="city"></select>
        </div>

    </body>
</html>

city.js

$(document).ready(function (ev1) {
  //syntax corrected
  $("#state").on('change',function (ev2) {

    var state = $("select#state option:selected").val();
    $.ajax({
      type: "POST",
      url: 'jspState.jsp',
      data: {stateName: state},
      success: function (result) {
        debugger;
        $("#city").html(result);
      },
      error: function (e) {
        alert('Errore');
      }
    })
  })
})

jspState.jsp (with all <html><body> etc tags removed)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% response.setContentType("text/html");
   String state = request.getParameter("stateName");
   String it = "italy";
   String fr = "france";
   String sp = "spain";%>
City:
<select id ="city"> <% if (0==it.compareTo(state)) {  %>
    <option  value="palermo">Palermo</option>
    <option  value="roma">Roma</option>
    <option  value="milano">Milano</option>
    <% } if (0==fr.compareTo(state)) { %>       
    <option value="paris">Paris</option>
    <option value="marsille">Marsille</option>
    <option value="nice">Nice</option>
    <% } if (0==sp.compareTo(state)) {  %>
    <option value="madrid">Madrid</option>
    <option value="barcelona">Barcelona</option>
    <option value="sivilla">Sivilla</option>
    <% } %>
</select>

Jquery Ajax request and Jsp response

1 Answers1