jquery run serverside script when mouseover

Question

Hi

I have a site where I need to check all href-links if they are in a custom dictionary on the site. If they exist then the title attribute in the a-tag should be set to the text that is fetched from the server. I put this together based on other wuestions from this site (example, not tested):

// How to only activate "a href" links?
jQuery('a').mouseover(function() {

  // should be what is between <a href="">this text</a>. Is this correct?
  var dictionaryWord = jQuery(this).text();

  // do a server site call to get description for the word given in the var above
  jQuery.get("/getDescriptionFromDictionaryWord.aspx", { word: dictionaryWord },

    function(data){
      // set title tag for the a-tag actual a-tag
      // will "this" refer to the a-tag with mouseover?
      jQuery(this).attr("title", data);

  });

});

There may be errors in the above. I have just created it from different answers found in this here on StackOverflow. Is there a better way to do get a response from a server than the above?

If it works I only need a nice way to show the title tag on mouseover. I have seen some packages for that so that should be easy enough.

BR. Anders

UPDATE (based on answers below)

// all "a href" do this for the first mouseover "one.()"
jQuery('a[href]').one('mouseover',(function() {


  // get a reference to the clicked + get dictionary word
  var anchor = jQuery(this),
      dictionaryWord = anchor.text();

  // do a server site call to get description for the word given in the var above
  jQuery.get("/getDescriptionFromDictionaryWord.aspx", { word: dictionaryWord },

    function(data){
      // set title tag for the a-tag actual a-tag
      // will "this" refer to the a-tag with mouseover?
      anchor.attr("title", data);

  });

}));

Answer 1

Some imporvements:

//Match only a with the href attribute
jQuery('a[href]').mouseover(function() {

  var dictionaryWord = jQuery(this).text(),
  //cache the context and use it in the ajax function
  el=jQuery(this);

  jQuery.get("/getDescriptionFromDictionaryWord.aspx", { word: dictionaryWord },

    function(data){
      //You can't use the $(this) use the cached context
      el.attr("title", data);  
  });

});

This should work.

Answer 2

This code should work, however in my opinion it is better to load titles without javascript as it reduce load on server. Unless you want to show some description with HTML. For this purposes attr tag is not an option.

Answer 3

What you've written works, provided that getDescriptionFromDictionaryWord.aspx looks something like:

Response.Clear();
Response.Write("description for word");
Response.End();

i.e. the entire response is the value you want to display.

A nicer way to do this would be to create a new file of the type "Web service (asmx)", call it "Dictionary.asmx". In the CS/VB file that is created, make sure to uncomment the commented-out ScriptService attribute, then add a method that looks like this:

[WebMethod]
public string GetDescription(string word) {
    // internal logic for dictionary lookup
    return description;
}

That way, you can submit a request like this:

$('a[href]').mouseover(function() {

    // the above selector finds all anchors with 'href' attribute

    var anchor = $(this); // get a reference to the clicked item
    var dictionaryWord = anchor.text();

    jQuery.get("/Dictionary.asmx/GetDescription", { word: dictionaryWord }, function(data){
      anchor.attr("title", data.d); // .NET will wrap the response in a 'd' property
    });

});

Answer 4

I'd perhaps suggest also using $('a[href]').one('mouseover',function()... instead of $('a[href]').mouseover(function()... just so it only does it once per link, rather than overtime you mouseover a link.