查找对象时出现Javascript错误

Question

im stuck with Javascript in Asp.net... I made a TextBox named tbValidFrom and another named tbValidTo. I also made two ModalPopups. Then i try to open the ModalPopupExtenders when the TextBoxes get focus:

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

but it doesnt finds tbValidTo or ModalPopUpExtender ?

Runtime-Error in Microsoft JScript: Object expected

Here is one of the two ModalPopupExtenders and 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>

The same as above is with the other ModalPopupExtender and TextBox...

Help would be really nice. Thanks

Edit: Yes i use a masterpage!

Fails where it is marked yellow.

Answer 1

your jQuery syntax is wrong.

change your script to:

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

elements that has runat="server" will eventually end with a different ID than you entered in the aspx file.

i used the <%= %> to get the 'final' id.

hope that helps

Answer 2

ASP.NET Can modify the ID's of elements, if you use a Masterpage the element id's will be modified to something like the following : ctl001_ContentPlaceHolder1_tbValidFrom

To get around this ASP.NET modification of your elements you can use ASP.NET Inline Expressions to get the rendered ID from the object.

See the answer to the following question for more information on ASP.NET Inline Expressions

You can look at changing the Client ID Mode (The way ASP.NET Modifies IDs when the page is rendered) here :

ASP.NET Client ID Modes

EDIT :

The AjaxControlToolkit's ModalPopupExtender is not rendered on the page as a html element, therefore you cannot find this item using the ClientID of the ModalPopupExtender.

You must use the BehaviourID to call the show function on.

The below code should work correctly :

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

This will find the textbox object using the ASP.NET Inline expressions to find the client ID and will then find the behaviour ID and execute the Show method.

Example Markup :

<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

Seeing that markup there is two chances for the issues.

1. With the ModalPopupExtender. Where you have given the panel "PanelNewVersion" . Seems like its missing in the markup.

2. In the Javascript code. If you want to hide that Popup, give the name of the panel. NOt the name of the ModalPopupextender.

Also you have given an update panel there in page, so you can easily handle the modalpopup in any srever side event of your textbox.

Otherwise, if you want to use the Modal popup ijn client side, use jQuery Modalpopup. That will the better option.