3 Replies Latest reply on Nov 29, 2011 5:04 PM by milovdzee

reRender delayed on click of a4j:commandButton

its_me Nov 28, 2011 11:08 PM

Hello,

I have a search application with a number of search criteria on the top of the screen. Once the user enters the search, the screen does a small validation and then hits a hidden a4j:commandButton. The results are displayed in the bottom. The reRender works fine when the number of search results are low. But when the number is high, it takes a bit longer for display, which confuses the users. The code is given below:

ScreenButton:

<a4j:commandButton

id="submitButton" value="Submit"

onclick="submitSearch();" >

Script:

function submitSearch(){

var selAttOperator = document

.getElementById("mySearch:selDD")[document

.getElementById("mySearch:selDD").selectedIndex].value;

var proceed = true;

if ("ABC" == selAttOperator){

if (null== fromv ||''== fromv){

alert("Please enter Value 1");

proceed = false;

}

if (null== tov ||''== tov){

alert("Please enter Value 2");

proceed = false;

}

if (proceed){

document.getElementById("mySearch:submitButton").disabled=true;

document.getElementById("imageLoading").style.visibility = "visible";

document.getElementById("mySearch:hdnSubmitButton").click();

}

Hidden Button:

<a4j:commandButton id="hdnSubmitButton" style="visibility: hidden" action="#{myBean.executeQuery}"

styleClass="submit-button" reRender="val1,val2,val3,val4,val5,resultList,val6,val7,val8"

onclick="document.getElementById('imageLoading').style.visibility = 'visible';document.getElementById('mySearch:resultList').style.visibility='hidden';"

oncomplete="document.getElementById('mySearch:submitButton').disabled=false;document.getElementById('imageLoading').style.visibility = 'hidden';

document.getElementById('mySearch:resultList').style.visibility='visible';"/>

Search Results are displayed in a rich:dataTable with an id of resultList.

As it is shown above, we have tried all options of hiding the submit button, displaying a "Loading" image and the hiding the results until the new results come in place, but even then the problem occurs quite frequently. Kindly advice.

Regards,

Nid............

1. Re: reRender delayed on click of a4j:commandButton

mcmurdosound Nov 29, 2011 1:42 AM (in response to its_me)

You can define a status for your hidden button:

document.getElementById("mySearch:hdnSubmitButton").click();

<a4j:status name="mystatus"> <-- look into the api doc for start and ending.

<a4j:commandLink value="clickme" status="mystatus" ../>

you could use an unnamed status as well (for all ajax calling components)

The Idea is, as long as the ajax is working (start, not ended yet), display a mask to prevent user interaction (or show a loading msg). When the call is finished (end), remove the mask.
Actions
2. Re: reRender delayed on click of a4j:commandButton

its_me Nov 29, 2011 4:05 AM (in response to mcmurdosound)

Hello Christian,

We modified the code to:

<a4j:commandButton id="hdnSubmitButton" style="visibility: hidden" action="#{myBean.executeQuery}"
                                                           styleClass="submit-button" reRender="val1,val2,val3,val4,val5,resultList,val6,val7,val8"
                                                           status="commonstatus"/>

<a4j:status id="commonstatus">
                                            <f:facet name="start">
                                                <h:graphicImage value="Loading6.gif"/>
                                            </f:facet>
                                        </a4j:status>

We are still seeing the reRendering taking time in some cases. In the above case, the icon goes away but the fresh results are not displayed until any other ajax event occurs. Replacing the a4j:status to the following did not work either.

<a4j:status id="commonstatus" startText="Working....." stopText="" />

Kindly advice.

Regards,
Nid.........
Actions
3. Re: reRender delayed on click of a4j:commandButton

milovdzee Nov 29, 2011 5:04 PM (in response to its_me)

We block the whole screen by showing a tranparent div by calling a script like this:
<a4j:status id="status" startText="" stopText="" onstart="showAjaxActive();" onstop="hideAjaxActive();"/>

Javascript:
/**
* Start AJAX call.
*/
function showAjaxActive() {
    //console.log("showAjaxActive");

    // short delay before showing throbber and visible layer
    if (showDelayedWaitPID) window.clearTimeout(showDelayedWaitPID);
    showDelayedWaitPID = window.setTimeout("showAjaxActiveVisible()", 1500);
}

function showAjaxActiveVisible() {
    var innerDiv = document.getElementById("pleaseWaitInnerDiv");
    if(innerDiv == null) return;
    innerDiv.style.visibility = "visible";

    var div = document.getElementById("pleaseWaitDiv");
    div.style.backgroundImage = "url(/images/25black.png)";
    div.style.visibility = "visible";

    centerDiv("pleaseWaitInnerDiv");
}

/**
* Stop AJAX call.
*/
function hideAjaxActive() {
    var innerDiv = document.getElementById("pleaseWaitInnerDiv");
    if(innerDiv == null) return;
    innerDiv.style.visibility = "hidden";

    var div = document.getElementById("pleaseWaitDiv");
    div.style.visibility = "hidden";

    if (showDelayedWaitPID) window.clearTimeout(showDelayedWaitPID);
}

We used to block the screen immidiately but that resulted in blocked screens very often. Every poller or any other request triggers our ajax-active. We now just wait 1.5sec and then show a throbber on a tranparent div. The good thing is that it works for every call.
Actions

Go to original post