AutoCompleteExtender Javascript Errors

Reply

dtsn

Member

1 Points

35 Posts

AutoCompleteExtender Javascript Errors

Jan 02, 2008 06:13 PM|dtsn|LINK

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

www.dtsn.co.uk

Reply

Jonathan She...

All-Star

24409 Points

3416 Posts

Re: AutoCompleteExtender Javascript Errors

Jan 06, 2008 07:41 AM|Jonathan Shen – MSFT|LINK

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

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework

Reply

dtsn

Member

1 Points

35 Posts

Re: AutoCompleteExtender Javascript Errors

Jan 06, 2008 09:52 AM|dtsn|LINK

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; }

www.dtsn.co.uk

Reply

Jonathan She...

All-Star

24409 Points

3416 Posts

Re: AutoCompleteExtender Javascript Errors

Jan 06, 2008 09:19 PM|Jonathan Shen – MSFT|LINK

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

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework