View Full Version : Document.Write Question

03-21-2012, 09:58 PM

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:




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")





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



I need your help.

Any ideas?

Thanks very much in advance,


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

03-21-2012, 10:17 PM
Script always ends when it sees
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, 10: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:
p.s.: Click on the month name and/or year number to see another sneaky trick.)

03-21-2012, 11: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.caption.innerHTML = mth[this.getMonth()]+' '+this.getFullYear();
row = tabl.tHead.insertRow(-1);
for (i=0; i < 7; i++) {
row.cells[i].innerHTML = dow[i];
for (j=1; j < r; j++) {
row = tabl.tBodies[0].insertRow(-1);
for (i=0; i < 7; 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)

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

var feb = new Date(2012, 1, 17);

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');

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.

03-22-2012, 12:47 AM
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


03-22-2012, 03: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.