Apex Code Development You need to sign in to do that
Don't have an account?
uptime_andrew jQuery with InputField Change
I am trying to use the jQuery library for some visual effects for an Opportunity screen.
Currently, the below works fine for the view screen, where the div with id "size_details" will show/hide based on the mouse clicks for the href tag.
<apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-1.4.4.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-ui-1.8.10.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jquery, '/css/ui-lightness/jquery-ui-1.8.10.custom.css')}" />
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#pnl_details").hide();
$('#viewSizeDetails').click(function () {
if ($("#size_details").is(":hidden")) {
$("#size_details").slideDown("slow");
$("#viewSizeDetails").html("Hide Scope and Size Details");
return false;
} else {
$("#size_details").hide("slow");
$("#viewSizeDetails").html("Show Scope and Size Details");
return false;
}
});
$('#viewGapDetails').click(function () {
if ($("#gap_details").is(":hidden")) {
$("#gap_details").slideDown("slow");
$("#viewGapDetails").html("Hide Gap Details");
return false;
} else {
$("#gap_details").hide("slow");
$("#viewGapDetails").html("Show Gap Details");
return false;
}
});
$('#scopeSizeCheckbox').click(function () {
if ($("#size_details").is(":hidden")) {
$("#size_details").slideDown("slow");
$("#viewSizeDetails").html("Hide Gap Details");
return false;
} else {
$("#size_details").hide("slow");
$("#viewSizeDetails").html("Show Gap Details");
return false;
}
});
});
</script>
<apex:pageBlockSection title="Do we know the scope and size?" columns="2" collapsible="false">
<apex:pageBlockSectionItem labelStyleClass="oppCheckboxLabel" dataStyleClass="oppCheckbox" >
<apex:outputLabel value="True?" />
<apex:outputField value="{!opportunity.Do_we_know_the_scope_and_size__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem labelStyleClass="oppInfoLabel"
dataStyleClass="oppInfoBox">
<apex:outputLabel value="Info" for="primary4Info"/>
<apex:outputField id="primary4Info"
value="{!opportunity.Do_we_know_the_scope_and_size_info__c}"
styleClass="oppInfoTextArea" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<p style="padding-left:35px; display:{!if(opportunity.Do_we_know_the_scope_and_size__c==True,'block','none')}"><a id="viewSizeDetails" href="#">Show Scope and Size Details</a></p>
<!--Use a Standard Div not an apex outputpanel simplifies selection process for jQuery no need for !$Component to get the element id-->
<div id="size_details" style='padding-left:35px; display:none'>
<c:oppSizeInfoView opportunity="{!opportunity}" rendered="{!if(opportunity.Do_we_know_the_scope_and_size__c==True,True,False)}" />
</div>
However, now I want to get the same effect (showing/hiding the div) when the input Field is changed on the Edit Screen:
<apex:pageBlockSection title="Do we know the scope and size?" columns="2" collapsible="false">
<apex:pageBlockSectionItem id="scopeSizeCheckbox" labelStyleClass="oppCheckboxLabel" dataStyleClass="oppCheckbox" >
<apex:outputLabel value="True?" />
<apex:inputField value="{!opportunity.Do_we_know_the_scope_and_size__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem labelStyleClass="oppInfoLabel"
dataStyleClass="oppInfoBox">
<apex:outputLabel value="Info" for="primary4Info"/>
<apex:inputField id="primary4Info"
value="{!opportunity.Do_we_know_the_scope_and_size_info__c}"
styleClass="oppInfoTextArea" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<!--Use a Standard Div not an apex outputpanel simplifies selection process for jQuery no need for !$Component to get the element id-->
<div id="size_details" style="padding-left:35px; display:{!if(opportunity.Do_we_know_the_scope_and_size__c==True,'block','none')}">
<c:oppSizeInfo opportunity="{!opportunity}" />
</div>
The change is not detected for the inputField, because the HTML created from the page does not use that as the actual id of the checkbox field.
Has anyone integrated jquery with onChange events for input Fields?
Nevermind, got it...
function showSizeScope(){ if ($j("#size_details").is(":hidden")) { $j("#size_details").slideDown("slow"); $j("#viewSizeDetails").html("Hide Gap Details"); return false; } else { $j("#size_details").hide("slow"); $j("#viewSizeDetails").html("Show Gap Details"); return false; } }<apex:inputField onChange="return showSizeScope()" value="{!opportunity.Do_we_know_the_scope_and_size__c}" />All Answers
Nevermind, got it...
function showSizeScope(){ if ($j("#size_details").is(":hidden")) { $j("#size_details").slideDown("slow"); $j("#viewSizeDetails").html("Hide Gap Details"); return false; } else { $j("#size_details").hide("slow"); $j("#viewSizeDetails").html("Show Gap Details"); return false; } }<apex:inputField onChange="return showSizeScope()" value="{!opportunity.Do_we_know_the_scope_and_size__c}" />FYI you don't need the return statements anywhere.