Apex Code Development You need to sign in to do that
Don't have an account?
Upasana Paul apex:form not getting displyed on button click
I have a vf page which has a button named "proceed" on line 154. what it should do is to display the form2 which is apex:form and hide form which is also apex:form.
I am trying to do it using javascript $j('form[id$=form2]').show(); and $j('form[id$=form]').hide();
This method is not working.
Can anyone please help me as to why this does not work
`
I am trying to do it using javascript $j('form[id$=form2]').show(); and $j('form[id$=form]').hide();
This method is not working.
Can anyone please help me as to why this does not work
`
<apex:page controller="Email_Quotation_Controller" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" >
<script src='/canvas/sdk/js/publisher.js' type='text/javascript' ></script>
<script src="/soap/ajax/40.0/connection.js" type="text/javascript" ></script>
<script src="/soap/ajax/40.0/apex.js" type="text/javascript" ></script>
<script src="/sforce/one/40.0/api.js" type="text/javascript" ></script>
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
<apex:includescript value="{!URLFOR($Resource.CKEditorAirco, 'ckeditor/ckeditor.js')}" />
<script >
function hideContactList(){
$j('form[id$=form2]').show();
$j('form[id$=form]').hide();
}
function back(){
showSpinner();
CallApexMethodBack();
if( (typeof sforce != 'undefined') && sforce && (!!sforce.one) ) {
//javascript:sforce.one.navigateToURL('/apex/page?Account=');
}else{
//window.location.href ='/apex/page?Account=';
}
}
function back2(){
showSpinner();
CallApexMethodBack2();
if( (typeof sforce != 'undefined') && sforce && (!!sforce.one) ) {
//javascript:sforce.one.navigateToURL('/apex/page?Account=');
}else{
//window.location.href ='/apex/page?Account=';
}
}
function selectToEmail(){
showSpinner();
CallApexMethodSelectToEmail();
if( (typeof sforce != 'undefined') && sforce && (!!sforce.one) ) {
//javascript:sforce.one.navigateToURL('/apex/page?Account=');
}else{
//window.location.href ='/apex/page?Account=';
}
}
function sendTemplates(){
showSpinner();
CallApexMethodSendTemplates();
if( (typeof sforce != 'undefined') && sforce && (!!sforce.one) ) {
//javascript:sforce.one.navigateToURL('/apex/page?Account=');
}else{
//window.location.href ='/apex/page?Account=';
}
}
function showSpinner(){
document.getElementById('loader').style.display = 'block';
}
function hideSpinner(){
document.getElementById('loader').style.display = 'none';
}
</script>
<style>
tr.spaceUnder > td{
padding-bottom: 1em;
}
.cError{
font-weight: bold;
color: #c00;
text-align: center
}
.title{
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: #2e4153;
font-size: 18px;
}
</style>
<style>
.slds-form-element{
margin-bottom: 0px;
}
</style>
<apex:slds />
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
<div class="slds-spinner_container" style="display:none;" id="loader">
<div class="slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<!-- MASTHEAD -->
<div class="slds-text-heading--large slds-text-align--left" style="margin-bottom:50px"> </div>
<div class="slds-text-heading--medium slds-text-align--left" style="margin-bottom:30px"> </div>
<!-- / MASTHEAD -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<div class="slds-container--center slds-container--small">
<apex:form id="form" rendered="{!emailNotSelected}">
<apex:actionFunction name="CallApexMethodSelectToEmail" action="{!selectToEmail}" rerender="toEmailsOutPutText, messagePanel" oncomplete="hideSpinner(),hideContactList()"/>
<apex:actionFunction name="CallApexMethodBack" action="{!Back}" oncomplete="hideSpinner()"/>
<apex:outputPanel id="emailSetPanel">
<apex:pageBlock >
<div id="emailErrorDiv" class="cError" style="display:none;">Error: No Contact selected. <br/> NO Select at least one Contact in Quotation to proceed to send mail.</div>
<div class="title"><b>Customer Contacts:</b></div>
<div> </div>
<apex:pageBlockTable width="50%" value="{!contactInnerClassList}" var="c" id="tblResults">
<apex:column >
<apex:facet name="header"><apex:outputPanel >Select</apex:outputPanel></apex:facet>
<apex:inputCheckbox value="{!c.selected}"/>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputPanel >Name</apex:outputPanel></apex:facet>
<apex:outputtext >{!c.name}</apex:outputtext>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputPanel >Email</apex:outputPanel></apex:facet>
<apex:outputtext >{!c.email}</apex:outputtext>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
<div> </div>
<div> </div>
<div class="title"><b>Internal Users:</b></div>
<div> </div>
<apex:pageBlock id="pbselect">
<div align="left">
<apex:selectList id="myselect" value="{!internalUsersSelected}" multiselect="true" size="10">
<apex:selectOptions value="{!items}"/>
</apex:selectList>
</div>
</apex:pageBlock>
<div align="center">
<div> </div>
<span id="proceed2" >
<div class="slds-text-align--center">
<a class="slds-button slds-button--brand" onclick="selectToEmail();">Proceed</a>
<a class="slds-button slds-button--brand" onclick="back();">Go Back</a>
</div>
</span>
</div>
</apex:outputPanel>
</apex:form>
</div>
<apex:form id="form2" style="display:none;" >
<apex:actionFunction name="CallApexMethodSendTemplates" action="{!sendTemplates}" oncomplete="hideSpinner()"/>
<apex:actionFunction name="CallApexMethodBack2" action="{!Back}" oncomplete="hideSpinner()"/>
<apex:outputPanel id="emailOutputPanel">
<table width="100%">
<b>
<tr class="spaceUnder">
<td width="10%"><b>To: </b></td>
<td width="90%"><apex:outputText value="{!toEmails}" id="toEmailsOutPutText"/></td>
</tr>
<tr class="spaceUnder">
<td width="10%"><b>Cc: </b></td>
<td width="90%"><apex:inputTextarea value="{!ccemails}" style="width:100%"/></td>
</tr>
<tr class="spaceUnder">
<td width="10%"><b>Email Template: </b></td>
<td width="90%">
<apex:selectList value="{!tmpltName}" id="Template" size="1" label="Email Template">
<apex:selectOptions value="{!templates}"/>
<apex:actionSupport event="onchange" action="{!populatetemplate}"/>
</apex:selectList>
</td>
</tr>
<tr class="spaceUnder">
<td width="10%"><b>Email Subject: </b></td>
<td width="90%"><apex:inputText value="{!emailSubject}" style="width:100%" /></td>
</tr>
<tr class="spaceUnder">
<td width="10%"><b>Email Body: </b></td>
<td width="90%"><apex:inputtextarea value="{!emailBody}" id="Body1" styleClass="ckeditor"/></td>
</tr>
</b>
</table>
<div class="slds-container--center slds-container--small">
<div> </div>
<div> </div>
<span id="send" >
<div class="slds-text-align--center">
<a class="slds-button slds-button--brand" onclick="sendTemplates();">Send Email</a>
<a class="slds-button slds-button--brand" onclick="back2();">Go Back</a>
</div>
</span>
</div>
</apex:outputPanel>
</apex:form>
<apex:outputPanel rendered="{!emailSelected}">
<script>
$j('form[id$=form2]').show();
</script>
</apex:outputPanel>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<apex:outputPanel id="thePricePanel">
<!-- Custom error message -->
<apex:outputpanel rendered="{!warningFlag}">
<div class="slds-notify_container">
<div class="slds-notify slds-notify--alert slds-theme--alert-texture" role="alert">
<button class="slds-button slds-notify__close slds-button--icon-inverse" title="Close">
<svg aria-hidden="true" class="slds-button__icon">
<use href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<span class="slds-assistive-text">Info</span>
<h2>{!warningMsg}</h2>
</div>
<p> </p>
</div>
</apex:outputpanel>
<apex:outputpanel rendered="{!errorFlag}">
<div class="slds-notify_container">
<div class="slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture" role="alert">
<button class="slds-button slds-notify__close slds-button--icon-inverse" title="Close">
<svg aria-hidden="true" class="slds-button__icon">
<use href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<span class="slds-assistive-text">Error</span>
<h2>
<svg aria-hidden="true" class="slds-icon slds-icon--small slds-m-right--x-small">
<use href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#ban')}"></use>
</svg>{!errorMsg}</h2>
</div>
<p> </p>
</div>
</apex:outputpanel>
<apex:outputpanel rendered="{!successFlag}">
<div class="slds-notify_container">
<div class="slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture" role="alert">
<button class="slds-button slds-notify__close slds-button--icon-inverse" title="Close">
<svg aria-hidden="true" class="slds-button__icon">
<use href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<span class="slds-assistive-text">Success</span>
<h2>
<svg aria-hidden="true" class="slds-icon slds-icon--small slds-m-right--x-small">
<use href="{!URLFOR($Asset.SLDS, '/assets/icons/custom-sprite/svg/symbols.svg#custom19')}"></use>
</svg>{!successMsg}</h2>
</div>
<p> </p>
</div>
</apex:outputpanel>
<!-- Custom error message -->
</apex:outputPanel>
</div>
<!-- / REQUIRED SLDS WRAPPER -->
<apex:includeScript value="{!$Resource.SLDSDynamicLookupScript}"/>
</body>
</apex:page>
Sorry for this issue you are facing.
May I suggest you please give a try by using
var x = document.getElementById('FORMID'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; }
Hope this helps.
Kindly mark this as solved if it's resolved.
Thanks,
Nagendra