...

View Full Version : Document.Write Question



jason_kelly
03-21-2012, 08:58 PM
Hello,

I have the following code, which I plan on using the datepicker with, however the code currently hangs up on the script references, as to my knowlege it looks ok, and I can't seem to find anything wrong with it:




<html>



<head>

<script>

function open_cal() {


var str_html = ""
+ "<!DOCTYPE html>"
+ "<html lang='en'>"
+ "<head>"
+ "<meta charset='utf-8'>"
+ "<title>CALENDAR</title>"
+ "<link href=jq/jquery-ui.css rel=stylesheet type=text/css/>"
+ "<script src=jq/jquery.min.js type=text/javascript></script>"
+ "<script src=jq/jquery-ui.min.js type=text/javascript></script>"
+ "</head>"
+ "<body>"
+ "<p>Hello test</p>"
+ "</body>"
+ "</html>"

var j = window.open("","CALENDAR","width=200,height=250,status=no,resizable=yes,top=200,left=200")

j.document.write(str_html);
j.document.close();
}


</script>



</head>

<body>

<input onclick="open_cal()" type="button" value="Open" name="B1">


</body>

</html>



I need your help.

Any ideas?

Thanks very much in advance,

J

DaveyErwin
03-21-2012, 09:11 PM
Script always ends when it sees
</script>
Do something like
"</" + "script>"

felgall
03-21-2012, 09:17 PM
Script always ends when it sees
</script>
Do something like
"</" + "script>"

or <\/script>

A better alternative though is to get rid of all the HTML tags out of the text that the JavaScript is referencing and generate the tags properly using the JavaScript createElement() command.

Old Pedant
03-21-2012, 09:34 PM
An even better way would be to do something like


var j = window.open("calendarSkeleton.html","CALENDAR","....");

That is, instead of document.write-ing all the content in the popup window, create an HTML page that has all the important code ALREADY IN THE PAGE.

And then just use DOM methods to tweak the contents.

You could even do


var j = window.open("calendarSkeleton.html?month=7&year=2010","CALENDAR","....");

or, for that matter,


var j = window.open("calendarSkeleton.php?month=7&year=2010","CALENDAR","....");

and use JavaScript code alread in the page (in the case of the ".html" page) or PHP code to parse the querystring and build the calendar. Much better than using document.write to a popup page to create new HTML. Ugh.

(And an even better idea is to use a POPON calendar--a <div> that just has a higher z-index than the rest of the page--so that you don't EVER run into popup block problems. If you won't laugh *TOO* hard at code that is now almost 10 years old, you can see my way of doing it here:
http://www.clearviewdesign.com/Newbie/Demos/poponCalendarDemo.shtml
p.s.: Click on the month name and/or year number to see another sneaky trick.)

felgall
03-21-2012, 10:01 PM
If you really want to be able to easily create calendars from JavaScript then the simplest way is to extend the Date object to add a calendar method.


Date.prototype.calendar = function() {
"use strict";
var tabl, row, i, j, r, dow, mth, n, w, e, x;
e = new Date(this.getFullYear(), this.getMonth()+1,0);
x = e.getDate();
w = 1;
n = (36+this.getDay()-this.getDate())%7;
r = 1+((n+x)/7);
dow = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
mth = ['January','February','March','April','May','June','July', 'August','September','October','November','December'];
tabl = document.createElement('table');
tabl.createCaption();
tabl.caption.innerHTML = mth[this.getMonth()]+' '+this.getFullYear();
tabl.createTHead();
row = tabl.tHead.insertRow(-1);
for (i=0; i < 7; i++) {
row.insertCell(i);
row.cells[i].innerHTML = dow[i];
}
tabl.appendChild(document.createElement('tbody'));
for (j=1; j < r; j++) {
row = tabl.tBodies[0].insertRow(-1);
for (i=0; i < 7; i++) {
row.insertCell(i);
if (w < n+1 || w-n > x)
row.cells[i].innerHTML = '&nbsp;';
else row.cells[i].innerHTML = w-n;
if (this.getDate()===w-n)
row.cells[i].className='today';
w++;
}
}
};

You can then add a calendar into any spot in the current page using code such as:


var feb = new Date(2012, 1, 17);
document.getElementById('cal').appendChild(feb.toCalendar());

which will put a calendar for February 2012 into whatever tag in the page has id="cal". To then replace that with the calendar for March you'd use:


var mar = new Date(2012, 2, 22);
calid = document.getElementById('cal');
calid.parentNode.replaceChild(mar.toCalendar(),calid);

That does away with the huge overhead of all the jQuery libraries and makes it far easier for you to be able to modify how you want the calendars to work as you only have about thirty JavaScript statements as your starting point instead of many thousands so the spot to modify to add whatever else you want is much easier to locate.

jason_kelly
03-21-2012, 11:47 PM
Thanks to everyone for their kind replies.

felgall, I can't seem to get your code to work, what would the html be in order to get it to run?

Thanks a bunch

J

felgall
03-22-2012, 02:09 AM
felgall, I can't seem to get your code to work, what would the html be in order to get it to run?


<div id="cal"></div>

with the script attached to the bottom of the page so that the id exists before the script tries to access it.

There's an actual live example attached to http://javascriptexample.net/extobjects55.php with the only difference being that it uses a separate $D object to extend the Date object so as to leave the actual Date object alone.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum