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
raseshtcsraseshtcs 

Action Status inside page block table

Hello,

 

I have a page block table which has an input text in one column, another column contains information which i fetch from db depending on the user input in the input text field. I am doing this using onblur and action function. What I want to do is to show a loading image in the specific cell for which user has input his data. Right now i am able to show a loading image but it is on the entire page, I would like that the image to be on the specific cell on which the data would come once fetched.

 

Thanks in advance.

 

Abhay AroraAbhay Arora

You can use apex:Facet for this..

http://blog.jeffdouglas.com/2009/11/06/actionsupport-example-using-facets-and-javascript/

 

Please mark this as solved if above is what you need

raseshtcsraseshtcs

hey thanks for the quick response.

I am not clear about your solution. Take a look at my code

    <script type="text/javascript">
        function oppFocused(se){
            var seInput = document.getElementById(se).value;
            //alert('Hi OnChange'+seInput);
            if(seInput != ''){
                //alert('Inside if');
                callmethod(seInput);
            }
        }
    </script>
<apex:pageBlockTable id="bodyTable" value="{!Records}" var="acc" rowClasses="odd,even" styleClass="tableClass" cellpadding="" cellspacing="" align="center">
                <apex:column style="text-align:center;" id="num">
                    <apex:facet name="header">Number</apex:facet>
                    <apex:outputPanel >
                        <apex:inputText value="{!acc.num}" id="input" onblur="oppFocused(this.id)">
                        </apex:inputText>
                    </apex:outputPanel>
                </apex:column>

                <apex:column style="text-align:center">
                    <apex:facet name="header" >Name</apex:facet>
                        <apex:outputText value="{!acc.name}">
                        </apex:outputText>
                                   
                </apex:column>
            </apex:pageBlockTable>
     <apex:actionFunction name="callmethod" action="{!getInfo}" reRender="bodyTable" status="counterStatus">
        <apex:param name="firstParam" assignTo="{!param}" value="" />
        </apex:actionFunction>
        <apex:actionStatus id="counterStatus">
                <apex:facet name="start" >
                    <apex:image url="{!$Resource.pleasewait}" height="50" width="50" styleClass="vert"/>    
                    </apex:facet>                   
        </apex:actionStatus>

 getinfo is the controller method which returns the data. So initally the values in the column name are null and the moment the user inputs some thing in the number column, the process to fetch the name starts, I want that image to be shown instead of the null till the value comes.

Abhay AroraAbhay Arora

basically you need to use some jquery plugin put your column in container say a DIV  and use a Jquery plugin to mask that div with the loading image such as

 

http://archive.plugins.jquery.com/project/ui-throbber

http://www.openpave.org/~reg/jqueryui-throbber.html

 

 <apex:column style="text-align:center">
                    <apex:facet name="header" >Name</apex:facet>
                        <apex:outputText value="{!acc.name}">
                        </apex:outputText>
                                   
                </apex:column>
raseshtcsraseshtcs

I was wondering if we could do it just through action status and action function and not include jquery in this.. is there a way to do that

Abhay AroraAbhay Arora

Ya sort of if you can move this column in some container and along with action function just putting some CSS styles whin in return will hide/show the image and then the value

 

It will be somewhat like utilizin js events in conjuction with actionstatus and action function

 

<apex:actionstatus>myjsfunction()</apex:actionstatus> sort of thing

Abhay AroraAbhay Arora

Please update if your issue is solved

raseshtcsraseshtcs

nope... still working on it....

Abhay AroraAbhay Arora

If you need any more help just let me know

Abhay AroraAbhay Arora

Please confirm if your issue is solved