Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
md1md1 

Condtionally re-rendering a page section

I'm using actionSupport to re-render a pageBlockTable. The problem is that it does a rerender everytime the event (onchange or onblur) occur. Is there anyway to rerender the section conditionally? For example, I wouldn't want it to rerender if the field on which the actionSupport is added to is blank.

 

 

<apex:column style="white-space : nowrap;">
	<apex:facet name="header">Account</apex:facet>
	<apex:inputtext id="account" value="{!element.accName}" size="22">
		<apex:actionSupport event="onblur" action="{!element.setAcc}" rerender="{!$Component.transferTable},pageMessages"/>
	</apex:inputtext></apex:column>
 
Thanks in advance,
-Manu 
 
 
Message Edited by md1 on  12-01-2010 02:43 PM


Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard
Here's an example culled from one of my projects.  I've got a start and end date and time the user fills in.  When both start date and time or end date and time are filled in, I want to retrieve available resources from the controller. 
 
The action function:
 
 
<apex:actionFunction name="changeTimeSpan" status="AjaxStatus"
		action="{!changeTimeSpan}" rerender="new_date, pageMessages" />
 
 An example input (its a text, but inputfield should work too):
 
 
<apex:inputText id="end_cal" size="10" value="{!endDate}" onchange="changeTimeSpanIfAllPresent(0)" onmouseover="initialiseCalendar(this, '{!$Component.end_cal}')"/>

 
And the JavaScript function:
 
 
	   function changeTimeSpanIfAllPresent(start)
	   {
	      // invoke the changetimespan method, but only if there are values for start date/time and
	      // end date/time

          //alert('Checking timespan elements');	      
	      var start_date=document.getElementById('{!$Component.de_form.de_block.de_section.de_start_date_item.start_cal}').value;
          //alert('Start date = ' + start_date);	      
          var start_time=document.getElementById('{!$Component.de_form.de_block.de_section.de_start_item.start_time}').value;
          //alert('Start time = ' + start_time);	      
	      var end_date=document.getElementById('{!$Component.de_form.de_block.de_section.de_end_date_item.end_cal}').value;
          //alert('End date = ' + end_date);	      
          var end_time=document.getElementById('{!$Component.de_form.de_block.de_section.de_end_item.end_time}').value;
          // alert('End time = ' + end_time);	      
          
          if (start)
          {
              if ( (start_date.length>0) && (start_time.length>0) )
              {
                 changeTimeSpan();
              }
          }
          else
          {
              if ( (end_date.length>0) && (end_time.length>0) )
              {
                 changeTimeSpan();
              }
          }
       }

 
 
 
 
 
 
 
 


All Answers
bob_buzzardbob_buzzard
I can't see that you can achieve this using ActionSupport, as that is simply firing a request whenever an event occurs.
 
I've done something similar using the onchange attribute of the inputfield to invoke some JavaScript that inspects the value of the input.  If the value matches a condition, I then use an ActionFunction to carry out the request to the controller and subsequent rerender.


md1md1
Bob to the rescue again :) !! Really appreciate if you could share an example of how you've done it.
 
Thanks,
-Manu 


bob_buzzardbob_buzzard
Here's an example culled from one of my projects.  I've got a start and end date and time the user fills in.  When both start date and time or end date and time are filled in, I want to retrieve available resources from the controller. 
 
The action function:
 
 
<apex:actionFunction name="changeTimeSpan" status="AjaxStatus"
		action="{!changeTimeSpan}" rerender="new_date, pageMessages" />
 
 An example input (its a text, but inputfield should work too):
 
 
<apex:inputText id="end_cal" size="10" value="{!endDate}" onchange="changeTimeSpanIfAllPresent(0)" onmouseover="initialiseCalendar(this, '{!$Component.end_cal}')"/>

 
And the JavaScript function:
 
 
	   function changeTimeSpanIfAllPresent(start)
	   {
	      // invoke the changetimespan method, but only if there are values for start date/time and
	      // end date/time

          //alert('Checking timespan elements');	      
	      var start_date=document.getElementById('{!$Component.de_form.de_block.de_section.de_start_date_item.start_cal}').value;
          //alert('Start date = ' + start_date);	      
          var start_time=document.getElementById('{!$Component.de_form.de_block.de_section.de_start_item.start_time}').value;
          //alert('Start time = ' + start_time);	      
	      var end_date=document.getElementById('{!$Component.de_form.de_block.de_section.de_end_date_item.end_cal}').value;
          //alert('End date = ' + end_date);	      
          var end_time=document.getElementById('{!$Component.de_form.de_block.de_section.de_end_item.end_time}').value;
          // alert('End time = ' + end_time);	      
          
          if (start)
          {
              if ( (start_date.length>0) && (start_time.length>0) )
              {
                 changeTimeSpan();
              }
          }
          else
          {
              if ( (end_date.length>0) && (end_time.length>0) )
              {
                 changeTimeSpan();
              }
          }
       }

 
 
 
 
 
 
 
 
This was selected as the best answer
md1md1
Thanks, Bob! You saved another day for me... and I'm hoping a number of others who might be wondering about these problems!
 
Cheers,
-Manu 


sunny.dale5sunny.dale5
I am so entralled with the information given here! I will use the information given here inorder to enhance my craft..