title: jQuery Ajax calls on servlet generated html response
body: <p>I am getting a form, that allows user change his/her password, as an ajax response from a servlet. Now, I added ajax functionality to buttons in the new form also, but when I click <strong>Change Password</strong> button, the whole form is vanishing, instead, I want to invoke a servlet again on clicking <strong>Change Password</strong>. I am making sure that jsp file <strong>test.jsp</strong> that receives response from ajax call already includes ajax logic for the id of change password <strong>#changePswd</strong></p>
  
  <p><strong>test.jsp:</strong></p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;title&gt;AJAX calls using Jquery in Servlet&lt;/title&gt;
  
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
      $(document).ready(function() {                        
  
          $('#submit1').click(function(event) {
                  event.preventDefault();   
                  $.get('ActionServlet',{request:"form"},function(responseText) { 
                  $('#welcometext').html(responseText);         
              });
          });
  
          $('#changePswd').click(function(event) {
                  event.preventDefault();   
                  $.get('ActionServlet',{request:"action"},function(responseText) { 
                  $('#content_progress').html(responseText);       
              });
          });
  
      });
  
      $(document).ajaxStart(function(){
          $('#content_progress').text("Loading...");
      });
  
      $(document).ajaxComplete(function(){
          $('#content_progress').text("");
      });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="form1"&gt;
              &lt;h1&gt;AJAX Demo using Jquery in JSP and Servlet&lt;/h1&gt;
              Enter your Name: &lt;input type="text" id="user" /&gt;&lt;br&gt;
  
              &lt;a id="submit1" href="#"&gt;View Profile&lt;/a&gt; 
              &lt;a name="submit2" href="#"&gt;Course Details&lt;/a&gt; &lt;br /&gt;
  
              &lt;div id="content_progress"&gt;&lt;/div&gt;
              &lt;div id="welcometext"&gt;&lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Servlet:</strong></p>
  
  <pre><code>package ajaxdemo;
  
  import java.io.IOException;
  import javax.servlet.ServletException;
  
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  
  public class ActionServlet extends HttpServlet 
  {
      private static final long serialVersionUID = 1L;
  
      public ActionServlet() {
  
      }
  
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
      {
          String requestType=null;
          String data = null;
  
          requestType = request.getParameter("request").toString();
  
          if(requestType.equals("form"))
          {
              data = "&lt;form id = \"formChangePswd\"&gt;&lt;table&gt;&lt;tbody&gt;"
                  +"&lt;tr&gt;&lt;td class=\"style1\"&gt;Old Password&lt;/td&gt;&lt;td class=\"style2\"&gt;&lt;input type=\"text\" id=\"oldPswd\" size=\"20\" class=\"textchange\" /&gt;&lt;/td&gt;&lt;/tr&gt;"
                  +"&lt;tr&gt;&lt;td class=\"style1\"&gt;New Password&lt;/td&gt;&lt;td class=\"style2\"&gt;&lt;input type=\"text\" id=\"newPswd\" size=\"20\" class=\"textchange\"/&gt;&lt;/td&gt;&lt;/tr&gt;"
                  +"&lt;tr&gt;&lt;td class=\"style1\"&gt;Confirm New Password&lt;/td&gt;&lt;td class=\"style2\"&gt;&lt;input type=\"text\" id=\"confirmPswd\" size=\"20\" class=\"textchange\"/&gt;&lt;/td&gt;&lt;/tr&gt;"
                  +"&lt;tr&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td align=\"right\" class=\"style1\"&gt;&lt;input type=\"reset\" id=\"reset\" value=\"Reset\" /&gt;&lt;/td&gt;&lt;td class=\"style2\"&gt;&lt;input type=\"submit\" id=\"changePswd\" value=\"Change Password\"/&gt;&lt;/td&gt;"
                  +"&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/form&gt;";
          }
          else if(requestType.equals("action"))
          {
              data = "Your request is lodged, we will get back to you soon";
          }
  
          response.setContentType("text/html");  
          response.setCharacterEncoding("UTF-8"); 
          response.getWriter().write(data); 
      }
  
      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
      {
  
      }
  }
  </code></pre>