How to read text selected anywhere on a web page in IE8

I have an app that generates tables of data for the user to look at. Some of the data shown in some columns are keys, such as CUSIP numbers, Tickers or other unique identifiers. I want the user to be able to highlight one of these numbers and be able to click something on the page that let's them look up the meaning of that number in a table.

So, let's say the app can display CUSIPs, customer IDs, Tickers, and Curve Names, whatever those are. I would like to create a feature where the user can select some text on the page and can then click a drop-down-list with choices of "Look up as CUSIP", "Look up as Customer ID", etc. When the user selects look up as CUSIP, some JavaScript would fire that would read the selected text and do the lookup, replacing the page or popping up the information.

The only part I do not know how to do is find out what text the user has selected on the page. I do not know which element the will have clicked on.

I can wrap whatever I want around stuff to make this easier, as I have total control over the HTML that makes up the page.

Unfortunately, this has to work in IE8, because that is what we are using at work, and I would like it to keep working after that, but I realize I may have to code another solution if we upgrade to a modern browser.
jkurantAsked:
Who is Participating?
 
jkurantAuthor Commented:
I have determined that I can use document.selected.createRange().text. The user could select the text they want to look up and then could click on a lookup icon to start the lookup process. I would use the onmousedown event, because the click event clears the selection first.
0
 
Rainer JeschorCommented:
Hi,
does it have to be selected text?
Idea would be to wrap the texts inside SPAN tags and additionally add a custom attribute or class to it (so that you have both the text and the context like customer no or CUSIP). Then you can use e.g. jQuery to dynamically attach the click event to the class as well as adding small icons after the span through the CSS to emphasize that the text has "a lookup" and is clickable.

Pseudo sample:
http://jsfiddle.net/EE_RainerJ/bbbc74qy/

Just my 2ct
Rainer
0
 
jkurantAuthor Commented:
Rainer, I really appreciate your thinking outside the box! I love the idea of using CSS to indicate that the text that people might want to look up can be looked up. The problem is that the app is a front-end to a database and the database can change, so I don't know which fields in which tables a user might want to look up. So, really any text on the page could need to be looked up. So, I figured the only way for the user to specify which text they want to look up is to have them select that text. I wish I could think of another way. If I wrap every bit of text in that span you suggested, then I am not sure but maybe I can capture a right-click on a span or a double-click, and then offer to look up whatever text is in the span tag. But that is still not perfect, as the user might want to leave off part of the text in the cell. Sometimes there are concatenated IDs in the the fields and the user would only want to look up one. Example, "Deal #12345 in Portfolio #9876 was not found".

But what about looping through all the elements on a page and checking to see if text is selected therein? Is that possible in IE8?

I did try setting up a drop target and dragging and dropping selected text onto an image or div, but I could never get that to work. Maybe that is where I should direct my efforts. Basically, I need some way for the user to identify text to be looked up and then a way to trigger the lookup, which can be sophisticated from that point forward (new dialog etc.)
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Maybe it would help if you can set up some test front end html.

My take would be clicking on a column and either by the class or perhaps the column number, determine what type data it is, then grab the text in the table <td> and submit that to an ajax page for look up and return.
http://jsbin.com/jafilaguyo/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    $(function(){
  $('.get td').on('click',function(){
    var c=$(this).attr('class');  // type of data
    var d=$(this).text(); // data to send
    alert(c+' '+d); // data sent
    alert (lookup(c,d)); //data returned from ajax
  });
});

function lookup(c,d){
  // type of look up c (cust, cusip, curve )
  // d is data in the <td>
$.ajax({
  method: "POST",
  url: "ajaxlookuppage.php",
  data: { type: c, data: d }
})
  .done(function( data ) {
    return( data);
  });
}
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<table>
  <tr><td>CUSIP </td><td>customer ID</td><td>Curve ID</td></tr>
  <tr class="get"><td class="cusip">123 </td><td class="cust">Cust1000</td><td class="curve">Curve5867</td></tr>
   <tr class="get"><td class="cusip">124 </td><td class="cust">Cust1001</td><td class="curve">Curve5869</td></tr>
 
  </table>
</body>
</html>

Open in new window

0
 
jkurantAuthor Commented:
No one actually found a solution for me. I found it. The selection is not wiped out during the onmousedown event, so I can use that along with selected text.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.