Solved

Load a Webpage into a Table Cell with JavaScript.

Posted on 2008-06-14
3
1,131 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 …
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

733 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