c# - カレンダーコントロールの上にマウスを置くとJqueryポップアップが表示されます

Question

ASP.NETのカレンダーコントロールを使用しています。カレンダーコントロールの特定の日付にカーソルを合わせると、ポップアップフォームを表示する必要があります。このポップアップには、データベースのデータが表示されます。

誰かがこれに対する解決策を持っていますか？

Answer 1

空の div が必要です。

<div id="popup"></div>

次に、イベントをカレンダー要素にバインドします。

('li.calendar').hover(function(){
   //make an ajax call and populate the popup div with the data
   //easiest method is jquery.load(), but if you need more control use jquery.ajax();
   $("popup").load('path/to/page.asp',data,function(){
       $("popup").show();
   });


});

jquery.load()とjquery.ajax( ) を見てください

Answer 2

日付にまたがるASP名がどのように付けられているかわかりません。確認してください。セレクターユーザーjQueryにイベントを追加さ​​せた後、非常に簡単に検出できます

jQuery('selector').hover(function(){ //or use mousemove
  getPopup(jQuery(this).text()); // just send any data to detect the date
}) ;

その後、getPopup 関数で AJAX リクエストを行う必要があります。

あなたが使用することができます

jQuery.get()//or jQuery.post()
__doPostBack()//if you have update panels 
//or any ajax technique xmlhttprequest,PM,...

ajaxリクエストへの応答で、ポップアップを描画するだけです...

お役に立てれば

例 getPopup 関数

function getPopup(date/*for example*/){
  jQuery.getScript('www.myWebsite.com/pageThatDrawsThePopup?date='+date);
  // getScript assuming that the return value is JS code the immediately draws the popup
  // ?date = date assuming that your page takes the date as query string and get the data from the database upon this field 
  //dont forget to change the url
 //very simple very easy ...  

}

Answer 3

ポップアップをトリガーする日付を含むセルに CSS クラスを追加します。これを行うには、 DayRender イベントをオーバーライドする必要があります。

void myCalendar_DayRender(object sender, DayRenderEventArgs e)
{
    if (e.Day.Date.Day.ToString().EndsWith("7")){// Replace with your own condition
        e.Cell.CssClass+=   "specialCell"; //replace with your own custom css class name
    }
}

次に、JavaScript (または Jquery) を追加して、ポップアップをトリガーします。JQuery ajax 関数は、@ user1225246 の回答に従って、データを取得してポップアップに入力する最も簡単な方法を提供します。

$(document).ready(function(){

    $('.specialCell').hover(function(){

        function(){//This will get called when you mouseover
            alert('put your JQuery AJAX code here.');
        },

        function(){
            alert('do any clean-up (e.g. hiding the popup if you need to) here.');
        }
    });