• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 846
  • Last Modified:

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

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
elmbrook
Asked:
elmbrook
  • 3
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
What following code?

what is "pass into the  autosrch.etl "
0
 
elmbrookAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
elmbrookAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
elmbrookAuthor Commented:
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
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.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now