Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    innerHTML Contents - Desperate

    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:
    Code:
    <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:
    Code:
    <li id="theID"><a href="/index.php?option=value">Link Name</a></li>
    I have written the following code:
    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?

  • #2
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Something like this mate?

    Code:
    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
    Last edited by martin_narg; 08-10-2005 at 07:06 PM. Reason: error handling if invalid objID passed
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Code:
    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.
    Last edited by koinu; 08-10-2005 at 07:48 PM. Reason: Update

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    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.

    Code:
    <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>
    Edit: 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
    Last edited by Basscyst; 08-10-2005 at 08:04 PM.
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •