You need to sign in to do that
Don't have an account?
PS81
Visualforce - Jquery initialise
Hi
I'm using Jquery to handle the checkbox event to enable and disable the fields in visualforce page. Now i want to disable the fields by default when the edit page is loaded. how can i acheive this by using jquery?
my code is below:
<apex:page standardController="Product2" tabStyle="Product2" extensions="ProductSave" >
<apex:sectionHeader title="Product Edit" subtitle="{!Product2.name}"/>
<font style="font-family: Arial; font-size: 10pt;">Enter product details. Mark products as Active if you want them to be added to price books, opportunities, or quotes. </font> <br/><br/>
<apex:includescript value="{!URLFOR($Resource.jquery, 'js/jquery-1.11.3.js')}" />
<script>
initialize();
</script>
<script>
function initialize(){
alert("r");
}
function handlefld(input, textid){
if (!input.checked){
jQuery( 'input[id$=prodjan_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodfeb_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodmar_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodapr_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodmay_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodjun_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodjul_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodaug_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodsep_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodoct_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodnov_c]' ).prop('disabled', true);
jQuery( 'input[id$=proddec_c]' ).prop('disabled', true);
}
else{
jQuery( 'input[id$=prodjan_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodfeb_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodmar_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodapr_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodmay_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodjun_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodjul_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodaug_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodsep_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodoct_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodnov_c]' ).prop('disabled', false);
jQuery( 'input[id$=proddec_c]' ).prop('disabled', false);
}
}
</script>
<apex:form >
<body>
<apex:pageBlock title="Product Edit" mode="edit" >
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save" />
<apex:commandButton action="{!Cancel}" value="Cancel"/>
</apex:pageBlockButtons>
<apex:pageblocksection title="Product Information" columns="2">
<apex:inputfield value="{!Product2.name}" id="prodname"/>
<apex:inputfield value="{!Product2.Family}" id="prodfamily"/>
<apex:inputfield value="{!Product2.ProductCode}" id="prodcode"/>
<apex:inputfield value="{!Product2.IsActive}" id="prodisactive"/>
<apex:inputfield value="{!Product2.Opportunity__c}" id="prodoppr" onclick="select()"/>
<apex:outputText > </apex:outputText>
<apex:inputfield value="{!Product2.Description}" id="proddescr" style="width:500px ; height:100px" />
</apex:pageblocksection>
<apex:pageblocksection title="Weightage" columns="4">
<input id="edit" type="checkbox" onclick="handlefld(this,'{!$Component.prodfeb_c}');"/>
<label for="edit">Edit ?</label>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:inputfield value="{!Product2.January__c}" id="prodjan_c"/>
<apex:inputfield value="{!Product2.February__c}" id="prodfeb_c"/>
<apex:inputfield value="{!Product2.March__c}" id="prodmar_c"/>
<apex:inputfield value="{!Product2.April__c}" id="prodapr_c"/>
<apex:inputfield value="{!Product2.May__c}" id="prodmay_c"/>
<apex:inputfield value="{!Product2.June__c}" id="prodjun_c"/>
<apex:inputfield value="{!Product2.July__c}" id="prodjul_c"/>
<apex:inputfield value="{!Product2.August__c}" id="prodaug_c"/>
<apex:inputfield value="{!Product2.September__c}" id="prodsep_c"/>
<apex:inputfield value="{!Product2.October__c}" id="prodoct_c"/>
<apex:inputfield value="{!Product2.November__c}" id="prodnov_c"/>
<apex:inputfield value="{!Product2.December__c}" id="proddec_c"/>
<apex:outputText > </apex:outputText>
</apex:pageblocksection>
</apex:pageBlock>
</body>
</apex:form>
</apex:page>
I'm using Jquery to handle the checkbox event to enable and disable the fields in visualforce page. Now i want to disable the fields by default when the edit page is loaded. how can i acheive this by using jquery?
my code is below:
<apex:page standardController="Product2" tabStyle="Product2" extensions="ProductSave" >
<apex:sectionHeader title="Product Edit" subtitle="{!Product2.name}"/>
<font style="font-family: Arial; font-size: 10pt;">Enter product details. Mark products as Active if you want them to be added to price books, opportunities, or quotes. </font> <br/><br/>
<apex:includescript value="{!URLFOR($Resource.jquery, 'js/jquery-1.11.3.js')}" />
<script>
initialize();
</script>
<script>
function initialize(){
alert("r");
}
function handlefld(input, textid){
if (!input.checked){
jQuery( 'input[id$=prodjan_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodfeb_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodmar_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodapr_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodmay_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodjun_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodjul_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodaug_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodsep_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodoct_c]' ).prop('disabled', true);
jQuery( 'input[id$=prodnov_c]' ).prop('disabled', true);
jQuery( 'input[id$=proddec_c]' ).prop('disabled', true);
}
else{
jQuery( 'input[id$=prodjan_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodfeb_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodmar_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodapr_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodmay_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodjun_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodjul_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodaug_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodsep_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodoct_c]' ).prop('disabled', false);
jQuery( 'input[id$=prodnov_c]' ).prop('disabled', false);
jQuery( 'input[id$=proddec_c]' ).prop('disabled', false);
}
}
</script>
<apex:form >
<body>
<apex:pageBlock title="Product Edit" mode="edit" >
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save" />
<apex:commandButton action="{!Cancel}" value="Cancel"/>
</apex:pageBlockButtons>
<apex:pageblocksection title="Product Information" columns="2">
<apex:inputfield value="{!Product2.name}" id="prodname"/>
<apex:inputfield value="{!Product2.Family}" id="prodfamily"/>
<apex:inputfield value="{!Product2.ProductCode}" id="prodcode"/>
<apex:inputfield value="{!Product2.IsActive}" id="prodisactive"/>
<apex:inputfield value="{!Product2.Opportunity__c}" id="prodoppr" onclick="select()"/>
<apex:outputText > </apex:outputText>
<apex:inputfield value="{!Product2.Description}" id="proddescr" style="width:500px ; height:100px" />
</apex:pageblocksection>
<apex:pageblocksection title="Weightage" columns="4">
<input id="edit" type="checkbox" onclick="handlefld(this,'{!$Component.prodfeb_c}');"/>
<label for="edit">Edit ?</label>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
<apex:inputfield value="{!Product2.January__c}" id="prodjan_c"/>
<apex:inputfield value="{!Product2.February__c}" id="prodfeb_c"/>
<apex:inputfield value="{!Product2.March__c}" id="prodmar_c"/>
<apex:inputfield value="{!Product2.April__c}" id="prodapr_c"/>
<apex:inputfield value="{!Product2.May__c}" id="prodmay_c"/>
<apex:inputfield value="{!Product2.June__c}" id="prodjun_c"/>
<apex:inputfield value="{!Product2.July__c}" id="prodjul_c"/>
<apex:inputfield value="{!Product2.August__c}" id="prodaug_c"/>
<apex:inputfield value="{!Product2.September__c}" id="prodsep_c"/>
<apex:inputfield value="{!Product2.October__c}" id="prodoct_c"/>
<apex:inputfield value="{!Product2.November__c}" id="prodnov_c"/>
<apex:inputfield value="{!Product2.December__c}" id="proddec_c"/>
<apex:outputText > </apex:outputText>
</apex:pageblocksection>
</apex:pageBlock>
</body>
</apex:form>
</apex:page>
Try adding the following code in your <script> tag instead of "initialize();";