You need to sign in to do that
Don't have an account?
BAR
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>
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
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,
Note you can also use styleClass, and that way you can quite easily include more than one datepicker in your page e.g.
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
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
Wes...You are AWESOME!!! Thanks! Barb
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.
Maxout,
There are some alternatives to select components by ID specifically:
http://th3silverlining.com/2010/02/17/visualforce-ids-in-jquery-selectors/
Wes
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.