Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Auto expire rows of html code by date

Status
Not open for further replies.

Argonto

Technical User
Mar 17, 2011
23
0
0
US
Hi, I am trying to setup a form that will contain several events. I would like to make it so that after the show date the block of code would automatically disappear. I have looked into a couple sets of code and found the code below. However to my knowledge document.write doesn't really work well with building a table from multiple entries. Does anyone have any ideas on what would be better?

Thanks

Code:
<script>
function autoExpire(M,D,Y,Content)
 {
//document.write(M);
//document.write(D);
//document.write(Y);

  var goLiveMonth = "08"  // Month you want your content to start displaying. Two digits.
  var goLiveDay = "08"      // Day you want your content to start displaying. Two digits.
  var goLiveYear = "2008"     // Year you want your content to start displaying. Four digits.

  var expireMonth = M   // Month you want your content to stop displaying. Two digits.
  var expireDay = D     // Day you want your content to stop displaying. Two digits.
  var expireYear = Y  // Year you want your content to stop displaying. Four digits.

  /* This is where you put your content. Make sure you escape any quotation marks with a backslash. Make sure you do not delete the opening and closing quotes. */
//document.write("<br />"+expireMonth);
//document.write(expireDay);
//document.write(expireYear);
  var myContent = (Content)

  /* Don't edit below this line. Don */

  var goLiveDate = goLiveYear+ "" + goLiveMonth+ "" + goLiveDay;  // puts START year, month, and day together.
  if (expireMonth < 10) {  /* if less than "10", put a "0" in front of the number. */
    expireMonth = "0" + expireMonth;
  }
  //document.write(expireDay);	
  var expireDate = expireYear+ "" + expireMonth+ "" + expireDay;  // puts EXPIRE year, month, and day together.

  var nowDate = new Date();
  var day = nowDate.getUTCDate();
  var month = nowDate.getUTCMonth();
  var correctedMonth = month + 1;  //month - JavaScript starts at "0" for January, so we add "1"

  if (correctedMonth < 10) {  /* if less than "10", put a "0" in front of the number. */
    correctedMonth = "0" + correctedMonth;
  }
   
  if (day < 10) {  /* if less than "10", put a "0" in front of the number. */
    day = "0" + day;
  }

  var year = nowDate.getYear();  /* Get the year. Firefox and Netscape might use century bit, and two-digit year. */
  if (year < 1900) {
    year = year + 1900;  /*This is to make sure Netscape AND FireFox doesn't show the year as "107" for "2007." */
  }

  var GMTdate = year + "" + correctedMonth + "" + day;  //corrected month GMT date.
//document.write("<br />"+GMTdate);
//document.write("<br />"+expireDate);
  if ((GMTdate <= expireDate) && (GMTdate >= goLiveDate)) {
  document.write(myContent);
  }
}
</script>

<html>
<body onLoad=autoExpire(03,22,2013,"Test");>

<p>An error has occured on the page!</p>



</body>
</html>
 
Hi

The problem with [tt]document.write()[/tt] is that it can only handle an open [tt]document[/tt]. You are using if in a function called [tt]onload[/tt], so after the rendering was done. That way [tt]document.write()[/tt] will force an implicit [tt]document.open()[/tt] which will discard the current [tt]document[/tt]. Other then that, there is no specific problem with [tt]document.write()[/tt], neither with tables or anything else.

So just move the function call into the [tt]body[/tt], in the place where the conditional content has to appear :
HTML:
[b]<html>[/b]

[b]<body>[/b]

[b]<p>[/b]An error has occured on the page![b]</p>[/b]

[b]<script>[/b]

[small][b]function[/b] [COLOR=darkgoldenrod]autoExpire[/color][teal]([/teal]M[teal],[/teal]D[teal],[/teal]Y[teal],[/teal]Content[teal])[/teal]
 [teal]{[/teal]
[gray]//document.write(M);[/gray]
[gray]//document.write(D);[/gray]
[gray]//document.write(Y);[/gray]

  [b]var[/b] goLiveMonth [teal]=[/teal] [green][i]"08"[/i][/green]  [gray]// Month you want your content to start displaying. Two digits.[/gray]
  [b]var[/b] goLiveDay [teal]=[/teal] [green][i]"08"[/i][/green]      [gray]// Day you want your content to start displaying. Two digits.[/gray]
  [b]var[/b] goLiveYear [teal]=[/teal] [green][i]"2008"[/i][/green]     [gray]// Year you want your content to start displaying. Four digits.[/gray]

  [b]var[/b] expireMonth [teal]=[/teal] M   [gray]// Month you want your content to stop displaying. Two digits.[/gray]
  [b]var[/b] expireDay [teal]=[/teal] D     [gray]// Day you want your content to stop displaying. Two digits.[/gray]
  [b]var[/b] expireYear [teal]=[/teal] Y  [gray]// Year you want your content to stop displaying. Four digits.[/gray]

  [gray]/* This is where you put your content. Make sure you escape any quotation marks with a backslash. Make sure you do not delete the opening and closing quotes. */[/gray]
[gray]//document.write("<br />"+expireMonth);[/gray]
[gray]//document.write(expireDay);[/gray]
[gray]//document.write(expireYear);[/gray]
  [b]var[/b] myContent [teal]=[/teal] [teal]([/teal]Content[teal])[/teal]

  [gray]/* Don't edit below this line. Don */[/gray]

  [b]var[/b] goLiveDate [teal]=[/teal] goLiveYear[teal]+[/teal] [green][i]""[/i][/green] [teal]+[/teal] goLiveMonth[teal]+[/teal] [green][i]""[/i][/green] [teal]+[/teal] goLiveDay[teal];[/teal]  [gray]// puts START year, month, and day together.[/gray]
  [b]if[/b] [teal]([/teal]expireMonth [teal]<[/teal] [purple]10[/purple][teal])[/teal] [teal]{[/teal]  [gray]/* if less than "10", put a "0" in front of the number. */[/gray]
    expireMonth [teal]=[/teal] [green][i]"0"[/i][/green] [teal]+[/teal] expireMonth[teal];[/teal]
  [teal]}[/teal]
  [gray]//document.write(expireDay);  [/gray]
  [b]var[/b] expireDate [teal]=[/teal] expireYear[teal]+[/teal] [green][i]""[/i][/green] [teal]+[/teal] expireMonth[teal]+[/teal] [green][i]""[/i][/green] [teal]+[/teal] expireDay[teal];[/teal]  [gray]// puts EXPIRE year, month, and day together.[/gray]

  [b]var[/b] nowDate [teal]=[/teal] [b]new[/b] [COLOR=darkgoldenrod]Date[/color][teal]();[/teal]
  [b]var[/b] day [teal]=[/teal] nowDate[teal].[/teal][COLOR=darkgoldenrod]getUTCDate[/color][teal]();[/teal]
  [b]var[/b] month [teal]=[/teal] nowDate[teal].[/teal][COLOR=darkgoldenrod]getUTCMonth[/color][teal]();[/teal]
  [b]var[/b] correctedMonth [teal]=[/teal] month [teal]+[/teal] [purple]1[/purple][teal];[/teal]  [gray]//month - JavaScript starts at "0" for January, so we add "1"[/gray]

  [b]if[/b] [teal]([/teal]correctedMonth [teal]<[/teal] [purple]10[/purple][teal])[/teal] [teal]{[/teal]  [gray]/* if less than "10", put a "0" in front of the number. */[/gray]
    correctedMonth [teal]=[/teal] [green][i]"0"[/i][/green] [teal]+[/teal] correctedMonth[teal];[/teal]
  [teal]}[/teal]
   
  [b]if[/b] [teal]([/teal]day [teal]<[/teal] [purple]10[/purple][teal])[/teal] [teal]{[/teal]  [gray]/* if less than "10", put a "0" in front of the number. */[/gray]
    day [teal]=[/teal] [green][i]"0"[/i][/green] [teal]+[/teal] day[teal];[/teal]
  [teal]}[/teal]

  [b]var[/b] year [teal]=[/teal] nowDate[teal].[/teal][COLOR=darkgoldenrod]getYear[/color][teal]();[/teal]  [gray]/* Get the year. Firefox and Netscape might use century bit, and two-digit year. */[/gray]
  [b]if[/b] [teal]([/teal]year [teal]<[/teal] [purple]1900[/purple][teal])[/teal] [teal]{[/teal]
    year [teal]=[/teal] year [teal]+[/teal] [purple]1900[/purple][teal];[/teal]  [gray]/*This is to make sure Netscape AND FireFox doesn't show the year as "107" for "2007." */[/gray]
  [teal]}[/teal]

  [b]var[/b] GMTdate [teal]=[/teal] year [teal]+[/teal] [green][i]""[/i][/green] [teal]+[/teal] correctedMonth [teal]+[/teal] [green][i]""[/i][/green] [teal]+[/teal] day[teal];[/teal]  [gray]//corrected month GMT date.[/gray]
[gray]//document.write("<br />"+GMTdate);[/gray]
[gray]//document.write("<br />"+expireDate);[/gray]
  [b]if[/b] [teal](([/teal]GMTdate [teal]<=[/teal] expireDate[teal])[/teal] [teal]&&[/teal] [teal]([/teal]GMTdate [teal]>=[/teal] goLiveDate[teal]))[/teal] [teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]write[/color][teal]([/teal]myContent[teal]);[/teal]
  [teal]}[/teal]
[teal]}[/teal][/small]

[highlight][COLOR=darkgoldenrod]autoExpire[/color][teal]([/teal][purple]03[/purple][teal],[/teal][purple]22[/purple][teal],[/teal][purple]2013[/purple][teal],[/teal][green][i]"Test"[/i][/green][teal])[/teal]
[/highlight]
[b]</script>[/b]

[b]</body>[/b]

[b]</html>[/b]

autoExpire() said:
[pre] var year = nowDate.getYear(); /* Get the year. Firefox and Netscape might use century bit, and two-digit year. */
if (year < 1900) {
year = year + 1900; /*This is to make sure Netscape AND FireFox doesn't show the year as "107" for "2007." */
}[/pre]
I would be cautious with any script containing such code and comment. That is plain stupid.

Feherke.
[link feherke.github.com/][/url]
 
This is something that should be done server side NOT client side.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Thank you feherke! That worked like a charm.

ChrisHirst, this code is for a form that collects subscription orders, runs calculations and collects credit cards, unfortunately the form is housed in a CMS that has a lot of issues. I have to use it for now because it has a secure PCI compliant database behind it.

 
The problem i am having is assigning large chucks of Html code to the content variable. Is there a better way to store and call Html code than storing it in a Var?
 
Well, javascript will work UNTIL the first visitor with js disabled arrives and sees ALL the 'disabled' entries and NONE of the new ones.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Hi

Argonto said:
The problem i am having is assigning large chucks of Html code to the content variable. Is there a better way to store and call Html code than storing it in a Var?
Taking in consideration what Chris mentioned about turned off JavaScript, better change the logic : write a complete HTML document with all necessary data, then use JavaScript to hide ( or if you prefer, to remove ) the unwanted pieces :
Code:
[b]function[/b] [COLOR=darkgoldenrod]rmexpired[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] list[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]querySelectorAll[/color][teal]([/teal][green][i]'[data-expire]'[/i][/green][teal])[/teal]
  [b]var[/b] now[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]Date[/color][teal]()[/teal]

  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]list[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
    [b]if[/b] [teal]([/teal][b]new[/b] [COLOR=darkgoldenrod]Date[/color][teal]([/teal]list[teal][[/teal]i[teal]].[/teal]dataset[teal][[/teal][green][i]'expire'[/i][/green][teal]])<[/teal]now[teal])[/teal]
      list[teal][[/teal]i[teal]].[/teal]style[teal].[/teal]display[teal]=[/teal][green][i]'none'[/i][/green]
[teal]}[/teal]

window[teal].[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'load'[/i][/green][teal],[/teal]rmexpired[teal],[/teal][b]false[/b][teal])[/teal]
Then you just
[ul]
[li][highlight #cfc]include the script[/highlight] into the pages containing expiring elements[/li]
[li][highlight #ccf]mark the expiring elements[/highlight] with a specific attribute[/li]
[/ul]
HTML:
[red]<!DOCTYPE[/red] [maroon]html[/maroon][red]>[/red]
[b]<html>[/b]
[b]<head>[/b]
[b]<title>[/b]Document with some expiring elements[b]</title>[/b]
[highlight #cfc][b]<script[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"rmexpired.js"[/i][/green][b]></script>[/b][/highlight]
[b]</head>[/b]
[b]<body>[/b]
[b]<h1[/b] [highlight #ccf][maroon]data-expire[/maroon][teal]=[/teal][green][i]"2013-03-24"[/i][/green][/highlight][b]>[/b]Title with timing[b]</h1>[/b]
[b]<p>[/b]Just a simple paragraph[b]</p>[/b]
[b]<p[/b] [highlight #ccf][maroon]data-expire[/maroon][teal]=[/teal][green][i]"2013-03-24T10:00Z"[/i][/green][/highlight][b]>[/b]Paragraph with timing[b]</h2>[/b]
[b]<table>[/b]
[b]<tr><td>[/b]just a simple[b]</td><td>[/b]table row[b]</td></tr>[/b]
[b]<tr[/b] [highlight #ccf][maroon]data-expire[/maroon][teal]=[/teal][green][i]"2013-03-24T10:25:00Z"[/i][/green][/highlight][b]><td>[/b]table row[b]</td><td>[/b]with timing[b]</td></tr>[/b]
[b]</table>[/b]
[b]</body>[/b]
[b]</html>[/b]
Tested in Gecko, Presto and WebKit. As I kept it simple, it will work only in fairly new Trident. ( [tt]querySelectorAll()[/tt] supported since Explorer 8, [tt]addEventListener()[/tt] supported since Explorer 9. )


Feherke.
[link feherke.github.com/][/url]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top