CODEWITHSUNDEEP
javascriptjqueryajaxjspservlets
galahad
galahad

Reputation: 209

Refreshing a part of page using ajax - not working

Following is the code of my jsp page. There is a form containing two textareas and one button. It has some ajax code to get the response from servlet Demo and print the response inside a textarea without refreshing the page.

<form action="Demo">
  <textarea id="txtQuery"></textarea>
  <button type="submit" id="btnRunQuery" value="Run Query" onClick=""></button>
  <textarea id="txtResults"></textarea>
</form>

<script>
$(document).ready(function(){
  $("#btnRunQuery").click(function(){
    $.post("Demo",function(result){
      document.getElementById("txtresults").innerHTML=result;
    });
  });
});
<script>

Following is the code in the servlet Demo.

doPost(HttpServletRequest request, HttpServletResponse response)
{
  String query=request.getParameter("txtQuery");
  //The query is processed and the result is stored in a string solution.
  response.getWriter.print(solution);
}

After clicking the button. The results are being sent by the servlet to the jsp page but they are not being printed inside the textarea. A new empty page is opening and the results are being displayed there. I am not able to understand the problem in this code. Help would be appreciated!

Upvotes: 0

Views: 252

Answers (1)

Murali Murugesan
Murali Murugesan

Reputation: 22619

Stop prevent default submit action using e.preventDefault()

Hope your url is /Demo

$("#btnRunQuery").click(function(e){
    e.preventDefault();
    $.post("/Demo",null,function(result){
      document.getElementById("txtresults").innerHTML=result;
    });
  });

Upvotes: 1

Related Questions