[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1137
  • Last Modified:

Load a Webpage into a Table Cell with JavaScript.

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
Norman_SK
Asked:
Norman_SK
2 Solutions
 
afzzCommented:
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
 
Airyck666Commented:
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
 
Norman_SKAuthor Commented:
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now