I am using the Calendar control of ASP.NET. I need to display a pop-up form when I hover over a particular date in the Calendar control. This pop-up should display data from database.
Does anyone have a solution for this?
I dont know how asp name the date spans, check it, its very easy to detect after getting the selector user jQuery to add the event
jQuery('selector').hover(function(){ //or use mousemove
getPopup(jQuery(this).text()); // just send any data to detect the date
}) ;
after that you'll need to make an AJAX request in the getPopup function
you may use
jQuery.get()//or jQuery.post()
__doPostBack()//if you have update panels
//or any ajax technique xmlhttprequest,PM,...
in the response of the ajax request just draw the popup ...
hope this helps
examle getPopup function
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 ...
}
You should have an empty div:
<div id="popup"></div>
then bind an event to the calendar elements:
('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();
});
});
Look at jquery.load() and jquery.ajax()
Add a CSS class to the cell containing the date that should trigger the popup. You'll need to override the DayRender event to do this.
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
}
}
Then add some JavaScript (or Jquery) to trigger the pop-up. The JQuery ajax functions provide the easiest way to get your data and populate the pop-up as per @user1225246's answer.
$(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.');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.