Apex Code Development You need to sign in to do that
Don't have an account?
learningsfdcdev VF calling javascript on load
Right now, I have a selectoptions on my vf page that has several checkboxes. If Checkbox Value 1 is selected, another input text field is displyed and if unchecked it is hidden again which is wrapped around a div called showfield. The script below works great but if the value is pre-checked on page load(since it is passed from another page), the textbox should display or not display depending on if it is checked. How can I ensure in visualforce, that my script below runs immediatley after the DOM is loaded? when I did an alert the getchkboxvalue is undefined.....i tried domcontentloaded and that didn't work either, when i tried windows.load the alert boxes said undefined when i tried to output getchkboxvalue value
<apex:outputPanel >
<apex:selectCheckBoxes onchange="Showdiv(this)" value="{!checkboxes}" required="true" id="checkboxes" >
<apex:selectOptions value="{!checkboxes}"/>
</apex:selectCheckBoxes>
</apex:outputPanel>
<div id = "showfield" style="display:none;">
<apex:panelGrid columns="2" columnClasses="labelCol,input" styleClass="inputGrid">
<apex:outputLabel id="myfieldId" for="myField" ><span class="required">* </span> myField:</apex:outputLabel>
<apex:inputField id="myField" value="{!Lead.myField}" required="false"/>
</apex:panelGrid>
</div>
</script>
function Showdiv(var1){
var getchkboxvalue=var1.value;
if(getchkboxvalue=='Checkbox Value 1' && var1.checked==true){
document.getElementById('showfield').style.display='block';
}
if(getchkboxvalue=='Checkbox Value 1' && var1.checked==false){
document.getElementById('showfield').style.display='none';
}
}
</script>
</body>
You can insert a <body> tag just after the <apex:page>, then specifiy the JS function you intend to execute when DOM is loaded, i.e.
I tried that and still doesnt' work when page is initially ]loaded.
<body onLoad = "Showdiv()">
I am testing this by checking a certain checkbox right away by passing the hard-coded boolean value for that checkbox into the URL - see below. It also needs to be test it this way since this page is accessed via a URL from another vf page. When I click the link below, it should automatically locate the value associated to Checkbox Value 2 and if true, then it should hide the field but it still shows...
https://cs4.salesforce.com/apex/myVF?tId=008456235442444&Checkbox Value 2=1
Right now my javascript is bound to the onChange function of my selectCheckboxes vf tag below. So after the page is loaded when I uncheck the checbox or click a different checkbox like Checkbox Value 1 then the field is auto-displayed again which works as intended but it only seems to work when i uncheck and check something after the page is intially loaded. thoughts?
<apex:selectCheckBoxes onchange="Showdiv(this)" value="{!checkboxes}" required="true" id="checkboxes" >
it will not work because showDiv needs a parameter, reason why i didn't use showDiv in my sample.
what you can do is create a new JS function that gets the checkbox object, then call showDiv from there, passing the acquired checkBox object.
i.e.
function onloadCallBack() { var checkBox = document.getElementById('your_checkbox_id'); if (checkBox) { Showdiv(checkBox); } }then call the new function from onload event of the document (<body>)
This solution makes sense. I will test it out tonight(pst). Can't do it now since we are testing. If it works id be happy to mark as solution and give you kudos. stay tuned