Solved

Use Javascript to insert an html file

Posted on 2004-10-04
9
342 Views
Last Modified: 2010-04-06
Hi to all,

I am trying to make a link where each page in a lesson is printed instead of the student having to go to each page and click print. I want them to have one place to go. The only solution I have found thus far is to use SSI, and it works great. My only problem is that I need to support everything client side since many of these lessons will go out on CD and thus no server to perform the SSI.

So here is my question, can anyone think of a way to use the already available html files to include for this multi page print?

I figured if there was a way to open an html file with Javascript and write all the contents of the file to a new file and continue to do that one after the other that would work...but, I can't seem to figure out how that would be possible.

Your help much appeciated. Thank You in advance.

Danny
0
Comment
Question by:TheGtrsR1
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 5

Expert Comment

by:php-webdesign
Comment Utility
0
 
LVL 5

Expert Comment

by:php-webdesign
Comment Utility
but i think you will mean this:

..Javascript Includes

The Javascript Include is very similar to the SSI Include in the example above. The differences are in the way the code on our javascript include page is written. For this example we will use the same navigation bar code as used above.

Create a file in your text editor and include the HTML code for the navigation bar. We then add some javascript coding to each line of the HTML code as well as opening and closing javascript tags. The code for the javascript include page will look like this:

      <!--
      document.writeln('<div align="center">');
      document.writeln('<a href="html/index.html">HTML</a> ~');
      document.writeln('<a href="css/index.html">CSS</a> ~');
      document.writeln('<a href="webtools/index.html">Web Tools</a>');
      document.writeln('<br>');
      document.writeln('<a href="tutorials/index.html">Tutorials</a> ~');
      document.writeln('<a href="design/index.html">Design Tips</a> ~');
      document.writeln('<a href="downloads/index.html">Downloads</a>');
      document.writeln('</div>');
      //-->

Note:
The page must begin with <!-- and end with //-->
Each page line must begin with document.writeln('
Each page line must end with ');

Now save the page with a .js file extension, "bot_nav.js".

Now place the following code on the page in the location you want the navigation bar to be rendered.
<script src="bot_nav.js" language="javascript" type="text/javascript">
</script>

Javascript is a very sensitive language, but you can include most HTML or javascript coding on the page. Here are some things to watch for.

   1. you can not include javascript that has to access another file to run. DO NOT include the <script> and </script> tags in the .js file, they are included in the location script code.
   2. if your content contains a backslash "\" it must be preceded by another backslash "\\".
   3. if your content contains an apostrophe (') it must be preceded by a backslash (\').
   4. the most common reasons for script error messages are extra space at the end of a line, or missing characters.

This is the same type of script used to syndicate content for use on other sites. But to code a long article or web design tip by hand would take some time. I used a CGI script called "Master Syndicator" that codes the content for me.

Note: whether using CSS, SSI, or Javascript Include pages be sure to upload them to your site in ASCII mode.

Implimenting one or all three of these "Page Include" methods will make maintaining and adding to your site a lot quicker and easier.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
If they are already set up as html pages, just open then in a popup and print from there:

<html>
<head>
     <title>Untitled</title>
  <script>
   var winId=false;
function openWin(target) {
  winId=window.open(target,'printpage','width=200,height=300');
}
function printIt()
{
   if(winId && !winId.closed)
   {
   winId.focus();
   winId.print();
   }
}
</script>
</head>

<body>

<input type="button" value="Print Section 1"
   onClick="createWin('section1.html');setTimeout('printIt()',3000);return false;">
</div>
</body>
</html>

Cd&
0
 
LVL 2

Expert Comment

by:Adesso21
Comment Utility
COBOLdinosaur has the right solution here..

You can make the pages print better by using CSS to specify what get shown and to change some of the formatting without changing the actual HTML.. just the CSS

But this case I guess is closed..

Nice powerfull scripting there COBOLdinosaur
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 18

Expert Comment

by:arantius
Comment Utility
This would be complex and bulky.

Why not just save the result of the SSI page as a separate file when authoring the CD ?
0
 
LVL 2

Expert Comment

by:Adesso21
Comment Utility
arantius

I think you posted to the wrong tread dude ..
0
 

Author Comment

by:TheGtrsR1
Comment Utility
First, thank you for your comments so far. What I am trying to accomplish is to have a javascript function which works just like SSI. In other words, I want to take the pages, which are already created (but may change) and input that text into whatever location I want. As for the CD, it will be put out on CD but also needs to be made available on the web. Here is the way I was doing it with SSI:

<body onload="window.print()">

                     <!-- #include virtual="page_00.htm" -->
<p class=breakhere><!-- #include file="page_01.htm" --></p>
<p class=breakhere><!-- #include file="page_02.htm" --></p>
<p class=breakhere><!-- #include file="page_03.htm" --></p>

</body>

the 'class=breakhere' is just a CSS function to make a page break

Hope it is clear,

Danny
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
Comment Utility
If you want to bring in full pages you need to use xmlhttp:


<script type='text/javascript'>
<!--
function include(lyr,url)
{
   if (document.all)
   {
      // IE version
      try {
      var xml = new ActiveXObject("Microsoft.XMLHTTP");
      xml.Open( "GET", url, false );
      xml.Send()
      document.getElementById(lyr).innerHTML=xml.responseText;
       }
      catch (e) {
      var xml = new ActiveXObject("MSXML2.XMLHTTP.4.0");
      xml.Open( "GET", url, false );
      xml.Send()
      document.getElementById(lyr).innerHTML=xml.responseText;
      }
   }
   else
   {
      // Mozilla/Netscrap 6+ version
            var xml=new XMLHttpRequest();
            xml.open("GET",url,false);
            xml.send(null);
            document.getElementById(lyr).innerHTML=xml.responseText;
   }
}
//-->
</script>
You can trigger the script off the load:
<body onLoad="include('somediv','http://somepath/somefile.html'">
where somediv looks like: <div id="somediv" class="breakhere">&nbsp;</div>

Or dynamically from a link:
<a href="#" onClick="include('somediv','http://somepath/somefile.html');return false">
   load alternate page
</a>

or inline as a conventional include:

<script language='JavaScript'>
   document.write('<div id="somediv" class="breakhere">&nbsp;</div>');
   include('somediv','http://somepath/somefile.html');
</script>

If the string returned from the call contains valid HTML it will be rendered, otherwise it will display as plain text.

Does not work for older browser like Netscrap 4.x that do not know what XML is.

It can produce an alert if the user security settings have activeX disabled.

The url must be fully qualified including the HTTP: prefix, and you cannot test it locally, you have to go to a web server so it might be a problem on a CD unles you have a web server on the CD as well..

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
BTW, using a break style is no guarantee of correct printing.  The user setting and printer setting may or may not result in correct printing.

Cd&
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now