How to change month dynamically in JSP?

Question

In my program, there are two buttons and in the center of the two buttons there is a space for month to display dynamically using JSP, e.g. << current month >>. The << and >> are two buttons.

I need a logical or a programmatic explanation for the following to occur:

• When I click on the left button the previous month of the current month should display.
• When I click on the right button the next month of the current month should display.

This should happen dynamically. How can I do that with help of JSP, JS and/or Ajax?

Answer 1

You can easily do that with jQuery:

HTML:

<a id="Previous" href="#">&lt;&lt;</a>
<span id="CurrentMonth">January</span>
<a id="Next" href="#">&gt;&gt;</a>

Javascript:

var currentMonth = 0;
$(function(){
  var months = ["January", "February", "March", "April", "May", "June",
               "July", "August", "September", "October", "November", "December"];

  $("#Next").click(function() {
    if (currentMonth  < 11) {
      currentMonth++;
      $("#CurrentMonth").text(months[currentMonth]);
    }
  });

  $("#Previous").click(function() {
    if (currentMonth  > 0) {
      currentMonth--;
      $("#CurrentMonth").text(months[currentMonth]);
    }
  });
});

If you want to also inform the server about the current month, you need to create an Ajax service (using for example a servlet).