How to display a html link in container?

I have four records in a file and one of them contains a link like <a href = "http://steelers.com">Pittsburgh Steelers</a> win again.

I am reading the records and storing them in a container called div1 The problem is that I want the Pittsburgh Steelers words above to show up as an actual link when they are added to the div1. Right now the link is showing up just like it is in the file. I am using javascript and innerHTML.

The four records are appended to a variable called dataIN. Then the last statement is document.getElementByID('div1').innerhtml += dataIN.

I want to store Pittsburgh Steelers win again in the container instead of actual text version
<a href = "http://steelers.com">Pittsburgh Steelers</a> win again

Mar 23 '15 #1

Subscribe Post Reply

✓ answered by Rabbit

I think I would lean towards innerHTML as well and unescaping it. It's more likely to work with every browser.

Let us know if you have trouble unescaping the HTML.

1737

Rabbit

12,516

Expert Mod 8TB

Works fine for me.

Expand|Select|Wrap|Line Numbers

 <html>

    <head>

        <script type="text/javascript">

            function test() {

                document.getElementById('div1').innerHTML += " <a href = 'http://steelers.com'>Pittsburgh Steelers</a> win again";

            }

        </script>

    </head>
 
    <body onload="test()">

        <div id="div1">test</div>

    </body>

</html>

There's probably something else in your code that is wrong. You would need to post it.

Mar 23 '15 #2

jlellis

Yes I can easily do it that way myself. I have done that. The problem is that the <a href = 'http://steelers.com'>Pittsburgh Steelers</a> win again";
is inside a file.

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">

function LoadFile() {

    var oFrame = document.getElementById("frmFile");

    var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;

    while (strRawContents.indexOf("\r") >= 0)

        strRawContents = strRawContents.replace("\r", "");

    var arrLines = strRawContents.split("\n");

    //alert("File " + oFrame.src + " has " + arrLines.length + " lines");

    var html='';

    for (var i = 0; i < arrLines.length; i++) {

        var curLine = arrLines[i];
 
if(curLine.search("href") > -1)

{

var divP1 = '<div>';

var divP2 = '</div>';

var tLine = curLine;

var cat1 = divP1.concat(curLine);

cat2 = cat1.concat(divP2);

//curLine = cat2.replace(/</g,'&lt;').replace(/>/g,'&gt;');

curLine = htmlEscape(curLine);

document.getElementById('div1').href = curLine;

//        html += curLine + '<br />';

//curLine = divP1.concat(tLine);

//document.getElementById('div1').innerHTML = '<div><a href="http://www.steelers.com">Steelers</a></div>';

//document.getElementById('div1').innerHTML = cat2;;

}

        html += curLine + '<br />';

        //alert("Line #" + (i + 1) + " is: '" + curLine + "'");

    }

//    html = html.replace(/</g,'&lt;').replace(/>/g,'&gt;');

    document.getElementById('div1').innerHTML+= html;

}

</script>

*************************
Input File
This is line 1.
This is line 2.
This is line 3.
<a href="http://steelers.com">Pittsburgh Steelers</a>
************************************************** ***
Results inside div1
Same as the 4 lines above.

Mar 23 '15 #3

jlellis

Here is the iframe and div

Expand|Select|Wrap|Line Numbers

 <iframe id="frmFile" src="
 http://mtcsrv1078/sites/BOOST/MainTest/Shared Documents/demo_test.txt" onload="LoadFile();" style="display: none;"></iframe>
 
    <div class="m2">

 <div id = "div1"></div>
 
</div>
 
</div>

Mar 23 '15 #4

jlellis

So even though html is a string variable, I am trying to convert incoming strings that contain an href to html and add it to the innerHTML as well as regular strings.

Mar 23 '15 #5

Rabbit

12,516

Expert Mod 8TB

This line:

Expand|Select|Wrap|Line Numbers

curLine = htmlEscape(curLine);

You are escaping HTML.

Mar 23 '15 #6

jlellis

Thanks Rabbit for your response. I'll keep playing with it to see what happens. Line 25 above is basically doing the same thing you are doing. I want user to be able to edit the text file at any time and each time an edit is made, the div will update as well with the additional text. So sometimes they may put href or other html tags in the text file.

Mar 23 '15 #7

Rabbit

12,516

Expert Mod 8TB

No it's not the same thing I am doing. I never escape the HTML.

If you escape the HTML in my string above, then it would be what you're doing. Escaping HTML takes HTML strings and makes it not HTML.

Mar 23 '15 #8

jlellis

//document.getElementById('div1').innerHTML = '<div><a href="http://www.steelers.com">Steelers</a></div>';

Mar 23 '15 #9

jlellis

That's the line I am referring to, not the escape line.

Mar 23 '15 #10

jlellis

Even without the escape line it still does the same thing. I was just trying something with the escape.

Mar 23 '15 #11

jlellis

Even if I try to use replace, it just puts the following in the container.

<a href="http://steelers.com"> Pittsburg Steelers</a>

Mar 23 '15 #12

Rabbit

12,516

Expert Mod 8TB

That line is commented out so it doesn't do anything.

Mar 23 '15 #13

jlellis

I know that. I'm the one who commented it out. As mentioned I can get it to work that way: the way the commented out line is doing. Once again I am trying to read lines(some containing html tags) from a file and add it to the div.

Mar 23 '15 #14

jlellis

Thanks for your help. I'll fix it I'm sure.

Mar 23 '15 #15

Rabbit

12,516

Expert Mod 8TB

It would really help to see the code that you are actually running...

The problem is that something is escaping the HTML. Your code has a function that escaptes HTML. That was the most obvious answer.

Now that I know you aren't actually using that function and you were just showing me test code and not the actual code you were running, I investigated further.

The issue is line 4. By then, the HTML has already been escaped. What you need to do then is to unescape the HTML.

Mar 23 '15 #16

jlellis

What do you mean the actual code? This the actual code from the site. If it helps below I have take out all comments and copied it again here.

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">

function LoadFile() {

    var oFrame = document.getElementById("frmFile");

    var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;

    while (strRawContents.indexOf("\r") >= 0)

        strRawContents = strRawContents.replace("\r", "");

    var arrLines = strRawContents.split("\n");

    var html='';

    for (var i = 0; i < arrLines.length; i++) {

        var curLine = arrLines[i];
 
if(curLine.search("href") > -1)

{

var divP1 = '<div>';

var divP2 = '</div>';

var tLine = curLine;

var cat1 = divP1.concat(curLine);

cat2 = cat1.concat(divP2);
 
document.getElementById('div1').innerHTML = cat2;

}

        html += curLine + '<br />';

    }

    document.getElementById('div1').innerHTML+= html;

}

</script>

I have to do something to the incoming string (change it to html) before it is added to the html string. Once it is added to the html string it is too late because after processing, the html string is what goes into the div1.innerHTML.

Mar 23 '15 #17

jlellis

This is code I am running. Here is the result.

Expand|Select|Wrap|Line Numbers

 <a href="http://steelers.com"> Pittsburg Steelers</a>

This is line 1.

This is line 2.

This is line 3.

<a href="http://steelers.com"> Pittsburg Steelers</a>

The http://www.steelers.com win again.

Mar 23 '15 #18

jlellis

The last actually comes out as text not the link. The link appeared when I copied and pasted.

Mar 23 '15 #19

Rabbit

12,516

Expert Mod 8TB

And if you'll notice, the code you just posted is different from the code you originally posted, even when you take out the commented code.

And like I said in post #16, after you told me that you didn't actually use the escape html function in the code you originally posted, I investigated further. The issue is line 4. By then, the HTML has already been escaped. What you need to do then is to unescape the HTML.

Mar 23 '15 #20

Rabbit

12,516

Expert Mod 8TB

Further investigation reveals a possible way to read it unescaped in the first place. But there is a caveat. Instead of innerHTML, you can use innerText in internet explorer or textContent in other browsers to get the unescaped version of the text. But this requires you to test the browser so you know which version to use.

A more agnostic approach would be to use the innerHTML version with the escaped text and then unescape it.

Mar 23 '15 #21

jlellis

OK, thanks. I've been looking at both ways, but leaned toward innerHTML.

Mar 23 '15 #22

Rabbit

12,516

Expert Mod 8TB

I think I would lean towards innerHTML as well and unescaping it. It's more likely to work with every browser.

Let us know if you have trouble unescaping the HTML.

Mar 23 '15 #23

jlellis

Well nothing is working. Seems like a line like
<a href="http://www.steelers.com">Steelers</a> win. I tried escape and unescape and got the same result: it only puts the text version in the div. I want the following in the div
Steelers win

Expand|Select|Wrap|Line Numbers

 function LoadFile() {

    var oFrame = document.getElementById("frmFile");

    var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;

    while (strRawContents.indexOf("\r") >= 0)

        strRawContents = strRawContents.replace("\r", "");

    var arrLines = strRawContents.split("\n");

    var html='';

    for (var i = 0; i < arrLines.length; i++) {

        var curLine = arrLines[i];
 
if(curLine.search("href") > -1)

{

var divP1 = '<div>';

var divP2 = '</div>';

var tLine = curLine;

var cat1 = divP1.concat(curLine);

cat2 = cat1.concat(divP2);

//curLine=unescape(cat2);

//html += curLine;

curLine = unescape(cat2);

//document.getElementById('div1').innerHTML = curLine;        

html += curLine + '<br />';

}

else

        html += curLine + '<br />';

    }

    document.getElementById('div1').innerHTML+= html;

}

</script>

Mar 24 '15 #24

jlellis

I put the [code] in this time.

Mar 24 '15 #25

Rabbit

12,516

Expert Mod 8TB

Where's your code for the unescape function?

Mar 24 '15 #26

jlellis

Does anyone else have comments about the question? Thanks.

Mar 24 '15 #27

jlellis

Can someone directly answer this question? How can I take this line/string
<a href="http://bytes.com">Bytes</a> topics
and add it to a div as Bytes topics
Don't just say use escape and unescape without an example. The string is appended to other strings that may not have html tags and stored in a variable string. The final string is added to the innerhtml of the div. So basically it seems like adding html to a string.

Mar 24 '15 #28

jlellis

Never mind, I think I figured it out.

Mar 24 '15 #29

Rabbit

12,516

Expert Mod 8TB

If you didn't know what escaping and unescaping HTML meant, you could have asked. I thought you knew what it meant because the code you posted in #3 shows that you used a function called escapeHTML. And I figured if you knew how to write a function to escape HTML, then you knew how to write a function to unescape HTML.

Anyways, can you post your final code in case someone else finds this thread and has the same question?

Mar 24 '15 #30

by: Gordon H. | last post by:

I'm trying to email a HTML link to a HTML file attached in the same message. I DO NOT want to have the attached HTML file displayed in the message, I just want a link in the email to the HTML file...

HTML / CSS

Is there anyway to pass a js variable in html link?

by: olga | last post by:

Hi, On my site, i want to pass a javascript variable to php. I know that this needs to done in a link or in a post. I want to know if there is a way i can do it with an html link. I should...

Javascript

html link to excel spreadsheet without open/save prompt

by: palgrave | last post by:

Hi, How do you create an html link from a web page to a read-only excel spreadsheet without the browser asking if the user wants to open it or save it?

HTML / CSS

'Display Image' link

by: Lester3 | last post by:

i'm looking for a script that will allow me to display a link which when clicked is replaced by an image. Its for one of my discography pages where i don't want all the images displayed when the...

Javascript

Display html pages within an aspx page

by: Robert | last post by:

Display html pages within an aspx page I would like to display HTML pages within an aspx page.An example might be: I have an aspx page with a menu on the left side and by clicking on one of the...

ASP.NET

datagrid - display HTML, don't render (VB)

by: The Colonel | last post by:

I have a database of our company's HTML email templates - name, subject, etc. Well, some are for HTML emails, and the template_text column contains HTML. When I display in a datagrid, it REALLY...

ASP.NET

using tkinter to display html

by: Stephen M. Gava | last post by:

Hi all, I prefer using tkinter to wxpython (so sue me :) and i need to display a lot of html in a particular app. does anyone know if one of the existing add on tk html widgets have been wrapped...

Python

html:link paramProperty Problem

by: NamelessNumberheadMan | last post by:

I'm having issues with my html:link tag. I've tried this two ways. 1) This gets me to my proper dispatch action with the bean: <html:link forward="editMyInfo" ...

Java

i have a java/c++ program that needs an html link or to use a link

by: jerger | last post by:

I found a great page that reads a language i need in the program... is there anyway to have a clickable or launching html link from my program? all i have is copy/paste. also is there a way i...

Java

Display delete link near comments for that logged in users

by: Sanjeevkanna | last post by:

I have a page which shows the comments posted by all users. Here I need to show a delete link on the side of the comments posted by that current logged in user and he should be able to delete that...

PHP

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

How to display a html link in container?

✓ answered by Rabbit

Similar topics