locked
AutoCompleteExtender Javascript Errors RRS feed

  • Question

  • User-214520727 posted

    Hi,

    I have a AutoCompleteExtender on my page which is made up of a nested masterpage. The Autocomplete works great however i can't seem to be able to apply styles to the CompletionListItemCssClass and the CompletionListHighlightedItemCssClass when i do i get a horrible javascript error. The CompletionListCssClass works great, it's just the other two i am having problems with, and only when you hover over the second item in the list.

    For a bit more detail the error i am receiving is [Exception... "'Sys.ArgumentNullException: Sys.ArgumentNullException: Value cannot be null. Parameter name: className' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "<unknown>" data: no]. Also the CSS classes are being applied, i just get the error message which is a bit annoying.

    Why have the AJAX Control Toolkit people decided to apply a separate style to each of them instead of just using css selectors e.g. ul > li > li a > li a:hover? This would load a lot faster and wouldn't need to the javascript to swap the css classes around.

     

                <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                    TargetControlID="to"
                    ServiceMethod="GetCompletionList"
                    ServicePath="autoComplete.asmx"
                    MinimumPrefixLength="3"
                    EnableCaching="true"
                    CompletionListCssClass="autocomplete"
                    CompletionSetCount="10"

                   CompletionListItemCssClass="item"
                >
                </cc1:AutoCompleteExtender>

    Thanks

    Daniel

     

     

    Wednesday, January 2, 2008 6:13 PM

Answers

  • User583989486 posted

    Hi Dtsn,

    CompletionListHighlightedItemCssClass property should be assigned, also please do not add .form prefix to autocomplete and item, or it won't affect your AutoCompleteExtender in your situation. For example,

            .autocomplete { margin:0px; padding:0px; background-color:#FFFFFF; list-style:none; padding: 5px 0px; z-index:99; }
            .item { height: 17px; padding: 3px 5px 0px 5px; cursor:pointer; }
            .itemHighLight{   color:White; background-color:#006699;cursor:pointer; }

            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                    TargetControlID="to"
                    ServiceMethod="GetCompletionList"
                    ServicePath="~/AutoComplete/AutoComplete.asmx"
                    MinimumPrefixLength="3"
                    EnableCaching="true"
                    CompletionListCssClass="autocomplete"
                    CompletionSetCount="10"
                    CompletionListItemCssClass="item" CompletionListHighlightedItemCssClass="itemHighLight" >
                </cc1:AutoCompleteExtender>

    Best regards,

    Jonathan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 6, 2008 9:19 PM

All replies

  • User583989486 posted

    Hi Daniel,

    Based on your description, I think that all the datas are returned to client correctly.So we shall first exclude the css aspect.  Here is a workable sample.  Please compare it with yours.

     

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <style>
            .AutoExtender
            {
                font-family: Verdana, Helvetica, sans-serif; 
                font-size: .8em;
    
                font-weight: normal; 
                border:solid 1px #006699;
    
                line-height:20px; 
                padding:2px;
                background-color:White; 
            }
    
            .AutoExtenderList
            {
                border-bottom:dotted 1px #006699; 
                cursor:pointer;
                color:Maroon
            }
    
            .AutoExtenderHighlight
            {
                color:White; 
                background-color:#006699;
                cursor:pointer; 
            }
    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:TextBox ID="TBSearch" runat="server"></asp:TextBox>
            <asp:Panel runat="server" ID="myPanel" Height="100px" ScrollBars="Vertical" style="overflow:hidden;width:50px;text-overflow:ellipsis">
            </asp:Panel>
            <ajaxToolkit:AutoCompleteExtender runat="server"  ID="autoComplete1" BehaviorID="myACEBID" TargetControlID="TBSearch"
                ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" 
                CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" 
                CompletionListHighlightedItemCssClass="AutoExtenderHighlight" CompletionInterval="1" 
                EnableCaching="true" CompletionSetCount="12" CompletionListElementID="myPanel" 
                OnClientItemSelected="AutoCompleteExtender2_ItemSelected">       
        </form>
    </body>
    </html>
    If it doesn't work, would you please give us more information.  A workable and tiny repro would be appreciated.
    Best regards,
    Jonathan
    Sunday, January 6, 2008 7:41 AM
  • User-214520727 posted

    Hi,

    Thanks for the reply, I still can't seem to find the problem though. Heres some more code:

     

    <asp:Content ID="Content1" ContentPlaceHolderID="community" Runat="Server">
    
        <script language="javascript" type="text/javascript" src="/public/scripts/tiny_mce/tiny_mce.js"></script>
        <script language="javascript" type="text/javascript">tinyMCE.init(
        {
        	mode : "textareas",
    	    theme : "advanced",
    	    encoding : "xml",
    	    theme_advanced_buttons1 : "bold,italic,underline, formatselect, separator,justifyleft,justifycenter,justifyright, separator, bullist,numlist,image,undo,redo,link,separator,cut,copy,paste,separator,code",
    	    theme_advanced_buttons2 : "",
    	    theme_advanced_buttons3 : "",
    	    theme_advanced_toolbar_location : "top",
    	    theme_advanced_toolbar_align : "left",
    	    theme_advanced_blockformats : "h1, h2",
    	    theme_advanced_path_location : "bottom",
    	    relative_urls: false,
    	    convert_urls: false,
    	    content_css : "/public/css/tiny.css"
        });
        </script>
        
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="autoComplete.asmx" />
            </Services>
        </asp:ScriptManager>
        
    
        <div class="form">
            <p>
                <label for="To">To:</label>
                <asp:TextBox ID="to" runat="server" autocomplete="off" ></asp:TextBox>
                <asp:RequiredFieldValidator ID="toVal" runat="server" 
                    CssClass="error" 
                    ControlToValidate="to" 
                    ValidationGroup="a" >
                </asp:RequiredFieldValidator>
                <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                    TargetControlID="to"
                    ServiceMethod="GetCompletionList"
                    ServicePath="autoComplete.asmx"
                    MinimumPrefixLength="3"
                    EnableCaching="true"
                    CompletionListCssClass="autocomplete"
                    CompletionSetCount="10"
                    CompletionListItemCssClass="item"
                >
                </cc1:AutoCompleteExtender>
            </p>
            <p>
                <label for="Subject">Subject:</label>
                <asp:TextBox ID="subject" runat="server" ></asp:TextBox>
            </p>
            <p>
                <label for="Message">Message:</label>
                <asp:TextBox ID="body" runat="server" TextMode="MultiLine" Width="565px" Height="300px"></asp:TextBox>
            </p>
                
             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div class="buttons">
                        <asp:Button ID="cancel" runat="server" Text="Cancel" onclick="cancel_Click" />
                        <asp:Button ID="send" runat="server" Text="Send" ValidationGroup="a" onclick="send_Click" />
                    </div>
                
                    <asp:Panel ID="popup" runat="server" CssClass="popup" style="display:none;">
                        <div class="top"></div>
                        <div class="content">
                            <h2><asp:Label ID="popupTitle" runat="server"></asp:Label></h2>
                            <p><asp:Label ID="popupMessage" runat="server"></asp:Label></p>
                            <asp:LinkButton ID="popupClose" runat="server">Close</asp:LinkButton>
                        </div>
                        <div class="bottom"></div>
                    </asp:Panel>
                
                    <div ID="dummy" runat="server"></div>
                    
                    <cc1:ModalPopupExtender ID="MPE" runat="server"
                        BackgroundCssClass="popup_background"
                        PopupControlID="popup"
                        CancelControlID="popupClose"
                        TargetControlID="dummy" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        
    </asp:Content>
    .form {}
    .form p { margin: 0px; padding:5px 0px 5px 0px; clear:both; }
    .form > p:first-child { padding: 0px 0px 5px 0px; }
    .form label { width: 100px; float:left; }
    .form input[type="text"] { float:left; width: 200px; }
    .form .error { float:left; background: url('/public/images/icons/error.gif') no-repeat 5px 3px; width: 20px; height: 20px; }
    .form .buttons { clear:both; margin-top:10px; float:right; }
    .form .autocomplete { margin:0px; padding:0px; background-color:#FFFFFF; list-style:none; padding: 5px 0px; z-index:99; }
    .form .item { height: 17px; padding: 3px 5px 0px 5px; cursor:pointer; }
     
    Sunday, January 6, 2008 9:52 AM
  • User583989486 posted

    Hi Dtsn,

    CompletionListHighlightedItemCssClass property should be assigned, also please do not add .form prefix to autocomplete and item, or it won't affect your AutoCompleteExtender in your situation. For example,

            .autocomplete { margin:0px; padding:0px; background-color:#FFFFFF; list-style:none; padding: 5px 0px; z-index:99; }
            .item { height: 17px; padding: 3px 5px 0px 5px; cursor:pointer; }
            .itemHighLight{   color:White; background-color:#006699;cursor:pointer; }

            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                    TargetControlID="to"
                    ServiceMethod="GetCompletionList"
                    ServicePath="~/AutoComplete/AutoComplete.asmx"
                    MinimumPrefixLength="3"
                    EnableCaching="true"
                    CompletionListCssClass="autocomplete"
                    CompletionSetCount="10"
                    CompletionListItemCssClass="item" CompletionListHighlightedItemCssClass="itemHighLight" >
                </cc1:AutoCompleteExtender>

    Best regards,

    Jonathan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 6, 2008 9:19 PM
  • User825680457 posted

     You need to specify BOTH a CompletionListItemCssClass AND a CompletionListHighlightedItemCssClass

    Tuesday, March 24, 2009 1:39 PM
  • User470389773 posted

    thanks for this suggestion

    Thursday, January 9, 2014 12:25 AM