0

我有一个功能，当用户将鼠标悬停在 jquery datepicker 上的某些日期上时，它会添加一个自定义工具提示。这在普通的 html 页面中工作正常，但我需要让它在带有更新面板的 .net 页面上工作......

这是我的有效代码...

<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();
    });

但是，如果将输入替换为在单击按钮之前在页面上不可见的 asp:textbox 并将其全部放在 asp.net 更新面板中，则第一个可用日期弹出窗口上的自定义工具提示不会悬停（因为已设置作为默认日期）。似乎忽略if($(this).hasClass("ui-datepicker-days-cell-over")){了鼠标悬停事件的一部分。

    <%@ 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>

我已经将我的日期选择器代码包装在一个function pageLoad() { ... }

我试图尽可能简化这一点，但我担心它可能仍然没有意义。任何帮助将非常感激。

编辑

好的，我想我有办法解决它......它似乎运行了两次鼠标悬停事件，一次是在现有的隐藏日期选择器上，另一次是在显示日期选择器时。所以第二次运行时，类已经被删除，所以它显示了工具提示。

任何想法为什么会发生这种情况？

4

1 回答 1

0

在事件中编写代码pageLoad而不是准备好 DOM：

function pageLoad(sender,args){
    // Code that should get executed again after partial postback
}
于 2013-07-08T14:49:46.093 回答