Javascript not running correctly on content within asp.net updatepanel
Question
I have a function which adds a custon tooltip to certain dates on a jquery datepicker when the user hovers over them. This is working fine in a normal html page, but I need to make it work on a .net page with an updatepanel...
Here's my code which works...
<input class='propertyAvailabilityCal' />
<select name="startDates" id="startDates" class="startdates">
<option selected="selected" value="%">%</option>
<option value="2013, 11, 01">C1</option>
<option value="2013, 11, 08">C1</option>
<option value="2013, 11, 11">C1</option>
<option value="2013, 11, 18">C1</option>
<option value="2013, 11, 29">C1</option>
</select>
Javascript...
function dateDiffInDays(a, b) {
// Discard the time and time-zone information.
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / (1000 * 60 * 60 * 24));
}
var firstStartDate;
$('.propertyAvailabilityCal').datepicker({
firstDay: 1,
minDate: 0,
maxDate: '+2Y',
numberOfMonths: 1,
beforeShow: function(input, inst) {
startDates = [];
selectdatesElem = $(input).siblings("select.startdates");
firstStartDate = selectdatesElem.find("option:eq(1)").val().split(', ');
$(input).datepicker('option','defaultDate',dateDiffInDays(new Date(), new Date(parseInt(firstStartDate[1], 10) + "/" + parseInt(firstStartDate[2], 10) + "/" + parseInt(firstStartDate[0], 10))));
$(input).siblings("select.startdates").find("option").each( function() {
startdateParts = $(this).val().split(', ');
startDates.push(startdateParts[0] + ", " + (parseInt(startdateParts[1], 10)-1) + ", " + parseInt(startdateParts[2], 10));
});
},
beforeShowDay: function(date) {
for (i = 0; i < startDates.length; i++) {
if (date.getFullYear()+", "+date.getMonth()+", "+date.getDate() == startDates[i]) {
return [true, 'eventDay',"someText"];
}
}
return [false, ''];
}
});
$(document).on("mouseover", "td.eventDay", function() {
if($(this).hasClass("ui-datepicker-days-cell-over")){
$(this).removeClass('ui-datepicker-days-cell-over').find('a').removeClass('ui-state-hover');
}
else{
$(this).data("title", { popit: $(this).attr("title") }).removeAttr("title").css("position","relative");
if($(this).data("title").popit) {
$(this).append("<span class='detailsPopup' style='position:absolute; z-index:5;'>"+$(this).data("title").popit+"</span>");
}
}
});
$(document).on("mouseleave", "td.eventDay", function() {
$(this).data("title", { popit: $(this).find(".detailsPopup").html() });
$(this).attr("title", $(this).data("title").popit);
$(this).find(".detailsPopup").remove();
});
But if replace the input with an asp:textbox which is not visible on the page until a button is clicked and place it all within an asp.net updatepanel, the custon tooltip on the first available date popups up without hovering (because this is set to be the default date). Is seems to be ignoring the if($(this).hasClass("ui-datepicker-days-cell-over")){ part of the mouseover event.
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="UTF-8" %>
<script runat="server">
Sub CheckAvailability(ByVal Sender as Object, ByVal E as EventArgs)
mydate.Visible = True
mybutton.Visible = False
End Sub
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
<script type="text/javascript" src="http://www.tomandjayne.co.uk/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://www.tomandjayne.co.uk/Scripts/jquery-ui-1.8.22.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<style type='text/css'></style>
<script type='text/javascript'>
//DATE DIFFERENCE FUNCTION FOR PROPERTY LEVEL DATEPICKER FIRST DATE
var firstStartDate;
function dateDiffInDays(a, b) {
// Discard the time and time-zone information.
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / (1000 * 60 * 60 * 24));
}
function pageLoad() {
$('.propertyAvailabilityCal').datepicker({
firstDay: 1,
minDate: 0,
maxDate: '+2Y',
numberOfMonths: 1,
beforeShow: function(input, inst) {
startDates = [];
selectdatesElem = $(input).siblings("select.startdates");
firstStartDate = selectdatesElem.find("option:eq(1)").val().split(', ');
$(input).datepicker('option','defaultDate',dateDiffInDays(new Date(), new Date(parseInt(firstStartDate[1], 10) + "/" + parseInt(firstStartDate[2], 10) + "/" + parseInt(firstStartDate[0], 10))));
$(input).siblings("select.startdates").find("option").each( function() {
startdateParts = $(this).val().split(', ');
startDates.push(startdateParts[0] + ", " + (parseInt(startdateParts[1], 10)-1) + ", " + parseInt(startdateParts[2], 10));
});
},
beforeShowDay: function(date) {
for (i = 0; i < startDates.length; i++) {
if (date.getFullYear()+", "+date.getMonth()+", "+date.getDate() == startDates[i]) {
return [true, 'eventDay',"someText"];
}
}
return [false, ''];
}
});
$(document).on("mouseover", "td.eventDay", function() {
if($(this).hasClass("ui-datepicker-days-cell-over")){
//alert("do nothing");
$(this).removeClass('ui-datepicker-days-cell-over').find("a").removeClass('ui-state-hover');
//$(this).find("span.detailsPopup").remove();
}
else{
$(this).data("title", { popit: $(this).attr("title") }).removeAttr("title").css("position","relative");
if($(this).data("title").popit) {
$(this).append("<span class='detailsPopup' style='position:absolute; z-index:5;'>"+$(this).data("title").popit+"</span>");
}
}
});
$(document).on("mouseleave", "td.eventDay", function() {
$(this).data("title", { popit: $(this).find(".detailsPopup").html() });
$(this).attr("title", $(this).data("title").popit);
$(this).find(".detailsPopup").remove();
});
}
</script>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanelMaster" ChildrenAsTriggers="true">
<ContentTemplate>
<select class="startdates">
<option selected="selected" value="%">%</option>
<option value="2013, 12, 28">1</option>
<option value="2014, 11, 15">1</option>
<option value="2014, 11, 22">1</option>
<option value="2014, 12, 13">1</option>
<option value="2014, 12, 20">1</option>
<option value="2014, 12, 27">1</option>
<option value="2015, 01, 03">1</option>
<option value="2015, 01, 10">1</option>
<option value="2015, 01, 17">1</option>
<option value="2015, 01, 24">1</option>
<option value="2015, 01, 31">1</option>
<option value="2015, 02, 07">1</option>
<option value="2015, 02, 14">1</option>
<option value="2015, 02, 21">1</option>
<option value="2015, 02, 28">1</option>
<option value="2015, 03, 14">1</option>
<option value="2015, 03, 21">1</option>
<option value="2015, 03, 28">1</option>
<option value="2015, 04, 04">1</option>
<option value="2015, 07, 04">1</option>
</select>
<asp:Textbox CssClass="propertyAvailabilityCal" runat="server" ID="mydate" Visible="false" />
<asp:Button runat="server" ID="mybutton" OnClick="CheckAvailability" Text="CHECK AVAILABILITY" CausesValidation="false" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
And I've wrapped my datepicker code in a function pageLoad() { ... }
I've tried to simplify this as much as I can but I fear it might still not make sense. Any help would be much appreciated.
EDIT
OK, I think I'm some way towards working it out... It seems to be running the mouseover event twice, once on an existing hidden datepicker and again when the datepicker is shown. So the second time it is run, the classes have already been removed so it shows the tooltip.
Any ideas why this is happening?
1 answers
solution1
0 2013-07-08 14:49:46
write your code in pageLoad event instead of DOM ready:
function pageLoad(sender,args){
// Code that should get executed again after partial postback
}
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.
Related Question
ASP.Net multiple UpdatePanel refresh with JavaScript
ASP.Net - Javascript inside AJAX UpdatePanel
ASP.NET UpdatePanel Javascript Callback
ASP.NET UpdatePanel: Injecting Javascript on UpdatePanel update
ASP.NET UpdatePanel and Javascript __dopostback
How to get id of controls within UpdatePanel in asp.net
Javascript on ASP.NET Master page not running on content page in subdirectory
asp.net user control and updatepanel break javascript
asp.net usercontrol won't fire javascript inside updatepanel
ASP.Net ScriptManager and UpdatePanel ignoring javascript once posted back
Related Tags