Dynamically add anchor tag to database generated div.

jameshuckabonetech
jameshuckabonetech used Ask the Experts™
on
A real estate website that I am building is hosted in a content management system that generates a list of reports based on what is stored in the database table related to that list. In pseudocode it is like this:

<div class="report_record">Report Title<br>
Report Description<br>
<a href="actual_report_file.doc">Report File</a>
</div>

Currently, the default link to the report file is a small text link that is right aligned. Instead of this,  I would like to make the entire div clickable. Since the html is generated automatically, the only way I can achieve this is by using javascript to recognize the appropriate divs and add to them an anchor. If someone helps me with that, I can manually use css and the div's class to interact with the anchor in order to make the whole div clickable. Could someone help me out with this? Thanks a lot!

In Pseudocode, this is what I hope to achieve:

.js file
{
if HTMLelement(div).class="report_record" then replace "<div class='report_record'>" with "<div class='report_record'><a href='#' class='report_div_anchor'></a>"

and then I will write the css to have:

.report_record a{
    width: entire_div_widthPX;
    height: entire_div_heightPX;
}

Thanks for any help!!!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
try attached function, you can call it after page load
hope it helps
function replaceAllDivs(){
var allDivs = document.getElementsByTagName("div");
for (var i=0; i<allDivs.length; i++){
 if(allDivs[i].className == 'report_record'){
   divContent = allDivs[i].innerHTML;
   allAnchors = divContent.getElementsByTagName("a");
   allDivs[i].innerHTML = "<a href='"+allAnchors[0].href+"' class='report_div_anchor'>"+divContent+"</a>";
 }
}
}

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
That would generate invalid html like
<div><a href="">text<a href="">link</a></a></div>

Why not just



function replaceAllDivs(){
  var allDivs = document.getElementsByTagName("div");
  for (var i=0; i<allDivs.length; i++){
    if(allDivs[i].className == 'report_record'){
      allDivs[i].onclick=function() {
      location=allDivs[i].getElementsByTagName('a')[0].href;
    }
  }
}

Open in new window

Author

Commented:
I tried this out but it didn't do anything. Here is the page that I need it to work on. You can see that the containers holding each enter is a mix of tables and divs. The div I need it to work on has two classes associated with it. I think I'm going about this all wrong:

http://www.metrovancouverproperties.com/tools_and_advice.html
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

IT Expert
Top Expert 2009
Commented:
Which div do you want to make clickable?

<table border="0">
<tbody><tr>
<td align="left" valign="top">
<div class="leadin_image" style="position: relative;">
<a href="_media/Documents/8%20Mistakes%20to%20Avoid%20When%20Buying.doc" target="_new">
<img class="leadin_img" src="img/file_type_icons_trans/doc.gif" style="border: 0pt none;" border="0">
</a>
</div>
</td>

<td align="left" valign="top">
<div class="leadin_text">
<p>You've been saving for awhile, weighing your options, looking around casually. Now you've finally decided to do it - you're ready to buy a house. The process of buying a new home can be incredibly exciting, yet stressful, all at once. Where do you start? <b></b></p>
</div>
<div class="leadin_links">
<a href="_media/Documents/8%20Mistakes%20to%20Avoid%20When%20Buying.doc" target="_new">Get this report...</a>
</div>
</td>

</tr>
</tbody>
</table>

Open in new window

i didn't find any div with class 'report_record',  are you sure you replaced it with the appropriate class name while tring ?

Author

Commented:
I used report_record as a pretend class. It turns out that the generated html is clumsy in this case. In the page I quoted, I would like each section with the 1 pixel dotted border around it, containing a report, to be entirely clickable. The styling is controlled by the leadin_style1 class, and I've been able to make the section change colour on rollover, but to make it clickable has eluded me. Since there are two anchors already in the section, and neither of them has a class, I would think that I need to strip one of them, give the other a class, give it display: block, make the width, height equal the section's width and height, position it absolutely within the area and position the div relatively. I can do all of that except strip one anchor and give the other a class. Please let me know if I'm on the right track with my thinking or not. Thank you,
would you try to put in the head tag the following

<script type="text/javascript" language="javascript">
function replaceAllDivs(){
var allDivs = document.getElementsByTagName("div");
for (var i=0; i<allDivs.length; i++){
 if(allDivs[i].className == 'leadin-horizontal leadin_style1'){
   divContent = allDivs[i].innerHTML;
   allAnchors = divContent.getElementsByTagName("a");
   allDivs[i].innerHTML = "<a href='"+allAnchors[0].href+"' class='report_div_anchor'>"+divContent+"</a>";
   // allDivs[i].innerHTML = "<a href='"+allAnchors[0].href+"' class='your class name here'>"+divContent+"</a>";
   // if you want to give it a specific class name replace above the uncommented code with the commented one
 }
}
}
</script>


and on the body tag use onload as following
<body onload="replaceAllDivs();">

Michel PlungjanIT Expert
Top Expert 2009

Commented:
And I repeat
Illegal HTML: <div><a href="">text<a  href="">link</a></a></div>

Author

Commented:
I've changed the format of the site so that it didn't need a solution to my original probelm. Thanks much for helping.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial