Apex Code Development You need to sign in to do that
Don't have an account?
Rustyboy 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
Here are the component calls in my VF page, each with a different ID
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
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
<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
<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.