Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Use Javascript to insert an html file

Posted on 2004-10-04
9
Medium Priority
?
354 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
ID: 12216527
0
 
LVL 5

Expert Comment

by:php-webdesign
ID: 12216535
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
ID: 12221778
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 2

Expert Comment

by:Adesso21
ID: 12241140
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
 
LVL 18

Expert Comment

by:arantius
ID: 12241410
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
ID: 12241788
arantius

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

Author Comment

by:TheGtrsR1
ID: 12253083
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 1000 total points
ID: 12253824
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
ID: 12253834
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

916 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