Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Document.Write Question

    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:

    Code:
    <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

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Script always ends when it sees
    </script>
    Do something like
    "</" + "script>"

  • Users who have thanked DaveyErwin for this post:

    jason_kelly (03-21-2012)

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by DaveyErwin View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    jason_kelly (03-21-2012)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    An even better way would be to do something like
    Code:
    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
    Code:
    var j = window.open("calendarSkeleton.html?month=7&year=2010","CALENDAR","....");
    or, for that matter,
    Code:
    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/Newbi...ndarDemo.shtml
    p.s.: Click on the month name and/or year number to see another sneaky trick.)
    Last edited by Old Pedant; 03-21-2012 at 09:40 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jason_kelly (03-21-2012)

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.

    Code:
    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:

    Code:
    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:

    Code:
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    jason_kelly (03-21-2012)

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    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

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by jason_kelly View Post
    felgall, I can't seem to get your code to work, what would the html be in order to get it to run?
    Code:
    <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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •