Javascript无法在ASP.NET UpdatePanel内的内容上正确运行

Question

我有一个函数，当用户将鼠标悬停在某些日期时，它会在jQuery日期选择器的某些日期上添加custon工具提示。 这在正常的html页面中可以正常工作，但是我需要使其在带有updatepanel的.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 updatepanel中），第一个可用日期上的custon工具提示就会弹出而不会悬停（因为已设置）为默认日期）。 似乎忽略了mouseover事件的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>

我将datepicker代码包装在一个function pageLoad() { ... }

我已经尽力简化了，但是我担心它可能仍然没有意义。 任何帮助将非常感激。

编辑

好的，我想我正在采取一些措施...似乎正在两次运行mouseover事件，一次是在现有的隐藏日期选择器上，另一次是在显示日期选择器时。 因此，第二次运行该类时，它们已经被删除，因此显示了工具提示。

任何想法为什么会这样？

Answer 1

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

function pageLoad(sender,args){
    // Code that should get executed again after partial postback
}

Javascript无法在ASP.NET UpdatePanel内的内容上正确运行

问题描述

1 个解决方案

解决方案1
0 2013-07-08 14:49:46

Javascript无法在ASP.NET UpdatePanel内的内容上正确运行

问题描述

1 个解决方案

解决方案1 0 2013-07-08 14:49:46

解决方案1
0 2013-07-08 14:49:46