0

I have a problem with the AJAX success response what not work properly and I don't understand why.. I have a form generated with Javascript from a XML document using XML DOM and as action I put a servlet for doing an update to a database using form couple name-value. Once I click on the button, the servlet works perfectly and it updates correctly my DB but once I call AJAX function for displaying an alert message in the same page of the form, it doesn't work at all and it's not displayed. How can I solve it?

This is part of the form generated with Javascript (it's a part of a table)

...
txt = txt + "<td class=\"pull-right\">" + "<form name=\"form1\" method=\"get\" action=\"SetTrue\">" +
    "<input type=\"hidden\" name=\"id\" value=\"" + nn[0].firstChild.nodeValue + "\"/>"
    + "<button type=\"submit\" class=\"btn btn-link glyphicon glyphicon-star\"></button>" 
    + "</form>" + "</td>";
...

This is part of my servlet code that works fine

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {
    HttpSession session = request.getSession();
    response.setContentType("text/html;");
    PrintWriter out = response.getWriter();
    Integer UserID = (Integer)session.getAttribute("iduser");
    String errorMsg = null;
    String successMsg = null;

    try {
        ConnectionManager conn = new ConnectionManager();
        Connection connection = conn.getConnection();
        PreparedStatement statement = null;

        String string_id = request.getParameter("id");
        int id = Integer.parseInt(string_id);

        boolean set_true = true;

        String update = "UPDATE Table SET Attribute=? WHERE ID=? AND UserID=?";
        statement = connection.prepareStatement(update);

        statement.setBoolean(1, set_true);
        statement.setInt(2, id);
        statement.setInt(3, UserID);

        int num = statement.executeUpdate();
        if (num > 0) {          
            successMsg = "OK";
            out.println(successMsg);
            RequestDispatcher reqDisp = getServletContext().getRequestDispatcher("/Welcome.jsp");
            reqDisp.forward(request, response);
        }
        else {
            errorMsg = "Error";
            session.setAttribute("error", errorMsg);
            RequestDispatcher reqDisp = getServletContext().getRequestDispatcher("/Welcome.jsp");
            reqDisp.forward(request, response);         
        }                           
        connection.close();
        statement.close();
    }
    catch (Exception e) {
        e.printStackTrace();
    }
}

This is my AJAX function in Welcome.jsp page

 ...
$("#form1").submit(function(){      
      $.ajax({
         type : form.attr('method'),
         url : form.attr('action'),
         success : function(data) {
               alert(data);
         }
      });
...

Could please anyone help me and solve my problem, explaining me why doesn't it work? Thanks in advance

marks
  • 31
  • 9
  • 1
    Have you checked console for errors? – Andrej Feb 13 '16 at 10:52
  • if your servlet code is working fine(like you mentioned) than you should post your html and javascript code rather than servlet code because the problem could be in your html or javascript.. – Manoj Salvi Feb 13 '16 at 10:59
  • @ManojSalvi I have posted html and js code above, this is the only part that I have programmed for this functionality – marks Feb 13 '16 at 11:04
  • @Andrej no error console apparently... – marks Feb 13 '16 at 11:05
  • if this is full html and javascript than where is "form" defined?? form.attr("method") – Manoj Salvi Feb 13 '16 at 11:21
  • set the id of the form to "form1", you are using $("#form1").submit() – Ashish Musale Feb 13 '16 at 11:47
  • @ManojSalvi it doesn't work even if I put "Get" and the url... and the form it is generated by a script that retrieve values from a XML document, the result form is a consequence of the script above... and it is generated fine as well – marks Feb 13 '16 at 11:47
  • @AshishMusale you're right I forgot it... I fix it but it doesn't work as well – marks Feb 13 '16 at 11:50
  • Change the success method. success:function(data, textStatus, jqXHR) { //log all the 3 parameters and see what they are in the console },Also add error: function(jqXHR, textStatus, errorThrown) {} – Ashish Musale Feb 13 '16 at 11:55
  • just ensure if Jquery script is included properly, check path.. – Manoj Salvi Feb 13 '16 at 11:59
  • @AshishMusale the problem it that on click it do not execute the script! so I can't log the parameters as you suggest – marks Feb 13 '16 at 12:17
  • so its not reaching the servlet code? your form is not getting submitted? Do you see any error in browser console? – Ashish Musale Feb 13 '16 at 12:20
  • It reachs the servlet code but it doesn't reach the script! In fact, the DB is correctly updated but the script does not start and the console is ok because of it. For example, if I remove the form and I want just execute the script on click, changing the code, it doesn't execute!!! – marks Feb 13 '16 at 12:23
  • Is this helpful? http://stackoverflow.com/q/4112686 You're not preventing the default form submit event. – BalusC Feb 13 '16 at 12:36
  • @BalusC might be right, since you have defined "action" as your form attribute, you need to prevent the default form submit event. Here is an example of how you can prevent the default form submit http://stackoverflow.com/questions/10041496/how-to-use-jquery-ajax-to-my-forms-action – Ashish Musale Feb 13 '16 at 12:43
  • It's demonstrated in last example of my link, "Ajaxifying an existing form". – BalusC Feb 13 '16 at 12:44
  • @marks to stop the default submission of form just pass event in function and use preventDefault() like $("#form1").submit(function(e){ e.preventDefault();.....rest of the ajax code.....} – Manoj Salvi Feb 13 '16 at 12:49
  • @BalusC thank you!!! amazing solution!!! – marks Feb 13 '16 at 14:55

0 Answers0