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