Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

displaying information when hovered over a hyperlink using jquery and ajax.

Posted on 2007-10-03
6
Medium Priority
?
841 Views
Last Modified: 2012-05-05
Hi,

I've got the following jquery code which queries my database and returns the results nicely as a popup window.

I'd like to use the same code, but fire it when it hovers over a hyperlink.  The idea is that it will show extra information about the hyperlink that can't fit on the page.

How can I make it so it fires when the mouse hovers over a hyperlink and then disappers when it is moved off.

It also need to pass into the autosrch.etl the hyperlink url.

Thanks
Tristan
0
Comment
Question by:elmbrook
  • 3
  • 3
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20012590
What following code?

what is "pass into the  autosrch.etl "
0
 

Author Comment

by:elmbrook
ID: 20016028
opps, guess that is what happens when you are tired :)

Existing code, that currently reads what is typed into a textbox:

Function lookup(TxtProductName) {
      if(TxtProductName.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
      } else {
            
// autosrch.etl is like an ASP/PHP server call which talks to my Visual Foxpro database
// TxtProductName = Where the user currently types a product which gets sent as part of the querystring value 'qs'
            
            $.post("autosrch.etl", {qs: ""+TxtProductName+""}, function(data){
                  if(data.length >0) {
                        if (data != 'nodata'){
                        $('#suggestions').show();
                        $('#autoSuggestionsList').html(data);
                        }
                  }
            });
      }
}

So need a way of modifying this code, to fire on the hyperlinks when the user moves over them.  Will modify my suggestion class so it displays more information.



The hardest thing for me to figure out is what code I need to add to the hyperlinks to get it to fire this and pass in the text from the hyperlink and then have the class show and hide when moving over and off a hyperlink.

Does this make sense?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20026876
1. WHEN does it call lookup now?
2. do you want something that is stored in the hyperlink to be passed as
TxtProductName or still coming from the form field.
I mean

<a href="#" onClick="return false"
onMouseOver="lookup('iPod Mini')"
onMouseOut="$('#suggestions').hide();">iPod Mini</a>
<a href="#" onClick="return false"
onMouseOver="lookup('iMac')"
onMouseOut="$('#suggestions').hide();">iMac</a>

or like

<a href="#" onClick="return false"
onMouseOver="lookup(document.forms[0].textProductField.value)"
onMouseOut="$('#suggestions').hide();">Mouseover to see desription of what you typed in the field</a>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:elmbrook
ID: 20028704
1. WHEN does it call lookup now?

It runs this code in the textbox onkeyup="lookup(this.value);" to pass what is being typed.

2. do you want something that is stored in the hyperlink to be passed as
TxtProductName or still coming from the form field.

I need it passing in the url of the hyperlink that it is currently hovering over.  More like this, but not hard coded, has to somehow read the url of the a href value.
onMouseOver="lookup('iPod Mini')"

The hyperlink should be clickable too, it will be similar to http://website/asppage.asp?productid=1234.

Thanks

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20029447
So you want it to lookup 1234?

<a href="http://website/asppage.asp?productid=1234"
onMouseOver="lookup(this.href.split('=')[1])"
onMouseOut="$('#suggestions').hide();">Mouseover to see desription of what you get if you click</a>
0
 

Author Comment

by:elmbrook
ID: 20031371
Hi, that works great except my popup class needs to automatically position itself under each hyperlink.  I'll reward points to you for solving this question and post a new question.

Thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question