Navigating pages in jquery,Ajax

Question

I'm new in jquery and ajax, i just want to open all my navigation links in one page. I also divided my page in three division. 1st page is in html i.e. welcome.html and rest all are in jsp. simply program takes two numbers, performs arithmetic operations on server (i wrote the servlet for each operation) side and send result back to jsp. At first it opens on same page but when i click on calculate button it goes on next page. if anybody have this solution using ajax or jquery plz let me know .

you can use [.load()](https://api.jquery.com/load/) function of jquery — Curiousdev, Jun 07 '17 at 06:38
i have performed it but for loading addition.jsp and other same files but when i click on calculate the request goes to AdditionServlet and resonse get displayed on next page — mahi, Jun 07 '17 at 06:42
Post your full code rather than! screenshot of code, its very painful to type too much to answer perfectly! No need of servlet if its simple calculation only. Do it in javascript/jquery. — Shailesh Saxena, Jun 07 '17 at 06:42
Please check my answer below, if you need further help fell free to let me know. — Shailesh Saxena, Jun 07 '17 at 07:20

score 0 · Answer 1 · answered Jun 07 '17 at 06:39

0

It's probably because the calculate button submits the form. Try calculating the value with JQuery/AJAX.

answered Jun 07 '17 at 06:39

Kishor Malakar

81
1
6

actually i'm practicing jsp, servlet with jquery – mahi Jun 07 '17 at 07:21

Shailesh Saxena · Answer 2 · 2017-06-07T07:05:27.337

Keep it like this(Using javascript, though you can use jquery also):

Say the id of first number relaed input field is val1 and that of second value is val2, Keep this javascript function code in your jsp at bottom:

<script>
function calculate(operation){
var value1, value2, result;
value1=document.getElementById("val1").value;
value2=document.getElementById("val2").value;
if(operation=='add')
result=value1+value2;
else if(operation=='subtract')
result=value1-value2;
else if(operation=='multiply')
result=value1*value2;
else if(operation=='divide')
result=value1/value2;
else
result="invalid choice!";
return result;
}
</script>

Each time on calculate button(like add, subtract, multiply, divide) keep:
for add button-> onclick=calculate('add')
for subtract button-> onclick=calculate('subtract')
for multiply button-> onclick=calculate('multiply')
for divide button-> onclick=calculate('divide')

inside calculate button onclick event.

Note: If you really want to use servlets, use ajax call for that with your existing code, you can see an example here and here

Navigating pages in jquery,Ajax

2 Answers2