find a value inside of class and display a link

[broadbeach]

Hi all we are in desperate need of a solution, we have tried and search different methods but none of us can figure it out.

Basically we need to find a word which is inside a class and display a link.

So something like this

find a word equal to "1 line custom"

then

display this <a href="/1-line-custom.htm">click here</a>

I'm not sure if this is really simple or not.

Any help would be much appreciated.

Thanks

Will

[Old Pedant]

What does "inside a class" mean? What kind of class? You mean a class name, as in

<span class="bananas">...</span>

An example would help tremendously, you know.

[broadbeach]

Ok so we are getting close, basically what this is doing now is finding the words inside a class then showing us them in an alert.

<table>
  <tbody>
    <tr>
      <td><div class="productitemcell">Champagne Weadding</div></td>
      <td><div class="productitemcell">1 line custom</div></td>
    </tr>
  </tbody>
</table>

function displaymessageNow()
{
var divArray = document.getElementsByClassName("productitemcell");

for (var i = 0; i<divArray.length; i++)
{
if (divArray[i].class="productitemcell")
alert(divArray[i].innerHTML);
}
}
displaymessageNow();

But this is obviously not the final result we are after.

We need to be able to find the words "1 line custom" in the background (so the user dosnt see this happening) then once these words are found display a link.

Let me know if this is making any sense to you.

Thanks

[Old Pedant]

Okay, pretty trivial. There are better ways to do this, and it may not work for all kinds of content, but given the example you showed, just do:

function addLinks( )
{
    var divArray = document.getElementsByClassName("productitemcell");
    for (var i = 0; i<divArray.length; i++)
    {
        var div = divArray[i[;
        div.innerHTML = '<a href="/' + escape(div.innerHTML) + '">' + div.innerHTML + '</a>';
    }
}
window.onload = addLinks;

With the example you gave, that would alter it to

<table>
  <tbody>
    <tr>
      <td><div class="productitemcell"><a href="/Champagne%20Weadding">Champagne Weadding</a></div></td>
      <td><div class="productitemcell"><a href="/1%20line%20custom">1 line custom</a></div></td>
    </tr>
  </tbody>
</table>

The call to escape() is there because spaces in URLs can cause hiccups, so you encode the URL (and the browser will automatically decode it...converting %20 to space, etc.).

Is that what you meant?

[broadbeach]

Ok ok, I'm liking this that is very very close to what we are after, however there is still a small issue.

It would be preferable if the first two div classes "Champagne Weadding" and "Party Like 1999" didnt generate as links.

<table>
  <tbody>
    <tr>
      <td><div class="productitemcell">Champagne Weadding</div>
        <div class="productitemcell">Party Like 1999</div></td>
      <td><div class="productitemcell">1 line custom</div>
        <div class="productitemcell">2 line custom</div></td>
    </tr>
  </tbody>
</table>

Now keeping in mind that we have no control over removing the <div class="productitemcell"></div> wrapped around them as this is a function of the CMS we are using, However we could wrap it all in a div id or something if that would help like this:

<table>
  <tbody>
    <tr>
      <td><div id="removeLink">
          <div class="productitemcell">Champagne Weadding</div>
          <div class="productitemcell">Party Like 1999</div>
        </div></td>
      <td><div class="productitemcell">1 line custom</div>
        <div class="productitemcell">2 line custom</div></td>
    </tr>
  </tbody>
</table>

Thanks

[Old Pedant]

Would be better if you could wrap around the ones you *want*:

<table>
  <tbody>
    <tr>
      <td>
          <div class="productitemcell">Champagne Weadding</div>
          <div class="productitemcell">Party Like 1999</div>
      </td>
      <td>
        <div id="changeLinks">
            <div class="productitemcell">1 line custom</div>
            <div class="productitemcell">2 line custom</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Is that possible?

If not, yes we can do it, just more work.

[broadbeach]

Yes we can do what you suggested above.

[Old Pedant]

Okay...

function addLinks( )
{
    var changeOnly = document.getElementsByClassName("changeLinks");
    for ( var c = 0; c < changeOnly.length; ++i )
    {
        var divArray = changeOnly[c].getElementsByClassName("productitemcell");
        for (var i = 0; i<divArray.length; i++)
        {
            var div = divArray[i[;
            div.innerHTML = '<a href="/' + escape(div.innerHTML) + '">' + div.innerHTML + '</a>';
        }
    }
}
window.onload = addLinks;

[Old Pedant]

To do it the other way isn't *that* much harder, though, if it's significantly easier for you do drop in <div class=removeLink">

[broadbeach]

fantastic, we just had to change the following:

function addLinks()
{
var changeOnly = document.getElementsByClassName("changeLinks");
for ( var c = 0; c<changeOnly.length; ++c )
{
var divArray = changeOnly[c].getElementsByClassName("productitemcell");
for (var i = 0; i<divArray.length; i++)
{
var div = divArray[i];
div.innerHTML = '<a href="/' + escape(div.innerHTML) + '">' + div.innerHTML + '</a>';
}
}
}
window.onload = addLinks;

[Old Pedant]

Oops...too much copy/paste, not enough edit. Sorry.

[broadbeach]

Hey Old Pedant

I have another problem with the same code as in previous posts if you wish to accept.

We are trying to add thick box to the links which are created. At first this seemed rather simple, however it dosnt want to work.

Here is the code which triggers thick box, now this works all fine.

<a href="/customise-forms/customisation-1?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="Form 1" class="thickbox">customisation-1</a>

Now here is the thick box code implemented into the JS you wrote for us previously (thick box stuff in red):

function addLinks()
{
	var changeOnly = document.getElementsByClassName("changeLinks");
	for ( var c = 0; c<changeOnly.length; ++c )
	{
		var divArray = changeOnly[c].getElementsByClassName("productitemcell");
		for (var i = 0; i<divArray.length; i++)
		{
			var div = divArray[i];
			div.innerHTML = '<a href="/customise-forms/' + escape(div.innerHTML) + '?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" class="thickbox" title="Form 1">' + div.innerHTML + '</a>';
		}
	}
}
window.onload = addLinks;

The URL it spits out seems to be fine and in theory it should work but as it is it just sends you to the actual page instead of opening up in thick box. Can you see anything in the code that would stop the thick box from working.

Thanks Mate