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
BARBAR 

Custom component --- how to trigger the OnChange Event

I need to trigger the OnChange event for a custom component (a 'Time Picker') on a particular page where it's used in a table.   The onChange event needs to call a rooutine to update a boolean flag. I have tried using actionfunction on the page, actionsupport within the component, and also creating an optional 'OnChange' attribute in the component to hold the value of a Javascript function.

 

It's difficult to post code since I've tried so many different things. Here are some snippets of the current state:

 

Here is a portion of the page.  NOTE: The Start Date field (shown before the Start Time Time Picker field)  successfully calls the  changeUpdateFlag function.

 

 

 <apex:pageBlockSection columns="1" >
       <apex:pageBlockTable value="{!newClassList}" var="c" id="table">
             <apex:column headerValue="Start Date">
                  <apex:inputField value="{!c.StartDate}" onChange="changeUpdateFlag();" />
              </apex:column >   
              <apex:column headerValue="Start Time">
                  <c:TimePicker PickTimeField="Start Time" id="StartTime" value="{!c.StartTime__c}" onChange="changeUpdateFlag();"/>
               </apex:column>   
        </apex:pageBlockTable>
</apex:pageBlockSection>

<apex:actionFunction action="{!changeUpdateFlag}" name="changeUpdateFlag" rerender="theForm"/>

 

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="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:attribute name="onChange" description="" type="string" required="false" ></apex:attribute>
         
    <apex:inputtext styleClass="myDate" value="{!value}" style="width:60px;font-family:Arial; font-size:.8m" onChange="{!onChange}" />
    
    <script type="text/javascript">
      
        $(document).ready(function() {
            $('.myDate').ptTimeSelect();
      });
     </script>
    
   </apex:component>

 

And here is the associated code in the page controller:

 

 

    public PageReference changeUpdateFlag() {
        bUpdated = true;
        return null;
        }

 

Any ideas on how to make this work for the component?

 

 

imuinoimuino

What i think was to put your component inside an output panel which has some javascript event you can use, then if you also add an actionfunction you can call it on the panel event. This will execute the function on the change. Here is the documentation for apex:outputPanel

http://www.salesforce.com/us/developer/docs/pages/index.htm there in standard component reference you can find all apex components documentation including outputpanel

BARJRDBARJRD

I've been playing around with this and found a way that WILL work for other events (I tried onClick and onBlur).  Because this is a jquery component, could it be that the onChange event is not triggered on my page?

stephanstephan

I suspect that the issue here is that onchange is only fired when the user changes the value in a text box. If it's done via JavaScript, which the jquery plugin would do, then onchange won't fire. This is how onchange works, so isn't an issue with Visualforce, jquery, or the plugin itself.

 

It looks like the plugin supports an onClose handler, however. You might try hooking into that.

 

...stephan

BARBAR

Thanks, Stephan.  Checking the OnClose handler is a good idea. There is also a OnBeforeShow event.   I know very little about Javascript and much less about JQuery --- but what I basically want to accomplish is to:

 

1) capture the value in the time field BEFORE the Time Picker widget is displayed

2) capture the value in the time field AFTER the TimePicker is closed

3) compare the 2 values -- if they do not match, display a Save pushbutton to indicate that at least one record in a displayed list has been changed --- possibly by setting some kind of flag that the page can access.

 

The Jquery Time Picker is resides in an Apex component.  The code I have so far is:

 

<apex:component controller="ConTimePicker" >
    <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="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 styleClass="myDate" value="{!value}" style="width:60px;font-family:Arial; font-size:.8m" /> 

    <script type="text/javascript">
        
        $(document).ready(function() {
            $('.myDate').ptTimeSelect({
                onBeforeShow: function() {
                    var beforeValue = this.id;
                },                
                onClose: function() {
                    var afterValue = this.id;
                    if (afterValue != beforeValue) {
                        alert('need to display Save button or set a flag, etc.');
                    }
                }
           })
                 
         }); 
     </script>

   </apex:component>

 

 

 Currently, the Time Picker will display the FIRST time a time field is clicked on the page.  If I click on the time field in another record, the widget does NOT display.  This behavior started occurring when I added the OnBeforeShow and OnClose handlers.  Again, I am a real newbie at Javascript so I have a feeling that I have some syntax issues.  Not sure when to use the darn $ sign :smileyhappy:

 

Thanks so much!

Barb

stephanstephan

It sounds like there could be a number of problems, but it's hard to say what at a quick glance. A couple of suggestions:

 

1) Try using Firefox with the Firebug extension installed. It will make it easier for you to debug and diagnose any issues.

2) Read up on JavaScript and Jquery. If you're really in over your head, consider whether you really need a time picker in this case. Perhaps a simple select list with a choice of times might be easier?

 

Good luck!

 

...stephan

BARBAR

I've installed Firebug --- thanks for the suggestion.  As for the TimePicker --- it works fine except for the onChange issue. 

 

And I just bought a Javascript book.....

 

Thanks!

Barb