The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Javascript Dynamic Table Creation, Object Error
mathceleb
post May 16 2009, 09:16 PM
Post #1


Member
***

Group: Members
Posts: 40
Joined: 4-October 08
Member No.: 6,807
I'm trying to create a dynamic table. The file is locatd here: http://www.barrycode.com/tester.php

Below is the code, and I'm getting an object error:


CODE
<?php include("bcmenu.php"); ?>


<html>
<head>
<title>Dynamic Table</title>

<script>
var DEFAULT_WIDTH = 200;
var DEFAULT_HEIGHT = 200;

function lday(month,year)
{
var dd = new Date(year, month, 0);
return dd.getDate();
}

function CreateTable(cmonth, cyear, srcHolder)
{
prev_year = cyear;
next_year = cyear;
prev_month = cmonth-1;
next_month = cmonth+1;
if (prev_month == 0 )
{
prev_month = 12;
prev_year = cyear - 1;
}
if (next_month == 13 )
{
next_month = 1;
next_year = cyear + 1;
}

srcHolder.innerHTML = "";
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "Black";
srcTable.height = DEFAULT_HEIGHT;
srcTable.width = DEFAULT_WIDTH;
// srcTable.align = "center";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
x=new Date();
maxday=lday(cmonth,cyear);
fom=newDate(cyear,cmonth-1,1);
startday=fom.getDay();
alert(startday);
for(i=0; i<(maxday+startday); i++)
{
targday=i-startday+1;
if((i % 7) == 0 ) {tmpRow = srcTable.insertRow();}

tmpCell = tmpRow.insertCell();
tmpCell.innerText = targday;
tmpCell = null;
if((i % 7) == 6 ) {tmpRow = null;}
}
    
}
</script>

</head>

<body onload="CreateTable(5,2009,divHolder)">

<div id=divHolder>
        
</div>


</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 16 2009, 10:21 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
My debugger says the error is on line 1320 and points to the below line if that's to any help.

CODE
fom=newDate(cyear,cmonth-1,1);


It looks like you have included a whole other HTML document. You have two HTML, two HEAD and so on. There's and onload attribute in the BODY tag close to the end of the main document. That can't help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mathceleb
post May 16 2009, 10:41 PM
Post #3


Member
***

Group: Members
Posts: 40
Joined: 4-October 08
Member No.: 6,807
QUOTE(pandy @ May 16 2009, 10:21 PM) *

My debugger says the error is on line 1320 and points to the below line if that's to any help.

CODE
fom=newDate(cyear,cmonth-1,1);


It looks like you have included a whole other HTML document. You have two HTML, two HEAD and so on. There's and onload attribute in the BODY tag close to the end of the main document. That can't help.


Below is a better calendar that I started. I'm trying to install 2 arrows, left and right that click to the previous and next month. I'm getting a JS error I'm not sure of: I cannot see the previous arrow, and when I click the next arrow, I get an error: http://www.barrycode.com/calendar2.php

CODE
<HTML>
<HEAD>
<TITLE>JavaScripted Static Table</TITLE>
<script LANGUAGE="JavaScript">
// function becomes a method for each month object
function getFirstDay(theYear, theMonth){
    var firstDate = new Date(theYear,theMonth,1)
    return firstDate.getDay() + 1
}
// number of days in the month
function getMonthLen(theYear, theMonth) {
    var oneDay = 1000 * 60 * 60 * 24
    var thisMonth = new Date(theYear, theMonth, 1)
    var nextMonth = new Date(theYear, theMonth + 1, 1)
    var len = Math.ceil((nextMonth.getTime() -
        thisMonth.getTime())/oneDay)
    return len
}
// correct for Y2K anomalies
function getY2KYear(today) {
    var yr = today.getYear()
    return ((yr < 1900) ? yr+1900 : yr)
}
// create basic array
theMonths = new MakeArray(12)
// load array with English month names
function MakeArray(n) {
    this[0] = "January"
    this[1] = "February"
    this[2] = "March"
    this[3] = "April"
    this[4] = "May"
    this[5] = "June"
    this[6] = "July"
    this[7] = "August"
    this[8] = "September"
    this[9] = "October"
    this[10] = "November"
    this[11] = "December"
    this.length = n
    return this
}
// end -->
</SCRIPT>
</HEAD>
<body onload = "calshow(5,2009)" >

<?php
?>

<script LANGUAGE="JavaScript">
<!-- start
// initialize some variables for later
function calshow(cmonth,cyear)
{
prev_year = cyear;
next_year = cyear;
prev_month = cmonth-1;
next_month = cmonth+1;

if (prev_month == 0 )
{
prev_month = 12;
prev_year = cyear - 1;
}
if (next_month == 13 )
{
next_month = 1;
next_year = cyear + 1;
}

// var today = new Date()
// var theYear = getY2KYear(today)
// var theMonth = today.getMonth() // for index into our array
theMonth=cmonth-1;

// which is the first day of this month?
var firstDay = getFirstDay(cyear, theMonth)
// total number of <TD>...</TD> tags needed in for loop below
var howMany = getMonthLen(cyear, theMonth) + firstDay

// start assembling HTML for table
var content = "<CENTER><TABLE BORDER>"
// month and year display at top of calendar
content += "<TR><TH COLSPAN=7><a href='java script:calshow(" + prev_month + "," + prev_year + ")'>&larr;</a>&nbsp;&nbsp;&nbsp;&nbsp;" + theMonths[theMonth] + " " + cyear + "&nbsp;&nbsp;&nbsp;&nbsp;<a href='java script:calshow(" + next_month + "," + next_year + ")'>&rarr;</a></TH></TR>"
// days of the week at head of each column
content += "<TR><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH>"
content += "<TH>Thu</TH><TH>Fri</TH><TH>Sat</TH></TR>"
content += "<TR>"

// populate calendar
for (var i = 1; i < howMany; i++)
{
cday=(i - firstDay + 1);
    if (i < firstDay) {
        // 'empty' boxes prior to first day
        content += "<TD></TD>"
    } else {
        // enter date number
        content += "<TD ALIGN='center'><a href='bday.php?curmonth=" + cmonth + "&curday=" + cday + "' title='Click to see MLB Birthdays on " + cmonth + "-" + cday + "'>" + cday + "</a></TD>"
    }
    // start new row after each week
    if (i % 7 == 0 &&  i != howMany) {
        content += "</TR><TR>"
    }
}
content += "</TABLE></CENTER>"

// blast entire table's HTML to the document
document.write(content)
}

// end -->
</SCRIPT>
</BODY>
</HTML>


This post has been edited by mathceleb: May 16 2009, 10:49 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 17 2009, 06:23 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,660
Joined: 10-August 06
Member No.: 7
QUOTE(mathceleb @ May 17 2009, 05:41 AM) *

I cannot see the previous arrow,

I see both.

CODE
and when I click the next arrow, I get an error

I could make both arrows work in all my browsers (newest versions) except MSIE by replacing

CODE
document.write(content)

with
CODE
document.body.innerHTML=content;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mathceleb
post May 17 2009, 11:12 AM
Post #5


Member
***

Group: Members
Posts: 40
Joined: 4-October 08
Member No.: 6,807
QUOTE(Christian J @ May 17 2009, 06:23 AM) *

QUOTE(mathceleb @ May 17 2009, 05:41 AM) *

I cannot see the previous arrow,

I see both.

CODE
and when I click the next arrow, I get an error

I could make both arrows work in all my browsers (newest versions) except MSIE by replacing

CODE
document.write(content)

with
CODE
document.body.innerHTML=content;



I'm using MSIE. I see both arrows now, but it still errors out on clicking the arrows. Everything else works perfect. I'm going to research to see why this does not work in MSIE, any suggestions would be appreciated. Thanks for your help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mathceleb
post May 17 2009, 12:16 PM
Post #6


Member
***

Group: Members
Posts: 40
Joined: 4-October 08
Member No.: 6,807
I found another workaround that works even better.

Thanks for all your help, code is below:

CODE
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<script type="text/javascript">
// merge table below with our calendar2.php code, and inside the loop, see if we can assign values
function getFirstDay(theYear, theMonth)
{
var firstDate = new Date(theYear,theMonth,1)
return firstDate.getDay() + 1
}
// number of days in the month
function getMonthLen(theYear, theMonth) {
    var oneDay = 1000 * 60 * 60 * 24
    var thisMonth = new Date(theYear, theMonth, 1)
    var nextMonth = new Date(theYear, theMonth + 1, 1)
    var len = Math.ceil((nextMonth.getTime() -
        thisMonth.getTime())/oneDay)
    return len
}
// correct for Y2K anomalies
function getY2KYear(today) {
    var yr = today.getYear()
    return ((yr < 1900) ? yr+1900 : yr)
}
// create basic array
theMonths = new MakeArray(12)
// load array with English month names
function MakeArray(n) {
    this[0] = "January"
    this[1] = "February"
    this[2] = "March"
    this[3] = "April"
    this[4] = "May"
    this[5] = "June"
    this[6] = "July"
    this[7] = "August"
    this[8] = "September"
    this[9] = "October"
    this[10] = "November"
    this[11] = "December"
    this.length = n
    return this
}

function calshow(cmonth,cyear)
{

// pick up onload to conver to current month
if (cmonth==9999)
{
var d = new Date();
var cmonth = d.getMonth()+1;
var cyear = d.getFullYear();
}


prev_year = cyear;
next_year = cyear;
prev_month = cmonth-1;
next_month = cmonth+1;

if (prev_month == 0 )
{
prev_month = 12;
prev_year = cyear - 1;
}
if (next_month == 13 )
{
next_month = 1;
next_year = cyear + 1;
}

theMonth=cmonth-1;

// which is the first day of this month?
var firstDay = getFirstDay(cyear, theMonth)
// total number of <TD>...</TD> tags needed in for loop below
var howMany = getMonthLen(cyear, theMonth) + firstDay

// spit out current month text, and 2 arrow links
document.getElementById('chead').innerHTML="<a href='java script:calshow(" + prev_month + "," + prev_year + ")'>&larr;</a>&nbsp;&nbsp;&nbsp;&nbsp;" + theMonths[theMonth] + " " + cyear + "&nbsp;&nbsp;&nbsp;&nbsp;<a href='java script:calshow(" + next_month + "," + next_year + ")'>&rarr;</a>";

// populate calendar
for (var i = 1; i < howMany; i++)
{
cday=(i - firstDay + 1);

if (i < firstDay)
{
// 'empty' boxes prior to first day
document.getElementById(i).innerHTML='';
}
else
{
// enter date number
document.getElementById(i).innerHTML="<a href='bday.php?curmonth=" + cmonth + "&curday=" + cday + "' title='Click to see MLB Birthdays on " + cmonth + "-" + cday + "'>" + cday + "</a>";
}

}
// end for i loop

}


</script>

<body onload="calshow(9999,9999)">

<table border="1" width="200px">
<tr>
<th COLSPAN=7>Barry Code Birthday Board</th>
</tr>
<tr>
<th id='chead' COLSPAN=7></th>
</tr>
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
  <tr>
    <td id='1'>&nbsp;</td>
    <td id='2'>&nbsp;</td>
    <td id='3'>&nbsp;</td>
    <td id='4'>&nbsp;</td>
    <td id='5'>&nbsp;</td>
    <td id='6'>&nbsp;</td>
    <td id='7'>&nbsp;</td>
  </tr>
  <tr>
    <td id='8'>&nbsp;</td>
    <td id='9'>&nbsp;</td>
    <td id='10'>&nbsp;</td>
    <td id='11'>&nbsp;</td>
    <td id='12'>&nbsp;</td>
    <td id='13'>&nbsp;</td>
    <td id='14'>&nbsp;</td>
  </tr>
  <tr>
    <td id='15'>&nbsp;</td>
    <td id='16'>&nbsp;</td>
    <td id='17'>&nbsp;</td>
    <td id='18'>&nbsp;</td>
    <td id='19'>&nbsp;</td>
    <td id='20'>&nbsp;</td>
    <td id='21'>&nbsp;</td>
  </tr>
    <tr>
    <td id='22'>&nbsp;</td>
    <td id='23'>&nbsp;</td>
    <td id='24'>&nbsp;</td>
    <td id='25'>&nbsp;</td>
    <td id='26'>&nbsp;</td>
    <td id='27'>&nbsp;</td>
    <td id='28'>&nbsp;</td>
  </tr>
  <tr>
    <td id='29'>&nbsp;</td>
    <td id='30'>&nbsp;</td>
    <td id='31'>&nbsp;</td>
    <td id='32'>&nbsp;</td>
    <td id='33'>&nbsp;</td>
    <td id='34'>&nbsp;</td>
    <td id='35'>&nbsp;</td>
  </tr>
    <tr>
    <td id='36'>&nbsp;</td>
    <td id='37'>&nbsp;</td>
    <td id='38'>&nbsp;</td>
    <td id='39'>&nbsp;</td>
    <td id='40'>&nbsp;</td>
    <td id='41'>&nbsp;</td>
    <td id='42'>&nbsp;</td>
  </tr>
</table>


</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 17 2009, 12:44 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,660
Joined: 10-August 06
Member No.: 7
There's a problem with the number of days per month. All months get at least 31 days, some even more.

Also an ID can't begin with a number, it has to be a letter: http://www.w3.org/TR/html401/types.html#type-name you can workaround this by calling it say "x1" and then remove the "x" in the script as needed. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
greymatt
post Jun 8 2009, 10:16 AM
Post #8





Group: Members
Posts: 1
Joined: 8-June 09
Member No.: 8,829
fom=newDate(cyear,cmonth-1,1);

should be;

fom=new Date(cyear,cmonth-1,1);



QUOTE(mathceleb @ May 16 2009, 09:16 PM) *

I'm trying to create a dynamic table. The file is locatd here: http://www.barrycode.com/tester.php

Below is the code, and I'm getting an object error:


CODE
<?php include("bcmenu.php"); ?>


<html>
<head>
<title>Dynamic Table</title>

<script>
var DEFAULT_WIDTH = 200;
var DEFAULT_HEIGHT = 200;

function lday(month,year)
{
var dd = new Date(year, month, 0);
return dd.getDate();
}

function CreateTable(cmonth, cyear, srcHolder)
{
prev_year = cyear;
next_year = cyear;
prev_month = cmonth-1;
next_month = cmonth+1;
if (prev_month == 0 )
{
prev_month = 12;
prev_year = cyear - 1;
}
if (next_month == 13 )
{
next_month = 1;
next_year = cyear + 1;
}

srcHolder.innerHTML = "";
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "Black";
srcTable.height = DEFAULT_HEIGHT;
srcTable.width = DEFAULT_WIDTH;
// srcTable.align = "center";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
x=new Date();
maxday=lday(cmonth,cyear);
fom=new Date(cyear,cmonth-1,1);
startday=fom.getDay();
alert(startday);
for(i=0; i<(maxday+startday); i++)
{
targday=i-startday+1;
if((i % 7) == 0 ) {tmpRow = srcTable.insertRow();}

tmpCell = tmpRow.insertCell();
tmpCell.innerText = targday;
tmpCell = null;
if((i % 7) == 6 ) {tmpRow = null;}
}
    
}
</script>

</head>

<body onload="CreateTable(5,2009,divHolder)">

<div id=divHolder>
        
</div>


</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 07:16 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC