Link to home
Start Free TrialLog in
Avatar of masmatc
masmatc

asked on

How to dynamically open a URL in a row of a html table....by using javaacript

Hi,

need to dynamically open a URL in a row of a html table....by using javaacript...e.g.when i launch...http://oursite/homePage.html....the homePage.html has a html table in it.....like to dynamically view a URL in one of its row....

<table>
  <tr>
    <td>Here i like to display a URL</td>
  </tr>
  <tr>
    <td>Some thing else i have here</td>
  </tr>
</table>

in the body of this html page for onload event i am doing something else too...

Please advice.....Thanks
Avatar of enachemc
enachemc
Flag of Afghanistan image

<table>
  <tr>
    <td id="tdWithUrl">Here i like to display a URL</td>
  </tr>
  <tr>
    <td>Some thing else i have here</td>
  </tr>
</table>

<script language="javascript">
window.location.href = document.getElementById('tdWithUrl').innerHTML;
</script>
Avatar of b0lsc0tt
masmatc,

Enachemc's post may be all you need.  I may have misunderstood but it sounds like you want the table row

  <tr>
    <td>Here i like to display a URL</td>
  </tr>

to display another web page, not use the contents to open a new window.  If I'm right then you should use iframe instead.

<iframe src="http://oursite/page2.htm" width="200" height="200">Can't use iframes if you see this</iframe>

You could put this in the td tag if you want or not use the table at all.  It is the best way to do what I think you want.

Let me know if you have any questions or need more information.

b0lsc0tt
Avatar of masmatc
masmatc

ASKER

b0lsc0tt,

yes ....i want the table row to display another webpage/URL.....but user do not want to see in frame....and i am trying to understand.....what enachemc's post is telling me.....
just replace "Here i like to display a URL" from inside the td with a real URL, and when the page is loaded (actualy when the script I wrote has been loaded), it will redirect the current page to the URL represented by the content of the table cell.
<table>
  <tr>
    <td id="tdWithUrl">www.google.com</td>
  </tr>
  <tr>
    <td>Some thing else i have here</td>
  </tr>
</table>

<script language="javascript">
window.location.href = document.getElementById('tdWithUrl').innerHTML;
</script>
<table>
  <tr>
    <td id="tdWithUrl">http://www.google.com</td>
  </tr>
  <tr>
    <td>Some thing else i have here</td>
  </tr>
</table>

<script language="javascript">
window.location.href = document.getElementById('tdWithUrl').innerHTML;
</script>

Place the above code in an HTML page. When it loads, it will redirect you to the google's home page.
You need to not use the word URL if you are referring to a complete web page in the row of a table on your site.  It is confusing things since a URL doesn't mean a web site.

Javascript and an html table can't do that.  Did you try imbedding the iframe in the row and setting the width and heigth to 100%?  The only other way to do it would be to use some server side language to "read" the other website, basically take it content, and fill your page and that row with the content.  This will cause a big problem though.  Now your html file will have 2 html, head, body, etc tags.  The page will no longer be valid.  Frames are made for this and iframes were made to be "inline" so they would look like the rest of the page.  It is the only way to display a complete web page in another one.

I hope this helps.  Let me know how iframe looks.  I think you will be surprised.  Let me know if you have any qeustions.

bol
Avatar of masmatc

ASKER

thanks for the reply....that is not want i want.....i may be not able to explain my situation properly....let me try again....i am displaying a web page#1....right....now i want to display an other webpage say webpage#2 within the web page#1....but not by using frame

and as i said the webpage#1 has a html table....so i like to put some kind of code in webpage#1's html table's row....so that when webpage#1 launches.....it should show webpage#2 within it....(webpage1 and 2 should display at the same time....)

hope it clear now....sorry about the confusion......
this is not possible. For example, if the webpage #1 & webpage #2 contain scripts, they will not be able to interact with each other because of security reasons. You could display it though if you retrieve the code for web page #2 on the server side and feed it into web page #1 as if it would be part of it.
I understood but I guess my reply wasn't clear.  You can't do that just with a table.  The main issue is webpage#2 will have all of the html tags including html, head, and body.  This can't work in the middle on webpage#1.  Even if you want to leave those tags out javascript doesn't make this easy.  In fact it would be very hard and you would want to do it with server script like PHP using CURL (I believe, my experience with that is limited).  The main problem is the html code.  A single webpage can't have 2 pages.  Frames or iframes makes it so your browser show "one page" but it is actually more than one webpage.

Does that help to clarify why there would be a problem?  Let me know.

bol
Just to add to Enachemc's comment, even if you didn't need scripts or used a server language, you can't put the whole page in the html of another.  Let me show you with some sample code.

<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>
<html>
<head>
<title></title>
</head>
<body>
Webpage#2 content
</body>
</html>
</td>
</tr>
</table>
</body>
</html>

I hope that helps to illustrate the problem.  Your browser would have real issues with that html.

bol
Avatar of masmatc

ASKER

call me stupid....allright...because page2 is not actually a webpage it is a view from Notes databse....and in my mind i was thinking
it is a webpage.....and understand your concerns about two webpages.......here is the corrected situation....

page1 = html page with javascripts in it and has an onload event in the body...say =http://oursite/homepage.html

page2 or other appropriate term = http://server/folder/LotusNotesDatabase.nsf/ViewName?openView....


so if you launch this "http://server/folder/LotusNotesDatabase.nsf/ViewName?openView" separately it works fine and give the contents of the view...

now on the launch of page1.....i like to show the content of the view  in one part of page1....i tried frames they work just fine....but users do not "like" frames....?

please bear with me here.....any idea to do this without frames......
Thanks for the clarification.  It wasn't stupid and was actually an understandable confusion.  Now it makes a little sense why you used URL but that just caused other confusion. :D

You should be able to do this using javascript and the xmlhttp object to get the other file (page2 works for me) and use DOM to put it in page1.  I haven't used it for this exact purpose before but think it would great.  First, do you have to use tables and put it in a row?  This can make it much more difficult.  If we can use div tags and style sheets you can probably get the same effect and it will be easier.  Let me know and I will work on some code for you.  It will take a little time though.

bol
One other question.  How does the browser display http://server/folder/LotusNotesDatabase.nsf/ViewName?openView ?  What is the content or character encoding?  I assume it doesn't need a plugin or open a different program.  Let me know since this could cause a problem.

bol
Avatar of masmatc

ASKER

bol,

page1 is the homepage of the site...and i have a large html table in it .....to make it work "properly" on diff resolutions or something....i think i can try div tags and style sheets along with the html table on the samepage....lets try xmlhttp and DOM (i do not have a clue about these)....but i like to explore this option....thanks....it is 7:52 pm here where i am ....will post my comment tomorrow morning to your reply....

the view display a list of notes documents with link to open them...like when i did view source of it....it is a html table....here is the sample from it
(Here how the browser display http://server/folder/LotusNotesDatabase.nsf/ViewName?openView ?......i think no plugin or diff program....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="robots" content="noindex">

<script language="JavaScript" type="text/javascript">
<!--
document._domino_target = "_self";
function _doClick(v, o, t) {
  var url="<!--------i deleted this----->?OpenView&Click=" + v;
  if (o.href != null)
    o.href = url;
  else {
    if (t == null)
      t = document._domino_target;
    window.open(url, t);
  }

}
// -->
</script>
</head>

<body text="#000000" bgcolor="#FFFFFF">

<form action=""><div align="center"><b><font size="2" face="Arial">Current Awareness</font></b><br>
<b><font size="2" face="Arial">(</font></b><font size="2" face="Arial">Click on the Date to view the document</font><b><font size="2" face="Arial">)</font></b><br>
<br>

<table border="0" cellpadding="2" cellspacing="0">
<tr valign="top"><td nowrap><img width="16" height="1" src="/icons/ecblank.gif" border="0" alt=""><a href="/folderName/Notesdatabase.nsf/e59b6f1d5bb2263885256b75007594d7/1c4a57e056c03f698525722f005e2380?OpenDocument" target="_blank">11/23/2006 12:08:28 PM</a></td><td nowrap>Announcement 1 </td></tr>

<tr valign="top"><td nowrap><img width="16" height="1" src="/icons/ecblank.gif" border="0" alt=""><a href="/folderName/Notesdatabase.nsf/e59b6f1d5bb2263885256b75007594d7/5a4e5c762a6707358525722d00792a1a?OpenDocument" target="_blank">11/21/2006 05:03:40 PM</a></td><td nowrap>Announcement 2</td></tr>

and other rows similiar to above....

</table>
</div><br>
</form>
</body>
</html>

Thanks for you help......
ASKER CERTIFIED SOLUTION
Avatar of b0lsc0tt
b0lsc0tt
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi masmatc,

Yes, it is possible to do what u want. I will show u how to do it with a hidden iFrame.

<html>
<head>
</head>
<script>
function OpenSrchWin(url, tgtObj)    {
    tgtObj.innerHTML = "<iframe frameborder=0 id=SrchWin width=100% height=300 scrolling=yes name=SrchWin src='"+url+"'></iframe>";
    return false;
}
</script>
<body>
<table width="100%">
<tr>
<td width="100%" valign="top"><a href="#" onClick="return OpenSrchWin('http://www.yahoo.com', tdSearchBox1)">yahoo search</a></td>
</tr>
<tr>
<td id="tdSearchBox1"></td>
</tr>
<tr>
<td width="100%" valign="top"><a href="#" onClick="return OpenSrchWin('http://www.microsoft.com', tdSearchBox2)">Microsoft</a></td>
</tr>
<tr>
<td id="tdSearchBox2"></td>
</tr>
</table>
</body>
</html>


Cheers
Nickson
We posted at the same time.  The source you posted in your last comment is html, all of the tags.  If that source is what is sent by http://server/folder/LotusNotesDatabase.nsf/ViewName?openView then you will not be able to use it without cleaning it up.  That will be a lot more work.  Work for the browser to do and make the page much fatter.

bol
> .. so that when webpage#1 launches.....it should show webpage#2 within it. ..
that's what iframes (or frames) is for. Dot. Period.
Otherwise you may read the second page with XMLHttpRequest, parse the whole content you get, and add it dynamically tou your page#1's DOM. Depending on you browser it may be possible to use javascript's   node.cloneNode()  function to copy the whole page#2 and insert it at proper place in page#1's DOM.
Avatar of masmatc

ASKER

NicksonKoh:
this is not what the problem in hand is....i do not want to click to launch the url....i think you misunderstood....

ahoffmann:
as i mentioned earlier that user do not want frames.....i know frames work just fine.....your other idea is right but how?....some kind of example or code to try....

b0lsc0tt:

the code that you have posted....it seems very close..the solution of my issue...i didn't get a chance today to try this out.....but for sure i will try this
Monday Dec 04.....and will let you know....really appreciate you help!!

Thank you all....have a nice weekend....
> .. some kind of example or code to try....
hmm, that code will become lengthly, just the core idea:

  var req = new XMLHttpRequest();
   req.open('GET', '---your---URL---here',true);
   var content = req.content();
  // no you have to parse  content, probably you better use the XMLcontent here
  // for each tag you identify proper, you need to create a javascript object using document.createElement()
  // and then add all the attributes, finallyyou append that object to the DOM: document.body[0].appendChild(newobject);
Avatar of masmatc

ASKER

bol,

have tried your provided code....it works Great ...like i created a simple html doc in Dreamweaver and selected preview/Debug in browser....works Good....address bar of the browser at that point looks like this "C:\JavaScript\testScriptFromEEpage1.html"....and it is able to launch the page2 within page1 by
using your provided script....

but when i tried the same thing in http://server/folder/home/testScriptFromEEPage1.html....it is giving me the following error...."Permission denied" at line 37....line 37 is this

xmlHttp.open("GET", myurl , true);

i changed the variable name from url to myurl...changed function is as follows...and i don't think it causing the error...

function getContents() {
    var myurl = "http://server/folder/NotesDatabase.nsf/By Date?openView";
    xmlHttp = GetXmlHttpObject(stateChanged);
    xmlHttp.open("GET", myurl , true);------(line 37)
    xmlHttp.send(null);

i changed it from url to myurl because...my constraint is that i have to work within a webframe work (it is actually a Notes database).....and
following is the default added code you get from this webframe in the begining of every page...here what you get ...when you do View Source....


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/javascript">
<!--
document._domino_target = "_self";
function _doClick(v, o, t) {
  var url="/web/NotesDatabase.nsf/home/NameOfTheWebpage?OpenDocument&Click=" + v;
  if (o.href != null)
    o.href = url;
  else {
    if (t == null)
      t = document._domino_target;
    window.open(url, t);
  }

}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF">

<form action="">

HERE GOES THE CONTENT OF HTML PAGE

</form>
</body>
</html>


So as you may have noticed that the above default code already has a var called url....that is why i changed the other url var in your provided script....

so any idea to overcome the "Permission denied" error....you have earned the 300 pts...and now i have added 200 more points too....please suggest and help me to the end......


The variable was just in the function and should not have been a conflict with others but I agree that the change should not have given you an error.  The URL (http://server/folder/NotesDatabase.nsf/By Date?openView) contains a space and is different from one you provided earlier.  If there is another URL (i.e. http://server/folder/LotusNotesDatabase.nsf/ViewName?openView) does it work OK?  If so try using http://server/folder/NotesDatabase.nsf/By%20Date?openView for myurl.  For example ...

    var myurl = "http://server/folder/NotesDatabase.nsf/By%20Date?openView";

Let me know how that works.  You will still need to deal with the html you get from this function.  You can't just put it in page1 without cleaning it up (i.e. removing unneeded html tags).  You could try doing this with a match function to get just the part you want (i.e. the form tag and its contents).  An example is below in the modified stateChanged function.

function stateChanged() {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
        var formHtml = xmlHttp.responseText;
        formHtml = formHtml.match(/<form[\w\s]+</form>/i);
        document.getElementById("fillMe").innerHTML=formHtml;
    }
}

Take a look at the results of that "match" function to let me know if there is a problem but that will hopefully work.

bol
> ..error...."Permission denied" ..
that's the browser's access policy

Either allow your browser the XMLHttpRequest in the policy, or use code like following which will ask the user:

try {
   if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');}
   else { alert('Netscape privilege not enabled');}
} catch (e) {alert('e);}
Avatar of masmatc

ASKER

This one was just an example ....http://server/folder/LotusNotesDatabase.nsf/ViewName?openView......the actual one is this http://server/folder/NotesDatabase.nsf/By Date?openView.....and you right it does have a space in By Date.......i tried it changing to this as you have mentioned...

var myurl = "http://server/folder/NotesDatabase.nsf/By%20Date?openView";
 
but giving me the same error......."Permission denied" at line 37....

separately it works ok....like if i just type "http://server/folder/NotesDatabase.nsf/By%20Date?openView" or "http://server/folder/NotesDatabase.nsf/By Date?openView" in the browser it launch no problem....in Notes dB the name of the view is By Date...does have space in the actual name....

for me the step 1 is to get this work first as i am able to get in work using C:\JavaScript\testScriptFromEEpage1.html.....then we will deal with extra html issue....
What was the result of adding Ahoffmann's suggestion?  You could put it at the start of the getContents function.

Are both the pages on the same domain?  According to the URLs you have provided they would appear to be just in different folders on the same domain.  Please verify this or provide details.

If page2 is actually on a separate domain then it won't work.  The browser has a security feature that prevents javascript from fetching from a different domain.  It has no way around this.

bol
Avatar of masmatc

ASKER

bol,

never get a chance to response to you...have been dragged to different direction ...now i have tried the following by using the original code that you have provided.....

page1 = where i put  your provided code = http://server1/folder1/NotesDB1.nsf/home/testScriptFromEEPage1
page2 = simple html page     = http://server1/folder1/NotesDB1.nsf/home/testScriptFromEEPage2

so both pages are on the same domain...giving me error for "unknown runtime error" at line 43 which is this:

document.getElementById("fillme").innerHTML=xmlHttp.responseText;

did check the name of my div's id is same which is this:

<div id="fillme">Content for  id "fillme" Goes Here</div>  

now i just want to see if it works on the same domain as you have mentioned that it will not work if the page 2 is on the diff domain....

after adding the code from "Ahoffmann's suggestion"....no difference....still the same error...i am using internet explorer any ways......
Avatar of masmatc

ASKER

bol,

now i think i am back to the square 1 to the original issue....

page 1 = http://server1/folder1/NotesdB1.nsf/home/Page1.html

page 2 = http://server2/folder1/NotesdB2.nsf/home/Page2.html = http://server/folder/NotesDatabase.nsf/By%20Date?openView

xmlhttp as you have mentioned won't work If page2 is actually on a separate domain ...
and if you still remember i want to display page 2 inside of page 1....


page 2 = i am able to get the xml of page 2 in the following shape and form... by using the following url
http://server/folder/NotesDatabase.nsf/By%20Date?ReadViewEntries


<?xml version="1.0" encoding="UTF-8" ?>
- <viewentries toplevelentries="66">
- <viewentry position="1" unid="1C4A57E056C03F698525722F005E2380" noteid="9FA" siblings="66">
- <entrydata columnnumber="0" name="DeliveredDate">
  <datetime>20061123T120828,46-05</datetime>
  </entrydata>
- <entrydata columnnumber="1" name="subject">
  <text>Fw: Announcement </text>
  </entrydata>
  </viewentry>
- <viewentry position="2" unid="5A4E5C762A6707358525722D00792A1A" noteid="9F6" siblings="66">
- <entrydata columnnumber="0" name="DeliveredDate">
  <datetime>20061121T170340,74-05</datetime>
  </entrydata>
- <entrydata columnnumber="1" name="subject">
  <text>Fw: Announcement </text>
  </entrydata>
  </viewentry>
and other entries.......

i heard about "xml dataIsland".....so can i use xml dataIsland on page 1 .....and i was searching in EE and found this...

<!EE searching notes start--->

<xml id='displayxml' src='http://<your servername>/nsfname/view?readviewentries&restricttocategory=<yourcategoryname>'>

after this in javascript you can just write a simple code..

objPageValues = document.all.displayxml.selectNodes("viewentries/viewentry");
objParent = document.all.displayxml.selectNodes("viewentries");

and from there u can get teh other values

<!EE searching notes ends--->


so what i am asking now (my Xmas wish list is this) javascript to parse the above sample xml code and display it
within page 1.....

but now i am thinking that even if we are able to parse the above xml into page 1 ......did you see how links will work that open up the doc from Notes database......remember when i launch page 2 separately ...it opens up a view from Notes dB with link to the documents from the dB....this view basically has two columns first "datetime" and "text" and "datetime" has links to the documents from the dB......the above xml is of this view.....

i know its getting longer....but please suggest.....
You may need a new question for that.  I don't have any experience with XML.  To be honest, I think you have lost me.  There have been so many different things posted here that I'm not sure what is going on and what your situation is.  If you can change the response from the second page then have it send html to you BUT JUST THE CODE YOU NEED.  When it comes down to it that is the real problem.  If you can't change or control the response from "page2" then you may have to use a frame until you can fix page2.  Same thing if they are on separate domains or some other security thing is interfering.  The code I provided for AJAX will work in some cases but it has limits.

If XML is an option you want to pursue then you really should open a new question for it.  A new topic area or pointer in another topic would be good.  The AJAX method I showed you does have a way to handle xml and javascript can do stuff with it but I have no experience with it.  Please keep in mind that if this is on 2 domains/servers you will still have the same problem and limitation.  Getting the data in a different format won't change that.

I hope this helps.  Let me know if you have questions or what you want to do.

bol
Avatar of masmatc

ASKER

bol,
i accept AJAX code that you have provide with its limitations as an answer....and as you have suggested will open a new question to pursue XML option for this issue....thanks again for all your help....
Your welcome!  Was there something you felt was missing or incomplete?  I noticed the B grade and was a little surprised.

Thanks for the fun question.

bol
Avatar of masmatc

ASKER

bol,

in my third last comments (Date: 12/06/2006 02:21PM PST)...i mentioned that i have tried your provided code for two pages on the same server...and it is giving me an error.....and i still trying to see if it works for two pages on the same server....

and my other feeling was that my issue is still there....

i guess these were the factors in my mind when i was closing this question....but i might be wrong....again i do really appreciate your help!!....Regards
Thanks for the reply.  I understand what you mean but didn't think "the other factors" would effect your satisfaction with the help.  May be a little optimistic (or unrealistic) of me. :)  In some ways I saw a couple of questions here, not just one.

I have found a little info on XML related to the "AJAX" script I provided.  It would be really nice if this one small change will make a difference but I'm afraid the issue is still "page2."  In the comment you accepted as an answer there is a line ...

    xmlHttp.open("GET", url , true);

In my uses I have always used true.  Try using false instead when you test this again.  This change will NOT effect the 2 server issue but may make it so this page will be able to use the response from "page2" when it is on the same server.  In case you want some info on those values you can look at http://www.w3schools.com/dom/dom_http.asp.

Thanks again for the reply.  I appreciate it.  Good luck and see you around.

bol