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 

jQuery and multiple components

I have a problem that is probably simple for anyone who knows jQuery (not me obviously):

I have created a TimePicker component that works really well on it's own, but I need to use the component multiple times on the same VF page, but with slightly different outcomes. The jQuery selector in my component refers to anything with the gven (selectedTime) which means that the last component on the page overwrites any previous component details

Here is my component
<apex:component controller="TimePickerController">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.css')}"/>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.js')}"></script>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.js')}"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.css')}"/>

    <script>
        function setFocusOnLoad() {}

	    j$= jQuery.noConflict();
		    j$(function(){
		    	j$("[id$='selectedTime']").timepicker({ 						
		    		"timeFormat": "{!timeFormat}",
    		   		"minTime": "{!minTime}",
    		   		"maxTime": "{!maxTime}",
    		   		"step": "{!step}",
    	   		});
    		});		
    </script>

	<apex:attribute name="attrTimePickerData"
	    				assignTo="{!theData}"
	    				description=""
	                    type="TimePickerData"/>

	<apex:outputPanel >		 
		<apex:inputText value="{!theData.selectedTimeStr}" id="selectedTime" style="width:75px; "/>
	</apex:outputPanel>
			
</apex:component>

Here are the component calls in my VF page, each with a different ID
<apex:outputPanel >
	<c:TimePicker id="MeetingStartTime" attrTimePickerData="{!timePickerDataTime}"/>
</apex:outputPanel>

<apex:outputPanel >
	<c:TimePicker id="MeetingDuration" attrTimePickerData="{!timePickerDataDuration}"/>
</apex:outputPanel>

Obviously the jQuery selector is just changing all instances of "selectedTime". How do I change the selector to include the id of the component? Or is there a better way of achieving this?

Thanks in advance

Best Answer chosen by Rustyboy
Nayana KNayana K
<apex:component controller="TimePickerController">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.css')}"/>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.js')}"></script>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.js')}"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.css')}"/>
	<apex:attribute name="domClass" description="This is the styleClass for the component."
        type="String" required="true"/>
    <script>
        function setFocusOnLoad() {}

	    j$= jQuery.noConflict();
		    j$(function(){
		    	j$(".{!domClass}").timepicker({ 						
		    		"timeFormat": "{!timeFormat}",
    		   		"minTime": "{!minTime}",
    		   		"maxTime": "{!maxTime}",
    		   		"step": "{!step}",
    	   		});
    		});		
    </script>

	<apex:attribute name="attrTimePickerData"
	    				assignTo="{!theData}"
	    				description=""
	                    type="TimePickerData"/>

	<apex:outputPanel >		 
		<apex:inputText value="{!theData.selectedTimeStr}" id="selectedTime" style="width:75px; " styleClass="{!domClass}"/>
	</apex:outputPanel>
			
</apex:component>

Added and extra attribute called domClass
 
<apex:outputPanel >
	<c:TimePicker domClass="MeetingStartTime" attrTimePickerData="{!timePickerDataTime}"/>
</apex:outputPanel>

<apex:outputPanel >
	<c:TimePicker domClass="MeetingDuration" attrTimePickerData="{!timePickerDataDuration}"/>
</apex:outputPanel>

Now, it should work fine. ​

All Answers

Nayana KNayana K
<apex:component controller="TimePickerController">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.css')}"/>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.js')}"></script>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.js')}"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.css')}"/>
	<apex:attribute name="domClass" description="This is the styleClass for the component."
        type="String" required="true"/>
    <script>
        function setFocusOnLoad() {}

	    j$= jQuery.noConflict();
		    j$(function(){
		    	j$(".{!domClass}").timepicker({ 						
		    		"timeFormat": "{!timeFormat}",
    		   		"minTime": "{!minTime}",
    		   		"maxTime": "{!maxTime}",
    		   		"step": "{!step}",
    	   		});
    		});		
    </script>

	<apex:attribute name="attrTimePickerData"
	    				assignTo="{!theData}"
	    				description=""
	                    type="TimePickerData"/>

	<apex:outputPanel >		 
		<apex:inputText value="{!theData.selectedTimeStr}" id="selectedTime" style="width:75px; " styleClass="{!domClass}"/>
	</apex:outputPanel>
			
</apex:component>

Added and extra attribute called domClass
 
<apex:outputPanel >
	<c:TimePicker domClass="MeetingStartTime" attrTimePickerData="{!timePickerDataTime}"/>
</apex:outputPanel>

<apex:outputPanel >
	<c:TimePicker domClass="MeetingDuration" attrTimePickerData="{!timePickerDataDuration}"/>
</apex:outputPanel>

Now, it should work fine. ​
This was selected as the best answer
RustyboyRustyboy
This works a charm, much appreciated