当我在AJAX中使其可见时，DatePicker未在文本框中触发UpdatePanel

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <p runat="server"> 
      <asp:Label ID="lblDOA" runat="server" Text="Appointment Date :" Height="21px" 
       Width="136px" Visible="False"></asp:Label> 
      <asp:TextBox ID="txtDOA" runat="server" CssClass="fieldz" AutoPostBack="false" 
       Visible="False" ViewStateMode="Enabled"></asp:TextBox> 
     </p> 
     </ContentTemplate> 
     </asp:UpdatePanel>

上面的文本框在页面初始加载时不可见。当用户点击其他下拉列表并做出选择时，我可以看到它。该文本框显示出来，但我用它的Jquery日期选择器不会触发，因为使用AJAX UpdatePanel使文本框可见，其HTML不会被添加到页面中。当我在AJAX中使其可见时，DatePicker未在文本框中触发UpdatePanel

任何指导如何解决它？

我正在粘贴下面的jquery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" 
    type="text/javascript"></script> 
<script type="text/javascript"> 
    jQuery(function ($) { 
     //$("#occurrence_dateTextBox").mask("99/99/9999"); 
     $("#<%= txtDOA.ClientID %>").datepicker(); 
     //$(".datepicker").datepicker(); 
</script> 
    });

来源

2011-11-10 MStp

然后你需要在添加输入时添加日期选择器，而不是在准备好文档时添加日期选择器。发布您用来加载输入的js，我们可能会提供帮助。 – Sinetheta

这似乎解决您的关注。更新面板更新后，您需要初始化日期选择器。 http://stackoverflow.com/questions/1190549/how-can-i-run-some-javascript-after-an-update-panel-refreshes – enduro

找到并更容易的解决方法。

如果在面板中包装文本框并将Panel设置为visible = false，然后在Ajax上将其更改为visible = true部分回发Jquery可以正常工作。

这是我在上面的代码中的解决方法。

<asp:Panel ID="Panel1" runat="server" Visible="false"> 
      <p> 
       <asp:Label ID="lblDOA" runat="server" Text="Appointment Date :" Height="21px" Width="136px" 
        Visible="true"></asp:Label> 
       <asp:TextBox ID="txtDOA" runat="server" CssClass="fieldz" AutoPostBack="false" Visible="true" 
        ViewStateMode="Enabled"></asp:TextBox> 
      </p> 
     </asp:Panel>

来源

2011-11-10 02:24:51 MStp

如果在执行jQuery代码时HTML元素不是DOM的一部分，那么情况确实如此。将元素添加到DOM后，您可能想要做的就是将jQuery代码绑定到元素。看看jQuery的live()函数。它基本上监视添加到DOM的元素并将绑定应用于它们。

由于日期选择器绑定发生在插件内部，因此您还需要做一件额外的事情来完成此工作。日期选取器的普通代码行没有live（）语法。然而，你基本上想要做的就是在新添加的元素有焦点时立即运行插件。（毕竟，日期选择器在元素关注之前并不是特别有用。）所以，你需要使用live（）绑定到“焦点”事件。类似这样的：

$('#<%= txtDOA.ClientID %>').live('focus', function() { 
    $(this).datepicker(); 
});

来源

2011-11-10 01:35:54 David

检查现场感谢分享。 – MStp

它看起来像Live已被弃用，我应该使用委托或如下，$（document）.delegate（'＃<％= txtDOA.ClientID％>'，'focus'，function（）{ $（this）。 datepicker（）; }）;但是我仍然需要弄清楚第一部分。 – MStp

您还可以在异步回发之后重新绑定datepicker。函数pageLoad由.NET更新面板自动调用，这将允许您隐藏和显示多次，而不仅仅是一次。

function pageLoad(){ $("#<%= txtDOA.ClientID %>").datepicker(); }

来源

2016-05-12 15:44:07 Sky

当我在AJAX中使其可见时，DatePicker未在文本框中触发UpdatePanel

回答

相关问题