JQuery запустить серверный скрипт при наведении мыши

Question

У меня есть сайт, на котором мне нужно проверить все href-ссылки, если они есть в пользовательском словаре на сайте. Если они существуют, то атрибут title в теге a должен быть установлен на текст, извлекаемый с сервера. Я собрал это вместе, основываясь на других соображениях с этого сайта (пример, не проверен):

// 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);

  });

});

Возможны ошибки в вышеприведенном. Я только что создал его из разных ответов, найденных в этом здесь на StackOverflow. Есть ли лучший способ получить ответ от сервера, чем приведенный выше?

Если это работает, мне нужен только хороший способ показать заголовок при наведении курсора. Я видел несколько пакетов для этого, так что это должно быть достаточно просто.

BR. Андерс

ОБНОВЛЕНИЕ (на основе ответов ниже)

// 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

Возможно, я бы предложил также использовать $('a[href]').one('mouseover',function()... вместо $('a[href]').mouseover(function()..., чтобы он делал это только один раз для ссылки, а не сверхурочно, когда вы наводите курсор мыши на ссылку.

Answer 2

Этот код должен работать, однако, по моему мнению, лучше загружать заголовки без JavaScript, так как это уменьшает нагрузку на сервер. Если вы не хотите показать описание с HTML. Для этой цели тег attr не подходит.

Answer 3

То, что вы написали, при условии, что getDescriptionFromDictionaryWord.aspx выглядит примерно так:

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

т.е. весь ответ - это значение, которое вы хотите отобразить.

Лучший способ сделать это - создать новый файл типа "Web-сервис (asmx)", назовите его "Dictionary.asmx". В созданном файле CS / VB обязательно раскомментируйте закомментированный атрибут ScriptService, затем добавьте метод, который выглядит следующим образом:

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

Таким образом, вы можете отправить запрос следующим образом:

$('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

Некоторые улучшения:

//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);  
  });

});

Это должно работать.