function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
RustyboyRustyboy 

Using jquery in a visualforce custom component

Hi,

I am having problems using the jquery autocomplete ui feature in a Visualforce custom component. I have a working prototype of the autocomplete which is in a VF page, but when I moved it into a custom component I get a message like this:

Uncaught TypeError: j$(...).autocomplete is not a function

I believe this error means that the jquery UI library has not been included, but in my case it has been. 

Any ideas why this might be? Here is the component code excerpt:
<apex:component controller="AttendeesController">
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
    <apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />

    <style>
        .displayNone { 
            display:none; 
        }
        .displayBlock {
            display:block;
        }
        .ui-autocomplete-loading { 
            background: white url(/img/loading32.gif) right center no-repeat;
            background-size:15px 15px; 
        }
        .placeHolder {
            font-style: italic;
        }    
    </style>
    
    <apex:attribute name="attrMeetingId"
                        assignTo="{!meetingId}"
                        description="The ID of the meeting (not required when meeting is new)"
                        type="Id"
                        required="false"/>

    <apex:attribute name="attrMeetingMode"
                        assignTo="{!meetingMode}"
                        description="The mode when using this component: New, View or Edit"
                        type="String"
                        required="true"/>
 
     <apex:attribute name="attrAttendees"
                        assignTo="{!attendees}"
                        description="Attendees returned to the calling page"
                        type="Attendee__c[]"
                        required="false"/>
                                           
	<apex:pageBlock mode="detail" title="{!attendeeTitle}">
        <apex:pageBlockSection id="searchSection" columns="1" >
           	<apex:outputPanel >
              	<apex:inputText id="attendeeTextBoxId" value="{!searchTerm}" styleClass="placeHolder"/>
               	<apex:inputHidden id="searchAttendeeId" value="{!selectedAttendee}" />
           	</apex:outputPanel>
        </apex:pageBlockSection>	
	</apex:pageBlock>

    <script type="text/javascript">
    	var j$ = jQuery.noConflict();

		j$(document).ready(function() {
    
	        var PLACEHOLDER = 'New Attendee Name'; 
	        var attendeeObjects;
	        var queryTerm;
	        
	        j$('[id$=attendeeTextBoxId]').autocomplete({
	            minLength: 2,
	            source: function(request, response) {
	                        queryTerm = request.term;
	                        Minutz.AutoCompleteController.searchAttendee(request.term, function(result, event){
	                            if(event.type == 'exception') {
	                                alert(event.message);
	                            } else {
	                                attendeeObjects = result;
	                                response(attendeeObjects);
	                            }
	                        });
	                   },
	            focus: function( event, ui ) {
	                    j$('[id$=attendeeTextBoxId]').val( ui.item.Name );
	                    return false;
	                    },
	            select: function( event, ui ) {
	                        j$('[id$=attendeeTextBoxId]').val( ui.item.Name );
	                        j$('[id$=searchAttendeeId]').val( ui.item.Id );
	                        return false;
	                    },
	         })
	         .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	            var entry = "<a>" + item.Name;
	            
	            entry = entry + "</a>";
	            entry = entry.replace(new RegExp(queryTerm,'gi'), "<b>" + queryTerm.toUpperCase() + "</b>");
	            return j$( "<li></li>" )
	                .data( "item.autocomplete", item )
	                .append( entry )
	                .appendTo( ul );
	        };
	            
	        // Add or remove placeholder values
	        j$('[id$=attendeeTextBoxId]').val(PLACEHOLDER);
	        j$('[id$=attendeeTextBoxId]').on("focus",  function(event){
	            j$tgt = j$(event.target);
	            if(j$tgt.val() === PLACEHOLDER ){
	                j$tgt.val('');
	                j$tgt.removeClass('placeHolder');
	            }
	        });		// END focus
	        
	        j$('[id$=attendeeTextBoxId]').on( "blur",  function(event){
	            j$tgt = j$(event.target);
	            if(j$tgt.val() === '' ){
	                j$tgt.val(PLACEHOLDER);
	                j$tgt.addClass('placeHolder');
	            }
	        });		// END blur
        
        });			// END Document Ready
        
    </script>
            
</apex:component>

Thanks in advance