...

View Full Version : innerHTML Contents - Desperate



koinu
08-10-2005, 05:30 PM
I have a php script that isn't mine and i can barely understand it, or I would edit it and solve this problem that way. Unfortunately, I'm stuck trying to do it with JS.

It outputs a tag similar to the following:

<a href="/index.php?option=value">Link Name</a>

This tag is placed by the HTML template inside of another tag, so the result is the following:

<li id="theID"><a href="/index.php?option=value">Link Name</a></li>

I have written the following code:

<script type="text/javascript">
document.getElementById("theID").innerHTML="<a href=/index.php?option=value><img src=/linkname.gif></img></a>";
</script>


As you can see, I want to remove the text "Link Name", and replace it with an appropriate image. This image will always be the same for this tag, but the link's option value will change.

I am thinking that I will have to use the JS to "copy" the option value into the text I set the innerHTML of "theID" to. This is the only problem I am having.

Is it possible to, i suppose: parse, the HREF's value and put it into a JS variable?

martin_narg
08-10-2005, 06:01 PM
Something like this mate?



function updateLink(objID, url, imgSrc) {
if(!document.getElementById(objID)) {
return;
}

var links = document.getElementById(objID).getElementsByTagName("a");

var img;
for(var i=0; links[i]; i++) {
if(links[i].getAttribute("href") != "") {
for(var p=0; links[i].childNodes[p]; p++) {
links[i].removeChild(links[i].childNodes[p]);
}
img = document.createElement("img");
img.setAttribute("src", imgSrc);
links[i].appendChild(img);

links[i].setAttribute("href", url);
}
}
}
window.onload = function() {
/* Usage: updateLink(id_of_li_element, new_link_href, image_path) */
updateLink("theID1", "/index.php?option=1", "/linkname1.gif");
// as many li id's as you require ...
updateLink("theID2", "/index.php?option=2", "/linkname2.gif");
updateLink("theID3", "/index.php?option=3", "/linkname3.gif");
}


Hope this helps

m_n

koinu
08-10-2005, 06:30 PM
Well now, that's one way to skin a cat lol. Looks to be in order. I will still have to implement it to be sure, but in advance, thank you.

koinu
08-10-2005, 06:35 PM
Ah, one minor flaw from what I was intending. I will try playing with it to produce the output I desire, but I need to keep the URL that is already there. I am only replacing the text link with an image link. The URL is unknown until run-time.

*EDIT: I think if I just comment out the line that sets the new url and remove the url from the function paramaters, that would work as is, don't you think?


function updateLink(objID, imgSrc) {
if(!document.getElementById(objID)) {
return;
}
var links = document.getElementById(objID).getElementsByTagName("a");
var img;
for(var i=0; links[i]; i++) {
if(links[i].getAttribute("href") != "") {
for(var p=0; links[i].childNodes[p]; p++) {
links[i].removeChild(links[i].childNodes[p]);
}
img = document.createElement("img");
img.setAttribute("src", imgSrc);
links[i].appendChild(img);
// links[i].setAttribute("href", url);
}
}
}
...
updateLink("ca-edit", "/linkname1.gif");


*UPDATE: Yes, that did it for me juuuust right. There is a slight delay before the text is replaced with the image due to the "on page load" running of the function instead of running the script inline immediately after the PHP call which creates the text links, but it is bearable. I assume I could leave the on page load function out and call the functions at that time instead, and leave the function body up top.

At least, that makes sense. I will see if it works, though lol.

Basscyst
08-10-2005, 06:54 PM
From what I gather you just need to replace the text with the image, problem is you only have an id on the li so when you replace the innerHTML you are losing the option value and you need to return it to it's prior state when you add in the image. So assuming you only need to do this with links carrying a a querystring named option this should work just fine.



<html>
<head>
<script type="text/javascript">

function addImage()
{
var a=document.getElementsByTagName('a');
var len=a.length;
for(var i=0;i<len;i++)
{
var a_url=a[i].href.toString();
var str_check=a_url.indexOf('?option=');
if(str_check!=-1)
{
var img=document.createElement('img');
img.setAttribute('src','stop2.jpg');
img.style.border='0px';
var kids=a[i].childNodes;
var len2=kids.length;
for(var j=0;j<len2;j++)
{
a[i].removeChild(kids[j]);
}
a[i].appendChild(img);
}
}
}
</script>
</head>
<body onload="addImage()">
<ul>
<li id="theID"><a href="/index.php?option=value">Link Name</a></li>
</ul>
</body>
</html>


Heh, yep virtually the same solution. Cool!

Calling the function prior to the load of the body will give you an error, because the referenced objects have not yet loaded.

Basscyst



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum