Solved

Load a Webpage into a Table Cell with JavaScript.

Posted on 2008-06-14
3
1,117 Views
Last Modified: 2013-11-19
Hi,

How can I make a page that will allow a user to click on a link in one table cell and load a webpage (that will not have headers/body tags) into a different cell in the table?

Thanks in advance,
Norman
0
Comment
Question by:Norman_SK
3 Comments
 
LVL 4

Accepted Solution

by:
afzz earned 125 total points
ID: 21784678
You can do it 2 ways:

1. Use an <iframe> within the table cell instead of table cell
2. Use Ajax to do a httprequest

0
 
LVL 2

Assisted Solution

by:Airyck666
Airyck666 earned 125 total points
ID: 21786070
To expand on afzz's answer, using the XMLHttpRequest, here is some code you can use.  I'm not sure it's necessarily advisable to use this method of loading an non-vaild xml... but I believe this should work.

The stuff in the conditional comments is there to allow IE to test locally with the 'file:" protocol.  It will warn you about the activex control in this scenario, but IE7 (along with Moxilla, Opera, Safari, etc) will use native XMLHttpRequest when not you are not running it locally.  This example assumes that the included content is in the same directory as this html page.
<html>

<head>

<script type="text/javascript">

var xmlhttp = false;

/* 

This section is only here to allow testing locally with IE, 

as you'll get 'access denied' otherwise. 

However IE 7 will still use native XMLHttpRequest support 

when not running locally.

*/

/*@cc_on

if (location.protocol == "file:") {

    if (!xmlhttp) {

        try {

            xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); 

        } catch(e) {

            xmlhttp = false;

        }

    }

    if (!xmlhttp) {

        try { 

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

        } catch(e) {

            xmlhttp = false;

        }

    }

}

@cc_off @*/
 

/* IE7, Firefox, Safari, Opera, etc...  */

if (!xmlhttp) {

    try { 

        xmlhttp = new XMLHttpRequest(); 

    } catch(e) {

        xmlhttp = false;

    }

}

/* IE6 */

if (typeof ActiveXObject != "undefined") {

    if (!xmlhttp) {

        try {

            xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); 

        } catch(e){

            xmlhttp = false;

        }

    }

    if (!xmlhttp) {

        try {

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

        } catch(e) {

            xmlhttp = false;

        }

    }

}
 

if (!xmlhttp) {

    alert("Can't create the xmlhttp object");

}
 

function loadPage(url) {

    xmlhttp.open('GET', url, true);

    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4) {

            document.getElementById("displayCell").innerHTML = xmlhttp.responseText;

        }

    }

    xmlhttp.send(null);

}

</script>

</head>
 

<body>
 

<table>

<tr>

    <td>

        <a href="javascript:loadPage('page1.inc')">page 1</a>

        <a href="javascript:loadPage('page2.inc')">page 2</a>

    </td>

    <td>

        <div id="displayCell"></div>

    </td>

</tr>

</table>
 

</body>

</html>

Open in new window

0
 

Author Comment

by:Norman_SK
ID: 21844945
Hi,

I have still not had time to nail this properly but I think that the Ajax option will give me the right solution.

Thanks,
Norman
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.

895 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

15 Experts available now in Live!

Get 1:1 Help Now