homepage Welcome to WebmasterWorld Guest from 54.226.10.234
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
parsing errors and such
sgml parser errs and reset v reload
nyteshade



 
Msg#: 4329325 posted 12:18 pm on Jun 22, 2011 (gmt 0)

I'm updating an exercise I completed to conform to xhtml transitional and eventually to DOM scripting. On my way there I have two document.write statements that SGML parser flags because it thinks the <options> element is not closed AND that my <script> elements are in an illegal place (see comments in code below).

I also have an a getElementById accessor that fails and I'm not understanding why? The var has content and a preceeding like statement works just fine?

Lastly, the code works, but, I'm confused over reset and reload. I know the difference between hard and soft reload, and that reset is form related, but, when I reset the form the dates in the input elements are reset to the 'base' date from the onload function; if I reload or refresh the page then the dates are set to the current date. My question how is reset getting the 'base' dates since it does not appear to do a reload?

I know I've poo-pooed document.write and innerHTML but I still need to know how that work. My DOM scripting skills just aren't there yet. Included below is the entire script that can be cut and pasted for your convenience. As always, Thanks all!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>select &amp; date calculations</title>
<script type="text/javascript">
/* <![CDATA[ */
function writeOptions(startNumber, endNumber)
{
var optionCounter;
for (optionCounter = startNumber; optionCounter <= endNumber; optionCounter++)
{
//*******THIS CREATES STANDARD ERROR FROM SGML PARSER*******
document.write("<option value = " + optionCounter + ">" + optionCounter + "<\/option>");
}
}
function writeMonthOptions()
{
var theMonth;
var monthCounter;
var theDate = new Date(1);
for (monthCounter = 0; monthCounter < 12; monthCounter++)
{
theDate.setMonth(monthCounter);
theMonth = theDate.toString();
theMonth = theMonth.substr(4,3);

//*******THIS CREATES STANDARD ERROR FROM SGML PARSER*******
document.write("<option value = " + theMonth + ">" + theMonth + "<\/option>");
}
}
function recalcDateDiff()
{
var myForm = document.forms["form1"];
var firstDay = myForm.firstDay.options[myForm.firstDay.selectedIndex].value;
var secondDay = myForm.secondDay.options[myForm.secondDay.selectedIndex].value;
var firstMonth = myForm.firstMonth.options[myForm.firstMonth.selectedIndex].value;
var secondMonth = myForm.secondMonth.options[myForm.secondMonth.selectedIndex].value;
var firstYear = myForm.firstYear.options[myForm.firstYear.selectedIndex].value;
var secondYear = myForm.secondYear.options[myForm.secondYear.selectedIndex].value;
var firstDate = new Date(firstDay + " " + firstMonth + " " + firstYear);
var secondDate = new Date(secondDay + " " + secondMonth + " " + secondYear);
var daysDiff = (secondDate.valueOf() - firstDate.valueOf());

daysDiff = Math.floor(Math.abs((((daysDiff / 1000) / 60) / 60) / 24));
myForm.txtDays.value = daysDiff;

return true;
}
function window_onload()
{
var theForm = document.forms["form1"];
var nowDate = new Date();
theForm.firstDay.options[nowDate.getDate() - 1].selected = true;
theForm.secondDay.options[nowDate.getDate() - 1].selected = true;
theForm.firstMonth.options[nowDate.getMonth()].selected = true;
theForm.secondMonth.options[nowDate.getMonth()].selected = true;
theForm.firstYear.options[nowDate.getFullYear() - 1970].selected = true;
theForm.secondYear.options[nowDate.getFullYear() - 1970].selected = true;

//WORKS JUST FINE: this is the preceeding like statement
document.getElementById("txtDays").value=0;

var curTime = new Date();
myMonth = curTime.toString();
myMonth = myMonth.substr(4,3);
var myDay = curTime.getDate();
var myYear = curTime.getFullYear();
var strToday = myDay + "-" + myMonth +"-" + myYear;

//*******BUT THIS DOES NOT WORK*******
document.getElementById("textDate").text=strToday;

//THIS WORKS JUST FINE
document.getElementById("innerHTMLDate").innerHTML=strToday;
}
/* ]] */
</script>
</head>
<body onload="return window_onload()">

<p>textDate:</p><div id="textDate"></div><hr />
<p>innerHTMLDate:</p><div id="innerHTMLDate"></div><hr />
<p>domDate:</p><div id="domDate"></div><hr />

<form id="form1" name="form1" action="text_js_select_dateCalcs.htm" >
<p>
First Date<br />
<select name="firstDay" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeOptions(1,31);
/* ]] */
</script>
</select>
<select name="firstMonth" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeMonthOptions();
/* ]] */
</script>
</select>
<select name="firstYear" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeOptions(1970,2020);
/* ]] */
</script>
</select>
</p>
<p>
Second Date<br />
<select name="secondDay" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeOptions(1,31);
/* ]] */
</script>
</select>
<select name="secondMonth" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeMonthOptions();
/* ]] */
</script>
</select>
<select name="secondYear" onchange="return recalcDateDiff()">
<script type="text/javascript">
/* <![CDATA[ */
writeOptions(1970,2020);
/* ]] */
</script>
</select>
</p>
Total difference in days
<input type="text" id="txtDays" name="txtDays" value=0 readonly>
<input type="reset" id="txtDays" name="txtDays" value="reset">
<br />
</form>
</body>
</html>

 

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4329325 posted 2:56 pm on Jun 22, 2011 (gmt 0)

Hmmm, I'll make a start...

I was trying to dismiss the HTML/XHTML issue, but anyway... you should really be validating this to an HTML (not XHTML) DOCTYPE and getting all script into an external JS file - avoids having to escape special chars in your script, including CDATA sections, and generally makes your code easier to read.

You are incorrectly closing your CDATA sections:
/* ]] */

Should be:
/* ]]> */


... I have two document.write statements that SGML parser flags because it thinks the <options> element is not closed AND that my <script> elements are in an illegal place ...


The HTML validator isn't flagging your document.write statements (it is an HTML validator, not a JavaScript validator). It thinks the <select> elements are not closed because the <script> elements are in an illegal place. The <script> element cannot be embedded in a <select>. A quick fix is to generate the entire <select> (and <options>) using JavaScript. Since you are generating the <options> with script, you might as well generate the <select> as well.

//*******BUT THIS DOES NOT WORK*******
document.getElementById("textDate").text=strToday;


This doesn't work because there is no property 'text' (until you assign something to it!). You need to assign to the innerHTML property as you have done below OR createTextNode and assign this to the DOM.

when I reset the form the dates in the input elements are reset to the 'base' date from the onload function; if I reload or refresh the page then the dates are set to the current date.


I think this might be because when you 'reset' a form, the browser resets the form controls to the value as indicated by the selected attribute. You have instead set the selected property in script. So the browser will not see this and pick the first item in the list.

nyteshade



 
Msg#: 4329325 posted 7:40 pm on Jun 22, 2011 (gmt 0)

So js should not be dropped inline, so to speak, like PHP? I'm trying to get through chapter 6 of Beginning Javascript 3rd edition from 2007. Updating the code as I go along is a challenge for me. I'll be back with a solution after some time, thanks!

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4329325 posted 8:15 pm on Jun 22, 2011 (gmt 0)

So js should not be dropped inline, so to speak, like PHP?


Correct. The goal is to separate HTML (markup) and JavaScript (behaviours). In the same way we separate HTML and CSS (styles/layout). PHP is a bit different in that it can itself write HTML, JavaScript and CSS! But even with PHP we can get some separation using templates etc.

A JavaScript book from 2007 should be sufficiently recent in order to teach these modern/best practices.

Generally speaking, JavaScript should only be referred to in the <head> section OR before the closing </body> tag.

<head> 
<title>select &amp; date calculations</title>
<script type="text/javascript" src="scripts/myfile.js"></script>
:
</head>


Or...

:
<script type="text/javascript" src="scripts/myfile.js"></script>
</body></html>


Code linked to in the <head> section can not interact with the DOM (document) since it will execute before the document has fully loaded. UNLESS you assign your code to the document.onload event (or similar) in which case execution is delayed until this event occurs (ie. the document is loaded).

Code linked to before the closing </body> tag will execute after everything before it has loaded so you don't need to assign it to the document.onload event in order to interact with the document - it will already have loaded. This will also execute quicker (before the document.onload event) since it doesn't wait for images and other resources to fully load.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved