Javascript-查找对象时出错

Question

我被Asp.net中的Javascript卡住了。我制作了一个TextBox，名为tbValidFrom，另一个名为tbValidTo。我还做了两个ModalPopups。然后，当ModalPopupExtenders获得焦点时，我尝试打开TextBoxes：

<script type="text/javascript">
$('#tbValidTo').focus(function () {
   $find('ModalPopupExtenderNV1').show();
})
$('#tbValidFrom').focus(function () {
    $find('ModalPopupExtenderNV2').show();
})
</script>

但它没有找到tbValidTo或ModalPopUpExtender？

运行时- Microsoft JScript中的错误:预期对象

下面是两个ModalPopupExtenders和TextBoxes中的一个：

<asp:TextBox ID="tbValidFrom" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelNV2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
   <ContentTemplate>
      <cc1:ModalPopupExtender ID="ModalPopupExtenderNV2" runat="server" TargetControlID="HiddenField6"
       PopupControlID="PanelNewVersion" BackgroundCssClass="modalBackground" BehaviorID="ModalPopupExtenderNV2"
       Enabled="True" />
      <asp:HiddenField ID="HiddenField6" runat="server" />
   </ContentTemplate
</asp:UpdatePanel>

和上面的ModalPopupExtender和TextBox一样.

帮我会很好的。谢谢

编辑:是的，我使用了一个主页！

​

​

在标记为黄色的地方失败。

Answer 1

您的jQuery语法错了。

将脚本更改为：

<script type="text/javascript">
$('#tbValidTo').focus(function () {
   $(this).find('#<%=ModalPopupExtenderNV1.ClientID%>').show();
});
$('#tbValidFrom').focus(function () {
    $(this).find('#<%=ModalPopupExtenderNV2.ClientID%>').show();
})
</script>

具有runat="server"的元素最终将以不同于您在aspx文件中输入的ID结束。

我使用<%= %>来获得“最终”id。

希望这有帮助

Answer 2

ASP.NET可以修改元素的id，如果使用Masterpage，元素id将被修改为如下所示：ctl001_ContentPlaceHolder1_tbValidFrom

要避免对元素进行ASP.NET修改，可以使用ASP.NET内联表达式从对象获取呈现的ID。

有关ASP.NET内联表达式的更多信息，请参见以下问题的答案

您可以在这里查看更改客户端ID模式(页面呈现时ASP.NET修改ID的方式)：

ASP.NET客户端ID模式

编辑：

AjaxControlToolkit的ModalPopupExtender不作为html元素呈现在页面上，因此您无法使用ModalPopupExtender的ClientID找到该项目。

您必须使用BehaviourID来调用show函数。

以下代码应正确工作：

$('#<%= tbValidTo.ClientID %>').focus(function () {
   $find('ModalPopupExtenderNV1').show();
})
$('#<%= tbValidFrom.ClientID %>').focus(function () {
   $find('ModalPopupExtenderNV2').show();
});

这将使用ASP.NET内联表达式查找textbox对象以查找客户端ID，然后查找行为ID并执行Show。

示例标记：

<script type="text/javascript">
$(document).ready(function() {

    $('#<%= tbValidFrom.ClientID %>').focus(function () {
       $find('ModalPopupExtenderNV2').show();
    });
});
</script>

<asp:TextBox ID="tbValidFrom" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelNV2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
    <ContentTemplate>
        <cc1:modalpopupextender id="ModalPopupExtenderNV2" runat="server" targetcontrolid="HiddenField6"
            popupcontrolid="PanelNewVersion" backgroundcssclass="modalBackground" behaviorid="ModalPopupExtenderNV2"
            enabled="True" />
        <asp:HiddenField ID="HiddenField6" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

<asp:Panel ID="PanelNewVersion" runat="server">
    testing panel
</asp:Panel>

Answer 3

看到这个标记，就会有两个问题出现的机会。

1. 和ModalPopupExtender一起。在那里你给了面板"PanelNewVersion“。好像它在标记中缺失了。
2. 在Javascript代码中。如果要隐藏该弹出窗口，请提供面板的名称。NOt ModalPopupextender的名称。

此外，您已经在页面中给出了一个更新面板，因此您可以轻松地在文本框的任何srever附带事件中处理modalpopup。

否则，如果要使用Modal弹出ijn客户端，请使用jQuery Modalpopup。这将是更好的选择。