+ Start a Discussion
BARBAR 

JQuery TimePicker component --- can't save value

I am referencing a "time picker" JQuery script in a custom component.  The component works fine except it will not save the time value to my sObject (Campaign)

 

I have tried using page controllers, component controllers, etc. and have just not been able to resolve this problem.  Thanks.

 

Here is the component:

<apex:component >
    <script src="{!URLFOR($Resource.JQuery)}" type="text/javascript" ></script>
    <script src="{!URLFOR($Resource.TimePicker,'/src/jquery.ptTimeSelect.js')}" type="text/javascript" ></script>
    <apex:stylesheet value="{!URLFOR($Resource.TimePicker,'/src/jquery.ptTimeSelect.css')}" ></apex:stylesheet>
    <apex:stylesheet value="{!URLFOR($Resource.TimePicker,'/example/ui.core.css')}" ></apex:stylesheet>
    <apex:stylesheet value="{!URLFOR($Resource.TimePicker,'/example/ui.theme.css')}" ></apex:stylesheet>
    <apex:stylesheet value="{!URLFOR($Resource.TimePicker,'/doc/styles/main.css')}" ></apex:stylesheet>
    <apex:stylesheet value="{!URLFOR($Resource.TimePicker,'/example/css/timecntr/jquery-ui-1.7.1.custom.css')}" ></apex:stylesheet>
    <!-- <apex:attribute name="pageController" assignTo="{!pageController}" description="The controller for the page." type="PageControllerBase" required="true"/>
    !-->
    <apex:attribute name="PickTimeField" description="Time field" type="string" required="true"></apex:attribute>
    <apex:attribute name="PickTimeLabel" description="Time Label" type="string" required="false"></apex:attribute>
    <apex:attribute name="value" description="" type="string" required="false" ></apex:attribute>

    <!--<apex:inputText id="PickTimeField" value="{!value}"/>
       NOTE:  <apex:inputText will not work because it will not allow you to use a variable id (i.e., it must be hard-coded ---  	unless the API version is changed to 15.0 - and then I received other errors.  Using the HTML tag <Input DOES allow you to 
       use a variable id (e.g., id="{!PickTimeField}")
    !-->
    
      <input id="{!PickTimeField}" value="{!value}" style="width:60px;font-family:Arial; font-size:.8m" />
      <script type="text/javascript">
      
        $(document).ready(function() {
            $('#{!PickTimeField}').ptTimeSelect();
      });
     </script>
   </apex:component>

 

Here is the VF page:

<apex:page standardController="Campaign" >
    <apex:form  >
       <apex:outputPanel id="time">>
           <c:TimePicker PickTimeField="EndTime"  value="{!Campaign.endTime__c}"  />
       </apex:outputPanel>
       <apex:commandButton value="Save" action="{!save}" rerender="time"/>
    </apex:form>
</apex:page>

 

 

Best Answer chosen by Admin (Salesforce Developers) 
WesNolte__cWesNolte__c

I was wondering why you're using a dynamic Id? Note that you can also use styleClass name to attach jQuery plugins to page elements..

 

Wes

All Answers

WesNolte__cWesNolte__c

Hey

 

You're using the HTML input element and Salesforce won't push the input value to the controller because it isn't aware of it. You'll need to use the <apex:inputext> element I'm afraid. Why does the id need to be dynamic? This will work,

 

<apex:inputtext id="myDate" value="{!value}" style="width:60px;font-family:Arial; font-size:.8m" />
      <script type="text/javascript">
      
        $(document).ready(function() {
            $('#{!$Component.myDate}').ptTimeSelect();
      });
     </script>

Note you can also use styleClass, and that way you can quite easily include more than one datepicker in your page e.g.

 

<apex:inputtext styleClass="myDate" value="{!value}" style="width:60px;font-family:Arial; font-size:.8m" />
      <script type="text/javascript">
      
        $(document).ready(function() {
            $('.myDate').ptTimeSelect();
      });
     </script>
Cheers, Wes
BARBAR

Thanks, Wes...I used your code --- but when I click on the field now, the time picker does not display.  This is the problem I had that I noted in comments in the component --- i.e. "NOTE:  <apex:inputText will not work because it will not allow you to use a variable id (e.g., id="{!PickTimeField}")

 

Any other thoughts?

 

Thanks,

Barb

WesNolte__cWesNolte__c

I was wondering why you're using a dynamic Id? Note that you can also use styleClass name to attach jQuery plugins to page elements..

 

Wes

This was selected as the best answer
BARBAR

Wes...You are AWESOME!!!  Thanks!   Barb

maxoutmaxout

Hi, I tryed this 2 selector in another test component, but got some other problem. The selectors actually are rendered into things like:

$('#{!$Component.myDate}').  -------$("#j_id0:j_id2:j_id3:myDate")

$('.myDate').--------$(".myDate")

which are straight.

 

But using [styleclass] will result in operation of multi objects according to jquery when using more  components in a page. the content of my test component is rendered multi types in the same result.

 

Then, [id] can locate the component itself, which makes multi components in a page possible.  However, the content of my test component is rendered only once at the top of the page outside the component area with the result of the first component.

 

Wondering if the content(<div>) is relocated by some unexpected CSS  or not.

WesNolte__cWesNolte__c

Maxout, 

 

There are some alternatives to select components by ID specifically:

 

http://th3silverlining.com/2010/02/17/visualforce-ids-in-jquery-selectors/

 

Wes

maxoutmaxout

Thanks. I found the reason too. Then when I tryed to find the solution, I found some other related posts.

 

In my case, these 2 selector will have different layout rendered, resulting from wrong jquery selction.

$(".bcArea")                                        3 barcode each component but with same value of the first one "max9876543";

$("#{!$Component.bcTarget}")      1 barcode at the top of page outside of component area with "max9876543"

 

These 2 cases both have unrelated results.

 

This should be put into a compatibility section in the developer guide, I recken.