Solved

Reset Dates based on dropdown Value

Posted on 2009-07-10
59
282 Views
Last Modified: 2012-05-07
Hi Experts,

            I have a form(Snapshot attached) with a dropdown fields (Daily, Weekly, Monthly, Quarterly, Annualy, 12_Month_Rolling).

            Based on these options, the default values on From and To fields are shown when the page first loads. Default are something like (To: Todays date and From date would be Todays- 5) Same goes for all other options.

            Earlier I used for face problem with reseting the form when page loads the second time(On click of Update Chart button), but with complete of one of the experts here, I was able to fix that problem. The code I got for that issue is in this link:

 http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24556741.html

   This only resets the Dropdown value, not the From and To. I tried on my own, but Honestly now I have no clue to to do it. Can you please help meout resetting the whole form.(Even after submitting the form.)

           
<script>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
       alert('From date is higher than To date. Please reenter the
dates correctly!');
} else if (timelineGaps[timeline.value] > gap ) {
alert('Date ranges are entered incorrectly. Please note that you need to
enter atleast 5 days for Daily ,5 weeks for Weekly ,5 months for Monthly
,5 quarters for Quarterly & 2 years for Annually choices!');
   return false;
} else if (timelineGapsMax[timeline.value] < gap ) {
       alert('The dates selected do not agree with the time period,
please re-enter the calendar dates. Limits:     Daily:31 days
Weekly:15 weeks Monthly:15 months Quarterly:8 quarters  Annually:2
years.');
       return false;
       }
  return true;
}
</script>
 
<script>
 
function setDefaultDates() {
       var freq = document.getElementById('tm').value;
       //alert(freq);
 
               var dt=new Date();
               var oneDay = 1000*60*60*24;
               var fiveWeeks = oneDay * 36;
               var fiveMonths = oneDay * 152;
               var fiveQuarters = oneDay * 456;
               var annual = oneDay * 1000;
               var rollMonth = oneDay * 365;
 
               var eDay=dt.getDate()-1;
               var eMonth=dt.getMonth() + 1;
               var eYear=dt.getFullYear();
 
               //daily
               var sDay=dt.getDate()-6;
               var sMonth=dt.getMonth() + 1;
               var sYear=dt.getFullYear();
 
               //weekly
               var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
               //alert(wklyEndDt);
               var wklyDay;
               var wklyModifiedDay = wklyEndDt.getDay();
               if (wklyModifiedDay == 6) {
                       wklyDay = wklyEndDt.getDate();
               } else if (wklyModifiedDay == 5) {
                       wklyDay = new Date((wklyEndDt.getTime() +
oneDay)).getDate();
               } else if (wklyModifiedDay == 4) {
                       wklyDay = new Date((wklyEndDt.getTime() + 2 *
oneDay)).getDate();
               } else if (wklyModifiedDay == 3) {
                       wklyDay = new Date((wklyEndDt.getTime() + 3 *
oneDay)).getDate();
                       //alert(wklyDay);
               } else if (wklyModifiedDay == 2) {
                       wklyDay = new Date((wklyEndDt.getTime() + 4 *
oneDay)).getDate();
               } else if (wklyModifiedDay == 1) {
                       wklyDay = new Date((wklyEndDt.getTime() + 5 *
oneDay)).getDate();
               } else if (wklyModifiedDay == 0) {
                       wklyDay = new Date((wklyEndDt.getTime() + 6 *
oneDay)).getDate();
               }
 
               var wklyMonth = wklyEndDt.getMonth()+1;
               var wklyYear = wklyEndDt.getFullYear();
               //alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
 
               //monthly
               var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
               //var monthlyDay = monthlyEndDt.getDate();
               var monthlyDay = 1;
               var monthlyMonth = monthlyEndDt.getMonth()+1;
               var monthlyYear = monthlyEndDt.getFullYear();
               //alert(monthlyMonth + "/" + monthlyDay + "/" +
monthlyYear);
 
               //quarterly
               var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
               //var qrlyDay = qrlyEndDt.getDate();
               var qrlyDay = 1;
               var qrlyMonth = qrlyEndDt.getMonth()+1;
               var qrlyYear = qrlyEndDt.getFullYear();
               //alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
               //Annually
               var yrlyEndDt = new Date(dt.getTime() - annual);
               //var yrlyDay = yrlyEndDt.getDate();
               var yrlyDay = 1;
               var yrlyMonth = yrlyEndDt.getMonth()+1;
               var yrlyYear = yrlyEndDt.getFullYear();
               //alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
               //12 month rolling
               var rollEndDt = new Date(dt.getTime() - rollMonth);
               //var rollDay = rollEndDt.getDate();
               var rollDay = 1;
               var rollMonth = rollEndDt.getMonth()+1;
               var rollYear = rollEndDt.getFullYear();
               //alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
               if (freq == "Daily")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
sMonth + "/" + sDay + "/" + sYear;
               } else if (freq == "Weekly")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
wklyMonth + "/" + wklyDay + "/" + wklyYear;
               } else if (freq == "Monthly")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
               } else if (freq == "Quarterly")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
               } else if (freq == "Annually")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
               } else if (freq == "12_Month_Rolling")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
rollMonth + "/" + rollDay + "/" + rollYear;
               }
       }
</script>

Open in new window

reset.png
0
Comment
Question by:aman0711
  • 30
  • 29
59 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24828804
Can you explain to what values the From/To should be reset?
0
 
LVL 10

Author Comment

by:aman0711
ID: 24828815
Sure Sir,
                  These are gap values for From and To:
                 timelineGaps["Daily"] = 5;
                 timelineGaps["Weekly"] = 30;
                 timelineGaps["Monthly"] = 150;
                 timelineGaps["Quarterly"] = 450;
                 timelineGaps["Annually"] = 600;
                 First the page would load with Monthly, and From - To = 150 days... Now lets say user entered its own dates and Click Update Chart to get fresh data.. once he gets the data and Clicks reset to default then He Should See Monthly(which was fixed by other expert) and From and To dates resetted to Todays Date - 150 days.
                 Hope I explained it fine :)
   
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24828841
hm.  I "think" I see.

While I was looking at your code, I saw this nested if...

  if ( wklyModifiedDay == 6 ) {
    wklyDay = wklyEndDt.getDate();
  } else if ( wklyModifiedDay == 5 ) {
    wklyDay = new Date( ( wklyEndDt.getTime() + oneDay ) ).getDate();
  } else if ( wklyModifiedDay == 4 ) {
    wklyDay = new Date( ( wklyEndDt.getTime() + 2 * oneDay ) ).getDate();
  } else if ( wklyModifiedDay == 3 ) {
    wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
    //alert( wklyDay );
  } else if ( wklyModifiedDay == 2 ) {
    wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
  } else if ( wklyModifiedDay == 1 ) {
    wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
  } else if ( wklyModifiedDay == 0 ) {
    wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
  }

Do you know that there is a much easier way to do this?
You can greatly simplify things once you realize that the wklyModifiedDay values are all integers from 0..6
and that given one of these values, you want wklyDay to be a future date from 0..6 days in the future, and that the relationship between wklyModifiedDay and the number of days to be added is an inverse relationship.

So when wklyModifiedDay == 6 => add 0 days,
when wklyModifiedDay == 5 => add 1 day,
when wklyModifiedDay == 4 => add 2 days, and so on.

So, if we subtract wklyModifiedDay from 6, we get the number of days to be added, and this collection of nested if statements can be replaced by:

wklyDay = new Date( ( wklyEndDt.getTime() + ( 6 - wklyModifiedDay ) * oneDay ) ).getDate();


Where is the current "reset" routine?
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 10

Author Comment

by:aman0711
ID: 24828869
Current Reset Rountin?
 
You mean the HTML form that is reseting it?
this is here:
 http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24556741.html

Actually my colleague wrote that big chunk of code. We are newbies in this :)
And if I am correct, then we were given a task that, From date on weekly, should always be the first day of the week. I guess thats why he did that.
So now the requirement dropped down to , Resetting to Monthly(which is already thr), and Populating From and To, Corresponding to Monthly.
You really chopped off at least 20 lines of code in just one line :)
 
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24828894
Do you have some code that is executed when the page is loaded?
0
 
LVL 10

Author Comment

by:aman0711
ID: 24828898
Yes its some java code.. On the backend
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24828899
If so, it could be called just before the validateDates() executes the "return true;"
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24828919
We may need to have some coded executed when the page is loaded that saves the original From/To values, and which is called (as noted above) to restore the values.

It might be as simple as something like this:

and then adding these lines just in front of the "return true" in validateDates():
----------------------------------------------------------------------
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
  return true;
var initial_From = null;
var initial_To   = null;
 
var onload = window.onload;
window.onload = function() {
  if ( onload ) {
    onload();
  }
  var from_date = document.getElementById( 'from_date' );
  if ( from_date ) {
    initial_From = from_date.value;
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {
    initial_To = to_date.value;
  }
}

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24828992
Thank you sir :)
I will try it in the morning and get back to u with results :)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24829979
I thought about it while in bed.  

There is an error.  We don't want to reset the values BEFORE we return true, we want to do it AFTER.

So  what we need to to have something like this "just before" the "return true":

...
  setTimeout( 'restore()', 100 );
  return true;
}

This says to wait for 1/10 of a second then call the restore() function.
This should give the submit plenty of time to complete before restoring the initial values.
function restore() {
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
}

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24830544
>> This should give the submit plenty of time to complete before restoring the initial values

Morning Sir,

               I guess we are on different levels :)

              We dont need to display defaults after Submit is clicked. Only when:

                 * User Clicked Sumbit, he gets new Databack, and From and To fields are populated with values he picked...
                Now he can click Reset to Defaults. and this would restore it to, Monthly and corresponding From and to dates
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24830928
I'm sorry, I don't quite follow you.

I thought that you were interested in restoring the value after the submit.

So if you want to have a reset button to restore the values instead, you could have a button like the following.

Is that what you want/need?

<input type='button' value='Restore' onclick='restore()'>

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24830960
Hmm Actually,
 
           Other expert gave me this line of code and told me that if would reset From and To dates, I just need to replace ALPHA and BETA. with from and to fields ids,.
         but somehow it isnt working,, this is my complete page.

          Right now it resets the drop down to Monthly. But along with that I want the dates to be resetted to respective monthly From and To.

           

<script>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
	alert('From date is higher than To date. Please reenter the dates correctly!');
} else if (timelineGapsMax[timeline.value] < gap ) {
	alert('The dates selected do not agree with the time period, please re-enter the calendar dates.');
	return false;
	}
   return true;
}
</script>
 
<script>
 
function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		var dt=new Date();
		var oneDay = 1000*60*60*24;
		var fiveWeeks = oneDay * 36;
		var fiveMonths = oneDay * 152;
		var fiveQuarters = oneDay * 456;
		var annual = oneDay * 1000;
		var rollMonth = oneDay * 365;
 
		var eDay=dt.getDate()-1;
		var eMonth=dt.getMonth() + 1;
		var eYear=dt.getFullYear();
 
		//daily
		var sDay=dt.getDate()-6;
		var sMonth=dt.getMonth() + 1;
		var sYear=dt.getFullYear();
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
</script>
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="#" class="tip" style='text-decoration:none'>Print<span>To print a single chart right click on the chart and select Print Chart</span></a>&nbsp; &nbsp; &nbsp;<a href="#" class="tip" style='text-decoration:none'>Save<span>To save a chart right click on the chart and select one of the following</span></a> </div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm" onsubmit="return validateDates()">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm" onchange="setDefaultDates()"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\"Monthly\")").attr("selected","selected");return false'>Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:left;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24831088
I don't see ALPHA, BETA, or any form submit action.

Does this page contact a server application when the form is submitted?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24831098
I do see how the validation routine is called by the submit button...

Normally, there would be an action attribute on the form tag that would identify what to do, or where to go when the validate() function returns true.
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24831406
Yes this page sends Timeline and Froma dnTo dates to the server.

Actually this is the line that resets the form. Its in that code.

<a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\"Monthly\")").attr("selected","selected");return false'>Reset To Defaults</a></div>

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24831619
Wow, I would never have seen that.  Maybe I really should learn jQuery... :-)

It looks like all that does it to reset the "selected" value for the "timelines" select statement to the option that contains "Monthly".

What if we changed that link to be something like this:

<a href="#" style='text-decoration: none; color:#2525FF;' onClick='return restore()'>Reset To Defaults</a></div>

and changed the restore function definition to something like:
function restore() {
  $("option:contains(\"Monthly\")").attr("selected","selected");
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
  return false;
}

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24831623
You are missing some code at the very beginning where you show how, and from where the jQuery code is to be loaded.

You are also missing the <html> and <head> tags, as well as a DOCTYPE.
0
 
LVL 10

Author Comment

by:aman0711
ID: 24831666
I am sure you dont need to learn jquery,, you are a Sage in javascript :)

This is the complete code.
Sir, where should I declare the function you gave me? in the <head> ?? or inside the same script

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<style type="text/css">
           @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
 
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="printSavePdf.html?height=300&width=300" class="thickbox">CSS</a></div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick="document.forms[0].reset();return false">Reset To Defaults</a></div>
<br />
<h6 style="font-size:4px; font-wight:lighter; padding-left:17px;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>
<br />
 
 
<div style="border:3px solid #99CCFF; width:160px; margin-left:5px; padding-left:2px; background:white;">
<div style="font-weight:bold; color:#EDA12E; background: #EBEBEB;"><b>System Bulletin</b></div>
<br />
<div style="font-weight:100; color:#000; line-height:normal; font-size:9px; margin:5px 0;">${bulletin}</div>
 
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24831714
the restore() function would be in the <script> clause, or in the external file referenced by the src attribute of one of your script tags.

If I had to guess, I would say that you probably have the script shown above (i.e., in the code snippet portion of the question) in ashscript1.js.

You will need to add the code from http:#a24828919 as well as the restore() function from http:#a24831619 and revise the anchor tag as shown in http:#a24831619

Does that make sense?
0
 
LVL 10

Author Comment

by:aman0711
ID: 24831731
I am really very sorry Sir,

                Actually my mind is like stuck right now... havent had enough sleep :(

                This is the code. the script is in <Head>..
 
                The ashscript you mentioned, is for a popup calendar.

                In fact this code, doesnt even uses jquery at all.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<style type="text/css">
           @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
 
<script>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
	alert('From date is higher than To date. Please reenter the dates correctly!');
} else if (timelineGapsMax[timeline.value] < gap ) {
	alert('The dates selected do not agree with the time period, please re-enter the calendar dates.');
	return false;
	}
   return true;
}
</script>
 
<script>
 
function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		var dt=new Date();
		var oneDay = 1000*60*60*24;
		var fiveWeeks = oneDay * 36;
		var fiveMonths = oneDay * 152;
		var fiveQuarters = oneDay * 456;
		var annual = oneDay * 1000;
		var rollMonth = oneDay * 365;
 
		var eDay=dt.getDate()-1;
		var eMonth=dt.getMonth() + 1;
		var eYear=dt.getFullYear();
 
		//daily
		var sDay=dt.getDate()-6;
		var sMonth=dt.getMonth() + 1;
		var sYear=dt.getFullYear();
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
</script>
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="#" class="tip" style='text-decoration:none'>Print<span>To print a single chart right click on the chart and select Print Chart</span></a>&nbsp; &nbsp; &nbsp;<a href="#" class="tip" style='text-decoration:none'>Save<span>To save a chart right click on the chart and select one of the following</span></a> </div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm" onsubmit="return validateDates()">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm" onchange="setDefaultDates()"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\"Monthly\")").attr("selected","selected");return false'>Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:left;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>
<br />
 
 
<div style="border:3px solid #99CCFF; width:160px; margin-left:5px; padding-left:2px; background:white;">
<div style="font-weight:bold; color:#EDA12E; background: #EBEBEB;"><b>System Bulletin</b></div>
<br />
<div style="font-weight:100; color:#000; line-height:normal; font-size:9px; margin:5px 0;">${bulletin}</div>
 
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24831769
ok,  I understand completely.

- change the <script> tag to be:

<script type='text/javascript'>

- Add the following, just before the closing script tag (i.e., line 172)

- and change the <a tag (anchor) in line 210 to be

<a href="#" style='text-decoration: none; color:#2525FF;' onClick='return restore()'>Reset To Defaults</a></div>
function restore() {
  $("option:contains(\"Monthly\")").attr("selected","selected");
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
  return false;
}
 
var initial_From = null;
var initial_To   = null;
 
var onload = window.onload;
window.onload = function() {
  if ( onload ) {
    onload();
  }
  var from_date = document.getElementById( 'from_date' );
  if ( from_date ) {
    initial_From = from_date.value;
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {
    initial_To = to_date.value;
  }
}

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24831795
Thank You sir,

             So monthly is still getting a reset but, its not resetting the From and To fields
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24831841
Let's see what values were saved...
function restore() {
  $("option:contains(\"Monthly\")").attr("selected","selected");
  alert( 'initial_From: ' + initial_From );
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  alert( 'initial_To: ' + initial_To );
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
  return false;
}

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24831867
Hmmm... both came us as null sir.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24831984
which says that the onload function isn't being exeucted...

In this update http:#a24831666, you have these lines:

<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>

In this update http:#a24831731, you only have this:

<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>

Why?  Which contains the actual code that you are using?

put the <script type='text/javascript'> containing this:

var timelineGaps = new Array();

as the last script section.
0
 
LVL 10

Author Comment

by:aman0711
ID: 24832011
I am sorry I dont know how those scripts left out,

 I did put them this time, but getting the same null.

I followed the steps you jut suggested.. and here is the complete code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<style type="text/css">
           @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
 
 
 
<script type='text/javascript'>
 
function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		var dt=new Date();
		var oneDay = 1000*60*60*24;
		var fiveWeeks = oneDay * 36;
		var fiveMonths = oneDay * 152;
		var fiveQuarters = oneDay * 456;
		var annual = oneDay * 1000;
		var rollMonth = oneDay * 365;
 
		var eDay=dt.getDate()-1;
		var eMonth=dt.getMonth() + 1;
		var eYear=dt.getFullYear();
 
		//daily
		var sDay=dt.getDate()-6;
		var sMonth=dt.getMonth() + 1;
		var sYear=dt.getFullYear();
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
function restore() {
	  $("option:contains(\"Monthly\")").attr("selected","selected");
	  alert( 'initial_From: ' + initial_From );
	  if ( initial_From ) {
	    document.getElementById( 'from_date' ).value = initial_From;
	  }
	  alert( 'initial_To: ' + initial_To );
	  if ( initial_To ) {
	    document.getElementById( 'to_date' ).value = initial_To;
	  }
	  return false;
	}
 
	 
	var initial_From = null;
	var initial_To   = null;
	 
	var onload = window.onload;
	window.onload = function() {
	  if ( onload ) {
	    onload();
	  }
	  var from_date = document.getElementById('from_date');
	  if ( from_date ) {
	    initial_From = from_date.value;
	  }
	  var to_date = document.getElementById( 'to_date' );
	  if ( to_date ) {
	    initial_To = to_date.value;
	  }
	}
 
 
</script>
 
<script type='text/javascript'>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
	alert('From date is higher than To date. Please reenter the dates correctly!');
} else if (timelineGapsMax[timeline.value] < gap ) {
	alert('The dates selected do not agree with the time period, please re-enter the calendar dates.');
	return false;
	}
   return true;
}
</script>
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="#" class="tip" style='text-decoration:none'>Print<span>To print a single chart right click on the chart and select Print Chart</span></a>&nbsp; &nbsp; &nbsp;<a href="#" class="tip" style='text-decoration:none'>Save<span>To save a chart right click on the chart and select one of the following</span></a> </div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm" onsubmit="return validateDates()">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm" onchange="setDefaultDates()"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick='return restore()'>Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:left;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>
<br />
 
 
<div style="border:3px solid #99CCFF; width:160px; margin-left:5px; padding-left:2px; background:white;">
<div style="font-weight:bold; color:#EDA12E; background: #EBEBEB;"><b>System Bulletin</b></div>
<br />
<div style="font-weight:100; color:#000; line-height:normal; font-size:9px; margin:5px 0;">${bulletin}</div>
 
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24832183
replace Lines 152 to 165

with these:
	var onload = window.onload;
	window.onload = function() {
	  if ( onload ) {
	    onload();
	  }
	  var from_date = document.getElementById('from_date');
	  if ( from_date ) {
	    initial_From = from_date.value;
	  } else {
        alert( '"from_date" not found.' )
      }
	  var to_date = document.getElementById( 'to_date' );
	  if ( to_date ) {
	    initial_To = to_date.value;
	  } else {
        alert( '"to_date" not found.' )
	  }
	}

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24832209
Hmmm.. Same result:(

Null and null :(

here is the updated code :(



<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<style type="text/css">
           @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
 
 
 
<script type='text/javascript'>
 
function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		var dt=new Date();
		var oneDay = 1000*60*60*24;
		var fiveWeeks = oneDay * 36;
		var fiveMonths = oneDay * 152;
		var fiveQuarters = oneDay * 456;
		var annual = oneDay * 1000;
		var rollMonth = oneDay * 365;
 
		var eDay=dt.getDate()-1;
		var eMonth=dt.getMonth() + 1;
		var eYear=dt.getFullYear();
 
		//daily
		var sDay=dt.getDate()-6;
		var sMonth=dt.getMonth() + 1;
		var sYear=dt.getFullYear();
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
 
function restore() {
	  $("option:contains(\"Monthly\")").attr("selected","selected");
	  alert( 'initial_From: ' + initial_From );
	  if ( initial_From ) {
	    document.getElementById( 'from_date' ).value = initial_From;
	  }
	  alert( 'initial_To: ' + initial_To );
	  if ( initial_To ) {
	    document.getElementById( 'to_date' ).value = initial_To;
	  }
	  return false;
	}
 
	 
	var initial_From = null;
	var initial_To   = null;
	 
	var onload = window.onload;
	window.onload = function() {
	  if ( onload ) {
	    onload();
	  }
	  var from_date = document.getElementById('from_date');
	  if ( from_date ) {
	    initial_From = from_date.value;
	  } else {
        alert( '"from_date" not found.' )
      }
	  var to_date = document.getElementById( 'to_date' );
	  if ( to_date ) {
	    initial_To = to_date.value;
	  } else {
        alert( '"to_date" not found.' )
	  }
	}
 
 
</script>
 
<script type='text/javascript'>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
	alert('From date is higher than To date. Please reenter the dates correctly!');
} else if (timelineGapsMax[timeline.value] < gap ) {
	alert('The dates selected do not agree with the time period, please re-enter the calendar dates.');
	return false;
	}
   return true;
}
</script>
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="#" class="tip" style='text-decoration:none'>Print<span>To print a single chart right click on the chart and select Print Chart</span></a>&nbsp; &nbsp; &nbsp;<a href="#" class="tip" style='text-decoration:none'>Save<span>To save a chart right click on the chart and select one of the following</span></a> </div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm" onsubmit="return validateDates()">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm" onchange="setDefaultDates()"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick='return restore()'>Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:left;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>
<br />
 
 
<div style="border:3px solid #99CCFF; width:160px; margin-left:5px; padding-left:2px; background:white;">
<div style="font-weight:bold; color:#EDA12E; background: #EBEBEB;"><b>System Bulletin</b></div>
<br />
<div style="font-weight:100; color:#000; line-height:normal; font-size:9px; margin:5px 0;">${bulletin}</div>
 
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24832324
ok, let's have the window.onload tell us what it is saving...

Replace lines 154-170 with
window.onload = function() {
  if ( onload ) {
    onload();
  }
  var from_date = document.getElementById('from_date');
  if ( from_date ) {
    initial_From = from_date.value;
    alert( 'from_date = "' + initial_From + '"' );
  } else {
    alert( '"from_date" not found.' );
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {
    initial_To = to_date.value;
    alert( 'to_date = "' + initial_To + '"' );
  } else {
    alert( '"to_date" not found.' );
  }
}

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24832482
So now as soon as the page loads, i am getting stack over flow at line: 244

also in the code:

        window.onload = function() {
          if ( onload ) {
            onload();

 I am getting onload cannot be resolved (inside the if)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24832571
interesting.  Change that code from this:

var onload = window.onload;
window.onload = function() {
  if ( onload ) {
    onload();
  }


To this:

var oldOnload = window.onload;
window.onload = function() {
  if ( oldOnload ) {
    oldOnload();
  }
0
 
LVL 10

Author Comment

by:aman0711
ID: 24832596
Did that... still the same error Sir :(


Snap shot attached


javascropptweqwe.PNG
0
 
LVL 10

Author Comment

by:aman0711
ID: 24832607
Little progress Sir,

               with this modification, I am able to see intial From and To dates in the alert box... but its still not resetting :(
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24832626
Do the initial_From and initial_To values contain the expected date values?
0
 
LVL 10

Author Comment

by:aman0711
ID: 24832632
Yes they do :)

But not resetting yet :(
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24832653
ok.  Let's see if I understand this correctly.

- You see the onload messages that display the expected "initial_From" and "initial_To" values.
- You make changes,
- You click the reset link
- You see alert messages indicating that "initial_From" and "initial_To" are null

Is that right?
0
 
LVL 10

Author Comment

by:aman0711
ID: 24832672
No,

         Here is the Flow:

           Page loads for the first time:

            I see Monthly (because thats what default is set to) -
            I see the From and To dates corresponding to Monthly in alert boxs.

            Till this point we are good...

            Now I change Monthly to Weekly, From and To gets default values for Weekly and I hit update Chart button.. Page loads again.. with Weekly in the dropdown and dates corresponding to Weekly..

             now when i hit Reset to Defaults, Weekly resets to Monthly and then  the From and to dates for weekly show up (at this point , we need the monthly dates because reset has been hit). :(
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24832754
ok, that's what's messing things up.

"Page loads again.."

So, at the point when the change is made from Monthy to Weekly, do you see the "initial_From" and "initial_To" values as the Weekly "From" and "To" dates?

and when you use the "Reset" link, are you still seeing the "null" values for the From and To values?
0
 
LVL 10

Author Comment

by:aman0711
ID: 24832764
Actually that form is used with spring framework.. Tthats why we don't have any action :(
0
 
LVL 10

Author Comment

by:aman0711
ID: 24832774
We are so close yet.. so far :)

Any other solution Sir?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24832819
Do you have answers for the questions?

Q: When you change from "Monthly" to "Weekly", do you see the "initial_From" and "initial_To" value messages?

     If so, do they have the "Weekly", or the "Monthy" values?

Q: When you click the Reset link, are you still seeing alerts that indicate that initial_From and initial_To are  "null"?
0
 
LVL 10

Author Comment

by:aman0711
ID: 24832933
>> Q: When you change from "Monthly" to "Weekly", do you see the "initial_From" and "initial_To" value messages?

                When I change monthly to weekly and hit updater chart.. I see initial_From and initial_To with weekly values.

 
When you click the Reset link, are you still seeing alerts that indicate that initial_From and initial_To are  "null"?

 No. On clicking Reset Link, I am seeing weekly values (i.e. the dropdown list value we picked before hitting update chart)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24834396
ok, I think that I'm understanding the requirement better.

Let me think about it for a few moment.

Sorry for being so obtuse.
0
 
LVL 10

Author Comment

by:aman0711
ID: 24834406
Not a problem Sir :) You helped me so much till now.

If we dissect the problem then it would be as simple as :

When page first loads , it has Monthly and corresponding From and To date...

Now no matter what happens (User hits Update Chart or Not), Rest To Defaults Should always restore , Monthly and those two corresponding From and To values, which were there when the page loaded first :)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24834413
Where you currently have this:

  var from_date = document.getElementById('from_date');
  if ( from_date ) {
    initial_From = from_date.value;
    alert( 'from_date = "' + initial_From + '"' );
  } else {
    alert( '"from_date" not found.' );
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {
    initial_To = to_date.value;
    alert( 'to_date = "' + initial_To + '"' );
  } else {
    alert( '"to_date" not found.' );
  }

replace it with this:
  var from_date = document.getElementById('from_date');
  if ( from_date && !initial_From ) {
    initial_From = from_date.value;
    alert( 'from_date = "' + initial_From + '"' );
  } else {
    alert( '"from_date" not found.' );
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date && !initial_To ) {
    initial_To = to_date.value;
    alert( 'to_date = "' + initial_To + '"' );
  } else {
    alert( '"to_date" not found.' );
  }

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24834415
I'm not completely sure if it will work or not.

I'm trying to figure out how to determine whether the "Monthly" option has been selected, and only save the initial_From and initial_To when that is the case.
0
 
LVL 10

Author Comment

by:aman0711
ID: 24834448
I am driving to office sir... Will get back to u with results in another 30 mins :)
0
 
LVL 10

Author Comment

by:aman0711
ID: 24834576
Sir, Now getting this error:

The operator &&;&&; is undefined for the argument type(s) Element, boolean
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24834817
Interesting.


  var from_date = document.getElementById('from_date');
  if ( from_date && ( initial_From == null ) ) {
    initial_From = from_date.value;
    alert( 'from_date = "' + initial_From + '"' );
  } else {
    alert( '"from_date" not found.' );
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date && ( initial_To == null ) ) {
    initial_To = to_date.value;
    alert( 'to_date = "' + initial_To + '"' );
  } else {
    alert( '"to_date" not found.' );
  }

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24834830
Sir, it started working :)

I dont know what I did... but it started working...

I moved all the variables to global scope.

The instead to storing the value some where.. I directly passed the dates.

 var initial_To = eMonth + "/" + eDay + "/" + eYear;    
  var initial_From = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;

and it started to reset :-)

Can you please have a look at the code :-) and teach me a bit about the reset code you gave me :)

function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
 
function restore() {
 
	  $("option:contains(\"Monthly\")").attr("selected","selected");
	  
	   var initial_To = eMonth + "/" + eDay + "/" + eYear; 	
	   var initial_From = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
	  
	  if ( initial_From ) {
	    document.getElementById( 'from_date' ).value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
	  }
	 
	  if ( initial_To ) {
	    document.getElementById( 'to_date' ).value =  eMonth + "/" + eDay + "/" + eYear; 	
	  }
	  return false;
	}
 
	 
	var initial_From = null;
	var initial_To   = null;
	var from_date = "";
	 
	var onload = window.onload;
	window.onload = function() {
	  if ( onload ) {
	    onload();
	  }
	     from_date =  document.getElementById('from_date');
	  if ( from_date ) {
	    initial_From = from_date.value;
	  } else {
        alert( '"from_date" not found.' )
      }
	  var to_date = document.getElementById( 'to_date' );
	  if ( to_date ) {
	    initial_To = to_date.value;
	  } else {
        alert( '"to_date" not found.' )
	  }
	}
 
 
</script>

Open in new window

0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24835123
Is this enough?

The restore function depends upon the existence of some global variables.  If they exist (i.e., are not null), these values will be used to restore the associated field values when the function is called.

A new onload routine is added that will save the initial values of the From and To date fields in global variables.
//--------------------------------------------------------------------
// Name: restore()
// Role: Called to restore the select value to "Monthly", and the
//       saved "from_date" and "to_date" values stored in global
//       variables.
//--------------------------------------------------------------------
function restore() {
  $("option:contains(\"Monthly\")").attr("selected","selected");
 
  var initial_To = eMonth + "/" + eDay + "/" + eYear; 	
  var initial_From = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
  
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
  }
 
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value =  eMonth + "/" + eDay + "/" + eYear; 	
  }
  return false;
}
 
//--------------------------------------------------------------------
// Global variables
//-------------------------------------------------------------------- 
var initial_From = null;
var initial_To   = null;
var from_date    = '';
 
//--------------------------------------------------------------------
// Name: anonymous
// Role: Add a new Window.onload routine to save the initial From and
//       To date values.
//-------------------------------------------------------------------- 
var oldOload = window.onload;     // Initial onload value
window.onload = function() {      // New onload routine
  if ( oldOnload ) {              // If a previous "onload" routine
    oldOnload();                  //   exists, call it.
  }                               //
  //------------------------------------------------------------------
  // Look for the "from_date" input field
  //------------------------------------------------------------------
  from_date = document.getElementById( 'from_date' );
  if ( from_date ) {                   // If the field exists...
    initial_From = from_date.value;    //   Save the initial value
  } else {                             // otherwise
    alert( '"from_date" not found.' ); //   Houston, we have a problem.
  }                                    //
  //------------------------------------------------------------------
  // Look for the "to_date" input field
  //------------------------------------------------------------------
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {                     // If the field exists...
    initial_To = to_date.value;        //   Save the initial value
  } else {                             // otherwise
    alert( '"to_date" not found.' );   //   Houston, we have a problem.
  }                                    //
}

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24835145
Wow.. thank you so much Sir :)

You helped me alot :)

Sir, posting another question related to onmouseover function.. can you have a look?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24835155
I can try... :-)
0
 
LVL 10

Author Comment

by:aman0711
ID: 24835162
Cool, I am posting an another question, will post the link here and then close this one for you
0
 
LVL 10

Author Comment

by:aman0711
ID: 24835234
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24835245
Why is it in the CSS zone?
0
 
LVL 10

Author Closing Comment

by:aman0711
ID: 31602345
Thanks :)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24835325
Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question