function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
AviAAviA 

actionStatus and commanButton without reRender

Hello All,

I would like to know wether it's possible to display some status loading, such as actionStatus, that trigger by a commandButton.

The only requirement (I'm trying to to simplify our problem) is that we MUST OMIT the reRender attribute from the commandButton.

 

So basically, we're trying to do something like that - 

<apex:commandButton value="Test" action="{!testAction}" status="testStatus" /> 

 

Unfortunately, it seems that it's not possible to use actionStatus without the reRender attribute.

 

Any suggestions?

 

Thanks a lot,

 

 

 

 

SRKSRK
you can call a javascript function on onclick of that button & the can show a pop up which hide the backgruond

us the below mwntion link for help
it have lot of expamle try the last one "Modal Popups"

http://www.javascripttoolbox.com/lib/popup/example.php
SRKSRK
& you can close it using the another java script function which you can call on oncomplete
MoUsmanMoUsman

Hi SRK, Good solution given by you but  You know very well that If we did not use render then the page will be post back from the server action status may not be apear in this small time of preiod. AviA Please try to achive this functionality using render if you do not have a restricted requirement from your client. 

 

--

Thanks

Usman 

AviAAviA

Hi All,

I guess you mentioned that I'll try to use reRender attribute (cause you wrote rendered).

I don't have any restriction for this requirmeent, if to be honest I prefer to use rhe reRender, but than I will have additional issue which is describe below - 

 

Page - 

<apex:page id="pg" controller="tst123" >
    <apex:form id="frm">
        <apex:actionStatus id="sts"  layout="block">
            <apex:facet name="start">
                <apex:outputLabel value="Loading..." styleClass="loadLabel"/> 
            </apex:facet>    
            <apex:facet name="stop"  />
        </apex:actionstatus>  
        
        <apex:pageBlock >
            <apex:commandButton action="{!reRenderTbl}" value="reRender Table - With Status" reRender="frm" status="sts"/>
            <br/>
            <apex:commandButton action="{!reRenderTbl}" value="reRender Table - Without Status" />
        </apex:pageBlock>
        
        <apex:pageBlock id="pbTable">
            <table class="list" id="tbl">
                <thead>
                    <tr>
                        <apex:outputPanel rendered="{!oneRow}" >
                            <th id="tst1"> Header Row - Column #1 </th>                    
                        </apex:outputPanel>
                        
                        <apex:outputPanel rendered="{!NOT(oneRow)}" >
                            <th id="tst2"> Header Row - Column #1 </th>                    
                            <th id="tst3"> Header Row - Column #2 </th>
                        </apex:outputPanel>
                    </tr>
                </thead>
            </table>
        </apex:pageBlock>
    </apex:form>
</apex:page>

 

Controller - 

 

public with sharing class tst123 
{
    public Boolean oneRow {get; set;}
    
    public tst123()
    {
        oneRow = true; 
    }
    
    public void reRenderTbl()
    {
        oneRow = !oneRow ; 
    }
}

 

As you can easily understand from the example I created and actually sinplify the problem, I can't reRender the table below by using the reRender attribute.

I CAN'T use the pageBlockTable or ather table's apex tags as I have a lot of repeats and baiscally I got confirmation from salesforce that my solution need to be implemented with html-table-tag. 

 

So this is basically my initial problem, if I could reRender the table below by the commanButton it ging to solve my problem - 

* There must be a table tag

* There nust be some rendered attributes inside the table tags (I mentioned it as I understood that there issues with reRender some tags that contains rendered tags - but it's not the situation as I'm rendering the netire form).

 

Thanks in advance,

 

 

MoUsmanMoUsman

AviA,

 

I have made changes in your logic to rerender table properly for your requirenment, As I have understood, You are unable to render new column in your table right. but you can hendel the situation from apex controller it is very effective you can render row as well with the same logic. Because I am not fully aware with your requirement.

I have written Apex code/VF for you. You can modify this as per your need.You just copy and paste in your visual force page and controller. This is well tested.

 

<apex:page id="pg" controller="tst123" >
    <apex:form id="frm">
        <apex:actionStatus id="sts"  layout="block">
            <apex:facet name="start">
                <apex:outputLabel value="Loading..." styleClass="loadLabel"/> 
            </apex:facet>    
            <apex:facet name="stop"  />
        </apex:actionstatus>  
        
        <apex:pageBlock >
            <apex:commandButton action="{!reRenderTbl}" value="Add Column" reRender="pbTable" status="sts"/>
            <br/>
            <apex:commandButton action="{!removeLastColumn}" value="Remove Column"  reRender="pbTable" status="sts"/>
        </apex:pageBlock>
        <apex:outputPanel id="pbTable"> 
        <apex:pageBlock >
            <table class="list" id="tbl">
                <thead>
                    <tr>
                        <apex:repeat value="{!colums}" var="c">
                            <th id="tst1">{!c}</th>                                            
                        </apex:repeat>
                    </tr>
                </thead>
            </table>
        </apex:pageBlock>
        </apex:outputPanel>
    </apex:form>
</apex:page>

 controller

public with sharing class tst123 
{
     
    public list<String> colums{get;set;}
    public tst123()
    {
        colums = new list<String>{'Header Row - Column #1'};
    }
    
    public void reRenderTbl()
    {
        addNedwColumn('Header Row - Column #2');
    }
    
    public void addNedwColumn(String colName){
        colums.add(colName);
    }
    public void removeLastColumn(){
        if(!colums.isEmpty()){
            colums.remove(colums.size()-1);
        }
    }
}

 

If this solves your problem please mark as solved to help other otherwise let me know.

 

--

Thanks

Usman

Rahul SharmaRahul Sharma

Hi AviA,

 

I had faced similar issues in past and didn't not find any better solution than to use two tables, one only with single column  and other with multiple columns.

Check the code below.

-----------------------------------------------------------------
Visualforce Page
-----------------------------------------------------------------
<apex:page id="pg" controller="tst123" >
    <apex:form id="frm">
        <apex:pageMessages id="theMessage"/>
        <apex:actionStatus id="sts"  layout="block">
            <apex:facet name="start">
                <apex:outputLabel value="Loading..." styleClass="loadLabel"/> 
            </apex:facet>    
            <apex:facet name="stop"  />
        </apex:actionstatus>  
        
        <apex:pageBlock >
            <apex:commandButton action="{!reRenderTbl}" value="reRender Table - With Status" reRender="frm, theMessage" status="sts"/>
            <br/>
            <apex:commandButton action="{!reRenderTbl}" value="reRender Table - Without Status" />
        </apex:pageBlock>
        
        <apex:pageBlock id="pbTable">
            <apex:outputPanel rendered="{!oneRow}">
                <table class="list" id="tableWith1Column">
                    <tr>
                        <th id="tst1"> Header Row - Column #1 </th>  
                    </tr>
                </table>
            </apex:outputPanel>
            
            <apex:outputPanel rendered="{!NOT(oneRow)}" >
                <table class="list" id="tableWith2Column">
                    <tr>
                        <th id="tst1"> Header Row - Column #1 </th>                
                        <th id="tst3"> Header Row - Column #2 </th>
                    </tr>
                </table>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
</apex:page>
-----------------------------------------------------------------
Controller
-----------------------------------------------------------------
public with sharing class tst123
{
    public Boolean oneRow {get; set;}
    
    public tst123()
    {
        oneRow = true; 
        apexpages.addMessage(new apexpages.Message(ApexPages.Severity.INFO, 'in CS_rerenderIssue - oneRow : '+oneRow));
    }
    
    public void reRenderTbl()
    {
        oneRow = !oneRow ; 
        apexpages.addMessage(new apexpages.Message(ApexPages.Severity.INFO, 'in reRenderTbl - oneRow : '+oneRow));
    }
}
-----------------------------------------------------------------

 

What I also felt is that in if you rerender columns dynamically in a visualforce page(which is rendered as PDF) then all the table formatting is lost. So this approach was very helpful for me.

 

Another option/solution would be is to use a wrapper class List to control the columns, but that makes code bit complicated; on the other hand it also gives you more control.

 

Ahmed Ali 7Ahmed Ali 7
Hi there ,
if any one faced previous issue you should use the solution provided here :
https://salesforce-season.blogspot.com/2018/02/simple-loader-image-for-visualforce-page.html

ADD BELOW STYLE TO YOUR VF PAGE
#filter{ 
display:none; 
background-image: url({!URLFOR('/img/loading.gif')});
z-index:10000;
osition:fixed; 
top:0%;left:0%; 
width:100%; 
height:100%; 
background-repeat:no-repeat; 
background-position:center; 
background-color: #ffffff; 
opacity:0.6; 
filter:alpha(opacity=50);
}


Call startProces method when you call action( Controller function or any function after which you want to show loading image).
 
function startProcess() {
 $('#filter').show(); 
} 

function endProcess () {
 $('#filter').hide(); 
}

Add below Div tag at the start of body tag or form.
 
<center> <div id="filter"></div> </center>



you can call startProcess on click button event.