Click here to Skip to main content
15,887,175 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am calculating the price of a ticket with discount on weekdays and weekends based on the time duration.So, i gave inputs of duration and date using datepicker plugin which is in Above Page. For this i am getting proper result.But i have to create two different jsp pages(date.jsp and cal.jsp). In 1st jsp page(date.jsp) i am selecting date using datepicker. And in 2nd jsp page(cal.jsp)

I have written a method ->[caluculate(#dateid,#duratiionid)] to calulate the price by taking inputs as time duration.
Here My Question is how shall i pass [#dateid] from 1st jsp page(date.jsp) to 2nd jsp page(cal.jsp) so that i can pass both the id's in this method->[caluculate(#dateid,#duratiionid)].


What I have tried:


<form id="book_court">
<label for="date">Date</label>
<input type="date" name="date" id="date" min="today" required />


<label for="tickets_duration"> Hours</label>
<input type="number" min="1" name="tickets_duration" id="tickets_duration" required />




<label>Total Price</label>
(enter data first)



<input type="submit" id="submit" value="Book Court" />


</form>


<script id="worker" type="javascript/worker">
self.onmessage = function msgWorkerHandler(event){
var jsonString = event.data;

var day = jsonString.day;
var tickets_duration = jsonString.tickets_duration;

// set price of each hours as Rs. 200 and 300
var totalPriceOnWeekday = tickets_duration * 200;
var totalPriceOnWeekends=tickets_duration * 300;

// 10% discount if on weekday and 15% on weekends
if(day > 0 && day < 6){
totalPriceOnWeekday = totalPriceOnWeekday - 0.10 * totalPriceOnWeekday;
postMessage("₹ " + totalPriceOnWeekday);
}else if(day == 0 || day == 7){
totalPriceOnWeekends = totalPriceOnWeekends - 0.15 * totalPriceOnWeekday;

postMessage("₹ " + totalPriceOnWeekends);
}
}
</script>

<script>
$(document).ready(function(){

// first check the movies already book

// apply jQuery UI Redmond theme to 'Book Tickets' button
$("#submit").button();

// calculateTotalPrice on keyup or on change of movie/date/tickets
$("#date, #tickets_duration").change(calculateTotalPrice);

// on form submit
$("#book_court").submit(function(event){

// prevent on submit page refresh
event.preventDefault();

// check locally stored data
// clear the form
$( '#book_court' ).each(function(){
this.reset();
});

// reset (enter data first) message
$("#total_price").html("(enter data first)");

// update movies booked list
});

// set minimum date in datepicker as today
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('min', today);

});

function calculateTotalPrice(){
if($("#tickets_duration").val() != "" && $("#date").val() != ""){
if(window.Worker){
// create web worker
var blob = new Blob(
[document.querySelector("#worker").textContent],
{type: 'text/javascript'});
var worker = new Worker(window.URL.createObjectURL(blob));

worker.onmessage = function(event){
$("#total_price").html(event.data);
}
worker.onerror = function(errorObject){
$("#total_price").html("Error: " + errorObject.message);
}
var date = new Date($('#date').val());

// get day
var day = date.getDay();

// get number of booked shows

// send JSON data to worker
var jsonData = {'day': day, 'tickets_duration': Number($("#tickets_duration").val())};
worker.postMessage(jsonData);
}
}
}
</script>
Posted
Updated 14-May-16 18:15pm

1 solution

Probably you can received detailed answers based on session and specific to JSP.

I want to suggest more universal and modern alternative based on Web storage. This approach is agnostic to the server side; it can even work without any server side at all, when you simply want to restore some UI state or any data at all after, say, local reload or any other action which need restoration of your previous state.

This universal API is Web storage:
Web storage — Wikipedia, the free encyclopedia[^],
Web Storage API — Web APIs | MDN[^],
Window.sessionStorage — Web APIs | MDN[^],
Window.localStorage — Web APIs | MDN[^].

Apparently, for your purpose you have to prefer session storage, not local storage. Local storage would contaminate your local browser data, but even with local storage you can easily wipe it out.

Also, you may reasonably prefer keeping all the state record by just one key and save restore everything at once. It would be the best idea. To do so, you would need to serialize and deserialize all data. It can be easily done with JSON: JSON — JavaScript | MDN[^].

You can find a comprehensive sample of the whole technique in my article, in the Web storage section:
JavaScript Calculator, 7 Dynamic Strict Mode Switching and Web Storage[^]

That's all.

—SA
 
Share this answer
 
Comments
Member 12524018 15-May-16 5:25am    
#thanku. Can you give a sample code means how to use local or session storage in my case??
Sergey Alexandrovich Kryukov 15-May-16 9:36am    
I referenced the article where you can find a fully-fledged code sample. Why would I need to write something else?
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900