I am trying to code
document.getElementById("ap1").showHeader = "true";
and using this sf example as a good start, but when I inspect the console.log message and search the 3rd parm "document" there is no id="ap1", in fact I cannot locate the apex:page element/component at all. How can I get at the attributes of 'page' and toggle the header?
<apex:page id="ap1" showHeader="False" sidebar="True">
<script>
function cbHandler(input, textid) {
console.log("cbHandler: ", input, textid, document.getElementById("ap1:thePanel"), document);
if (input.checked) {
document.getElementById(textid).style.fontWeight = "bold";
} else {
document.getElementById(textid).style.fontWeight = "normal";
}
}
</script>
<apex:outputPanel layout="block">
<label for="checkbox">Click this box to change text font:</label>
<input id="checkbox" type="checkbox" onClick="cbHandler(this,'{!$Component.thePanel}');" />
</apex:outputPanel>
<apex:outputPanel id="thePanel" layout="block">
Change my font weight!
</apex:outputPanel>
</apex:page>
I found this
//header
document.getElementById('AppBodyHeader').style.display = 'none';
//sidebar
document.getElementById('sidebarDiv').style.display = 'none';
but these elements do not exist within the doc or at least I cannot get to them
Have you tried using the ?isdtp=mn attribute?
Related
I'm trying to capture the selected tab in my controller. I have the below code and it works fine if I leave in the alert message in the script. Once I remove the alert it no longer seems to make the call to the controller. I'm only displaying one tab in the code snippet. I have 3 others defined.
<apex:page showheader="true" sidebar="true" controller="mycontroller">
<script>
function setActiveTabJava(value){
alert('here');
setActiveTab(value);
}
</script>
<apex:form >
<apex:actionFunction id="activeTab" name="setActiveTab" action="{!setTab}" reRender="">
<apex:param name="activeTab" assignTo="{!activeTab}" value=""/>
</apex:actionFunction>
</apex:form>
<apex:pageblock >
<apex:tabpanel selectedtab="Tab One" width="100%">
<apex:tab label="This is tab one" name="tabone" id="referralTab" ontabenter="setActTabJava('TAB1');">
<!-- other tab code-->
</apex:tab>
</apex:tabpanel>
</apex:pageblock>
I basically fixed this by using the value attribute on the tab panel. Since my controller only interested in know which tab was selected, and not when the tab was selected it worked. Basically:
<apex:tabpanel value="{!activeTab}">
<apex:tab name="tab1">...</apex:Tab>
So whenever a tab is changed, as long as you've specified a name attribute on the tab it will be accessible in your controller.
So sorry I no longer have that controller code to post but it was basically just a method that set a variable in the controller.
I have custom validation rules defined on my custom employee__c object in salesforce. I use a standard controller visualforce page with custom extension to show a UI to the user for data entry. My challenge is to show the validation rule error to the user in an easy to read manner. Here is the part of the code that I have.
Visualforce
<apex:page standardController="Employee__c" extensions="EmployeeExtension" sidebar="false">
<apex:sectionHeader ...
<apex:form id=fr>
<apex:pageMessages id="errMsg"/>
<apex:pageBlock title="Employee Edit" mode="edit" >
<apex:pageBlockButtons >
<apex:commandButton action="{!mySave}" value="Save" reRender="errMsg"/>
<apex:commandButton action="{!cancel}" value="Cancel"/>
....
</apex:form>
</apex:page>
Apex Controller
public class EmployeeExtension {
....
public PageReference mySave(){
....
try{
upsert empList;
} catch (DMLException ex) {
ApexPages.addMessages(ex);
}
}
}
This shows the errors at the page top which is the way I want, but it shows twice. Here is how it will display the error at page top.
error_message_from_custom_validation_comes_here
TriggerEmployee: Exception on row 0; first error: FIELD_CUSTOM_VALIDATION_EXCEPTION, error_message_from_custom_validation_comes_here
In my entire controller I do not have any other DML operations nor do I use ApexPages.addmessage any where else. The strange thing is if I remove
ApexPages.addMessages(ex);
while keeping the try catch block as is, then I see only
error_message_from_custom_validation_comes_here
I wonder why it shows the page messages in vf page even when I am not sending anything from controller. I appreciate all your responses, but I would like to see solutions not involving javascript or jquery.
You can use this:
ApexPages.addMessage(
new ApexPages.Message(
ApexPages.severity.ERROR,
ex.getMessage()
)
);
Alternatively you could also imitate the standardController:
public class EmployeeExtension {
....
public PageReference mySave(){
/* do your thing */
return this.standardController.save();
}
}
This way you return the page reference of the save which is the standard behaviour (if you want to imitate this) and if there is a validation error it will show up in the tag and only the nice formatted message will show up.
You don't need a reRender on the save:
<apex:page standardController="Employee__c" extensions="EmployeeExtension" sidebar="false">
<apex:sectionHeader ...
<apex:form id=fr>
<apex:pageMessages/>
<apex:pageBlock title="Employee Edit" mode="edit" >
<apex:pageBlockButtons >
<apex:commandButton action="{!mySave}" value="Save"/>
<apex:commandButton action="{!cancel}" value="Cancel"/>
....
</apex:form>
</apex:page>
Salesforce/Visualforce will do the rest for you :)
i write a visualforce page with source code
<apex:page controller="MyController1">
<apex:form>
<apex:pageBlock >
<apex:pageBlockSection id="search">
<apex:commandLink action="{!commandLinkAction}" value="Advance Search" reRender="thePanel" id="theCommandLink"/>
<apex:outputPanel id="thePanelWrapper">
<apex:outputPanel id="thePanel" rendered="{! rend}" layout="block">My div</apex:outputPanel>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
and the MyController1 class is
public class MyController1{
public Boolean rend{get;set;}
public PageReference commandLinkAction(){
rend=true;
return null;
}
}
when i click on Advanced Search link nothing happens but i was expecting outputPanel with id "thePanel" should render.why it is not rendering please someone explain??
In moment that you click on the link the panel not on the page, SF not rendered it.
As #Shimshon said, when the HTML code is generated from Visualforce, the Visualforce components marked as rendered="false" are not displayed in the resulting HTML document.
In this case:
<apex:outputPanel id="thePanel" rendered="{! rend}" layout="block">
if you are going to rerender this panel, then you must ensure that the component will be displayed in the HTML code so the rerender action can find it. Since {! rend} is initially set to false in the controller's constructor "thePanel" is never rendered in the page, thus you try to rerender a component that does not exist.
#theGreatDanton 's solution will work because <apex:outputPanel id="thePanelWrapper"> is the container panel that is always rendered:
<apex:commandLink action="{!commandLinkAction}" value="Advance Search" reRender="thePanelWrapper" id="theCommandLink"/>
and if this panel is pointed by rerender attribute, then "thePanelWrapper" and their child nodes ("thePanel") will be updated.
try the below code.
<apex:page controller="MyController1">
<apex:form>
<apex:pageBlock >
<apex:pageBlockSection id="search">
<apex:commandLink action="{!commandLinkAction}" value="Advance Search" reRender="thePanelWrapper" id="theCommandLink"/>
<apex:outputPanel id="thePanelWrapper">
<apex:outputPanel id="thePanel" rendered="{! rend}" layout="block">My div</apex:outputPanel>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
public class MyController1{
public Boolean rend{get;set;}
//setting the boolean to false in the constructor
public MyController1(){
rend = false;
}
public void commandLinkAction(){
rend=true;
// return null;
}
}
Hope this helps!!
I have a commandButton in a visualforce component. The expected behavior is that the controller method would be called. The page is refreshed, but the method registered in the commandButton {!performUnlinkContact} is not called. The strange thing is that if I put the button on the base visualforce page, it calls the controller method as expected - but when in a component, it does not.
Here is my component:
<apex:component >
<apex:attribute name="rk" description="RK Base Contact Data" type="Object" required="true"/>
<div class="unlinkBox">
<div class="unlinkHeader">
<div class="unlinkHeaderLeft">Wrong Contact?</div>
<div class="unlinkHeaderRight"><apex:image style="cursor: pointer;" value="{!$Resource.x}" alt="Close Panel" /></div>
</div>
<div class="unlinkBody">
<div class="unlinkBodyLeft">
Click Yes if the Contact displayed is incorrect.<br/><br/>You will be given the opportunity to link to a different Contact.
</div>
<div class="unlinkBodyRight">
<apex:outputpanel id="callMethod">
<apex:commandbutton value="Yes, this is the wrong contact" action="{!performUnlinkContact}" rerender="" status="myDisplayStatus" /> <a onclick="return hideUnlinkPanel()" style="color:blue;cursor:pointer;text-decoration:underline">No</a>
</apex:outputpanel>
<apex:actionStatus id="myDisplayStatus" startText="(performing Contact Unlink...)" stopText=""/>
</div>
</div>
</div>
</apex:component>
and here is the method in the controller extension:
public PageReference performUnlinkContact() {
System.debug('==================================!!performUnlink');
if (this.thisLead.rkContactId__c != 0) {
this.thisLead.rkContactId__c = 0;
update this.thisLead;
}
return null;
}
I'm sure I must be doing something wrong since I am new to salesforce and still learning, but I am unable to find any related issues when I search on how to resolve this issue. Thanks in advance for the help.
Thanks for the replies - to resolve I ended up adding an actionFunction to the base Page, then just calling this function in the component via a button's onclick event:
Code in base page:
<apex:actionFunction name="doUnlink" action="{!performUnlinkContact}" rerender="refresh" status="myStatus"/>
Code to call function in the component:
<input type="button" value="Yes, this is the wrong contact" onclick="doUnlink();" />
This method seems to work well so far.
You can also pass a reference of performUnlinkContact() to the component, using an apex:attribute of type ApexPages.Action, and then when your commandButton uses this reference, it will call the method defined in the page controller.
<apex:component>
<apex:attribute name="performUnlinkContact" type="ApexPages.Action" description="Passing method from controller"/>
<!-- your stuff here -->
</apex:component>
Then when you use your component, you have to populate that attribute like so:
<c:MyComponent performUnlinkContact="{!performUnlinkContact}"
I think rerender="" is not a way to do a fake reRender command. I would try it with rerender="none".
I am trying to get my hands on learning Visual force.
I have an object inv_c which holds invoice records and another object item_c
I have in my VF page a picklist with the object names.
If user selects inv_c then all records of inv_c are displayed if user selects item__c all records of item are displayed
Is there any way where the list would be displayed on the completion of the selection or do we have to have button to get it.
how can i achieve this in VF? any small code snippet would be wonderful
Thanks
You can do this using a JavaScript onchange event with the help of the ActionSupport Visualforce Component. Here's an example.
<!-- Page: -->
<apex:page controller="exampleCon">
<apex:form>
<apex:outputpanel id="counter">
<apex:outputText value="Click Me!: {!count}"/>
<apex:actionSupport event="onclick"
action="{!incrementCounter}"
rerender="counter" status="counterStatus"/>
</apex:outputpanel>
<apex:actionStatus id="counterStatus"
startText=" (incrementing...)"
stopText=" (done)"/>
</apex:form>
</apex:page>
/*** Controller: ***/
public class exampleCon {
Integer count = 0;
public PageReference incrementCounter() {
count++;
return null;
}
public Integer getCount() {
return count;
}
}
In your case the actionSupport component would be a child of your selectRadio component i.e.
<apex:selectRadio value="{!selection}">
<apex:selectOptions value="{!items}"/>
<apex:actionSupport event="onchange" .... />
</apex:selectRadio>