得到嵌套gridview的圖像鼠標懸停動態細節

我有一個嵌套的GridView和當行A第一次加載頁面沒有彈出，在A行正確的信息彈出圖像然而第二懸停懸停在圖片。得到嵌套gridview的圖像鼠標懸停動態細節

的另一個問題是，當我將鼠標懸停在B行圖像從A行上空盤旋A行的細節A行彈出的B行後，但是當我將鼠標懸停在行B第二次正確的細節彈出。

我將不勝感激這個問題的任何援助，因爲我一直在試圖解決它一段時間了。

The JSFIDDLE link is below as a demonstration

2012-05-03 wayne9999

從的jsfiddle樣品不從數據庫系統具有信息，所以什麼我試圖將難以充分說明說 – wayne9999

有一個AsyncPostBackTrigger，它觸發一個按鈕來從代碼隱藏中獲取信息，從而以這種方式連接到數據庫，唯一的問題是，當懸停在不同的圖像行時，它會導致我在第上面的問題。 – wayne9999

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var offsetY = -20; 
      var offsetX = 40; 
      var html = '<div id="info" class="InfoMessage"><h4>Info here </h4><p></p></div>'; 
      $(html).hide().appendTo('body'); 

      $('img.imagepopupcontext').hover(function (e) { 
       $('div.InfoMessage').hide().find('p').text($(this).data('message')); 
       $('div.InfoMessage').fadeIn(400); 
       $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX); 
      }, function() { 
       $('#info').hide(); 
      }); 

      $('img.imagepopupcontext').mousemove(function (e) { 
       $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     #info 
     { 
      background: #7F7777; 
      width: 300px; 
      padding-bottom: .5em; 
      padding-right: 15px; 
      overflow: hidden; 
      position: absolute; 
     } 
    </style> 
</head> 
<body> 
    <table border="1" bgcolor="skyblue"> 
     <tr> 
      <td> 
       in progress 
      </td> 
      <td> 
       Sale 
      </td> 
     </tr> 
     <tr> 
      <td> 
       in progress 
      </td> 
      <td> 
       <table border="1" bgcolor="orange"> 
        <tr> 
         <td> 
          inner table a 
         </td> 
         <td> 
          inner table2 A 
         </td> 
         <td> 
          <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png" 
           data-message="Show dynamic information A a" /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          inner table b 
         </td> 
         <td> 
          inner table2 B 
         </td> 
         <td> 
          <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png" 
           data-message="Show dynamic information B b" /> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    <div id="divshowpopup"> 
     <p id="dbInfo"> 
     </p> 
    </div> 
</body> 
</html>

來源

2012-05-04 09:57:11 Thulasiram

爲現場演示請參閱此鏈接：http://jsfiddle.net/nanoquantumtech/FWTKn/ – Thulasiram

上述一個是正確的。或者你將如何獲得動態細節？ – Thulasiram

我將得到該行的ID，然後在後面的代碼中調用以搜索數據庫表中的該ID，然後返回結果並將其放在面板中以顯示在懸停彈出窗口 – wayne9999

這是解決問題的辦法

$('img.imagepopupcontext').hover(function (e) { 
      // Begin mouseover function 

      // Grab the p tag with the id of 'dbInfo' in order 
      // to retrieve information from it later 
      var cvalue = $(this).parent().parent().attr('id'); //tr.innerGridRow parent 

      count++; 
      //$('#ctl00_ContentPlaceHolder1_txtcontextkey').val(cvalue); 
      //$('#ctl00_ContentPlaceHolder1_btnmodalclick').click(); 

      // var img = $(this); 

      $.ajax({url:'callbackdynamicdata.aspx',context:this,data:({ ID: cvalue}),success: 
       function(data){ 

        var html = '<div id="infopathpanel">'; 
        html += data; 
        html += '</div>'; 
        // Append the variable to the body and the select 
        // itself and its children and hide them, so you 
        // can then add a fadeIn effect. 

        $('body') 
         .append(html) 
          .children('#infopathpanel') 
          .hide() 
          .fadeIn(400); 


        // This is where the popup offesets away from your cursor 
        // The variables set up top will decide how far away the 
        // pop up strays away from your cursor. 
        var pos = $(this).offset(); 

        $('#infopathpanel').css({ 
         position: "absolute", 
         top: (pos.top - 170) + "px", 
         left: (pos.left - 310) + "px", 
         'background-color': '#ffffcc', 
         'width': '300px', 
         'border-color': '#060F40', 
         'border-width': '2px', 
         'color': '#060F40' 

        });    

       }})

來源

2012-05-04 20:41:43 wayne9999

得到嵌套gridview的圖像鼠標懸停動態細節

回答

相關問題