-1

I normally don't do much in Javascript, but have spent the last few days working on this problem. Basically I have text in a table where the text itself is a link that when clicked selects the text. I'm using Tipsy to display the message "Click To Select Text" when the link is hovered over. After the link is clicked (and the text selected) I want the original text Tipsy displays to change to a hyperlink. I can get the text to change, but the link is plain text rather than a clickable link.

Here is a sample of one line of text (the function fnSelect uses the class to select all the text in the table row).

        <td class="text"><a id="fade_text1" href="javascript:fnSelect('tom1');" onClick="alternate()" original-title="Click To Select Text"><?php echo $book['text']; ?></a></td>

The function alternate() is the one I'm attempting to use to display the hyperlink by changing the original-title and is as follows.

function alternate() {
    $(".tipsy").remove();
    var link = "site.com/bookmark.php";
    var element = document.createElement("a");
    element.setAttribute("href", link);
    element.innerHTML = "Bookmark Text";
    document.body.appendChild(element);
        $('#fade_text1').tipsy({delayIn: 90, delayOut: 3000});
    $('a').click(function() {
        $('#fade_text1').attr('original-title', element);
    });
}

I can't tell you how many times I have changed this trying to figure out how to make the element link clickable, but no luck. Any help you could offer would be appreciated.

TotalEclipse
  • 1
  • 3
  • What is that random "#" doing in your anchor? – ohiodoug Dec 24 '13 at 05:24
  • @ohiodoug That was an overlooked throwback to something else and I removed it, but still no clickable link. Thanks for pointing that out. – TotalEclipse Dec 24 '13 at 19:32
  • You must give more details. Did you check with "inspect element" that the change actually occur? Your code appends the link to the end of the body element it doesn't replace the clicked link. Also you have to use jquerys `.on` method for dynamically created elements – raam86 Dec 24 '13 at 20:10
  • @raam86 I decided to try a new approach and it is working nicely (comment below). I was in a bit over my head with that one. Thanks for the response. – TotalEclipse Dec 25 '13 at 15:58

2 Answers2

0

replace:

<a id="fade_text1" href="javascript:fnSelect('tom1');" "#" onClick="alternate()" original-title="Click To Select Text"><?php echo $book['text']; ?></a>

with:

<a id="fade_text1" href="javascript:fnSelect('tom1');" onClick="alternate()" original-title="Click To Select Text"><?php echo $book['text']; ?></a>

you have an extra "#" in your <a> tag, which causes this result.

hope that helps.

geevee
  • 5,411
  • 5
  • 30
  • 48
0

Well I'm persistent if nothing else. The answer was pretty simple actually:

$(document).ready(function(){
    $('#1').tipsy({fade: true, opacity: 1.0, html: true, delayOut: 4000});
});


<?php
    $link = "index.php";
    $text = "<a href=" . $link . ">Bookmark Text</a>";
?>


<a id="1" href="#" title="This is a Test" onclick="$('#1').attr('title', '<?php echo $text; ?>');"><?php echo "Click Me"; ?></a>
TotalEclipse
  • 1
  • 3
  • Nice to hear but SO is for questions and answers and since this is not an answer you should write is a comment to the question. – raam86 Dec 25 '13 at 17:10