Pierrevdw Ответов: 1

Данные из SQL "прыгают" при наведении курсора на изображение, вызывающее webmethod


Привет,

У меня есть несколько изображений в сетке, на которые пользователь может навести курсор, а затем выполнить скрипт jQuery, вызывающий веб-службу, которая извлекает данные из SQL server на основе идентификатора изображения. (Веб-служба находится в файле. cs, а не во внешнем файле.)

Допустим, у меня есть сетка с 8 строками, в каждой строке есть изображение, которое должно появиться с описанием, описывающим информацию об элементе строки. Пользователь наводит курсор на первое изображение, которое затем всплывает с правильным описанием. Переходя к четвертому изображению, пользователь наводит курсор на второе и третье изображение, чтобы перейти к четвертому. При посадке на четвертое изображение описания "прыгают" вокруг, сначала принося второе, затем третье и, наконец, четвертое описание.

Я надеюсь, что приведенное выше описание имеет смысл.

HTML-код:

<img id='<%# "MyImg" + Eval("SomeID"); onmouseover="MyMethod(this.id)" alt="Support" height="20" width="20" src="images/Support.png" />



код JavaScript:

$('#' + imgID).live("hover", function (e) {
            if (e.type == 'mouseenter' || e.type == 'mouseover') {
                var result = PageMethods.GetMethod(imgID, onSuccess, onError);
                function onSuccess(result) {
                    $("#Guidance").html(result);
                }
                function onError(result) {
                    //alert(result);
                }


С фоновым кодом:

[WebMethod]
[ScriptMethod]
public static string GetMethod(string imgID)
{
   return MyClass.MyTable.Where(c => c.ID == Convert.ToInt32(imgID.Replace("ImgName", ""))).First().Property;
};



Любые предложения будут оценены по достоинству.

Спасибо

Что я уже пробовал:

Я попытался добавить тайм-ауты, а также google, чтобы попытаться найти решение.

1 Ответов

Рейтинг:
2

Richard Deeming

Используйте плагин hoverIntent jQuery[^]:

<img id='<%# "MyImg" + Eval("SomeID"); %>' alt="Support" height="20" width="20" src="images/Support.png" class="my-hover-image" />
$(function(){
    $(".my-hover-image").hoverIntent(function(){
        var result = PageMethods.GetMethod(this.id, onSuccess, onError);
        
        function onSuccess(result) {
            $("#Guidance").html(result);
        }
        function onError(result) {
            console.log(result);
        }
    });
});


Pierrevdw

Спасибо,разберусь.