3

I am able to add spinner animation using apex:commandbutton. Here is the reference to add spinner animation when commandbutton is clicked:
Popup "spinner" style apex:actionStatus

But how to add spinner animation using element and onclick listener? Below is the example code of element onclick event:

<apex:outputPanel id="pnlSearchResults" style="margin:10px;height:350px;overflow-Y:auto;" layout="block">
    <apex:pageBlock id="searchResults">
        <apex:pageMessages id="errors"/>
        <ul id="products" class="list clearfix products">
            <apex:repeat id="repeatdata" var="dt" value="{!resultList}">
                <li class="clearfix" onclick="showDetail('{!dt.bookingId}', '{!searchString}');">
                    <div class="left">
                        <img src="{!$Resource.jquery_list_grid_switcher + '/images/products/list-default-thumb.png'}" alt="default thumb" class="thumb" />
                        <h3>{!dt.name}</h3><br/>
                        <span class="meta">{!dt.phone}</span><br/>
                        <span class="meta">{!dt.email}</span><br/>
                        <span class="meta"><c:TimestampConverter componentValue="{!dt.timestamp}" /></span>
                    </div>
                    <div class="right">
                        <span class="price">{!dt.amount}</span>
                        <div class="bookid">{!dt.bookingId}</div>
                        <div class="tripType">{!dt.tripType}</div>
                    </div>
                </li>
            </apex:repeat>
        </ul>

    </apex:pageBlock>
</apex:outputPanel>

javascript:

function showDetail(bookingId, lastQuery) {
    window.location = "/apex/DetailView?bookingId=" + bookingId + "&lastQuery=" + lastQuery + "&action=detail";
}

I want to add spinner animation when the <li> tag is clicked.
How can I achieve this?

2

Use an actionFunction:

<apex:actionFunction name="search" action="{!search}" status="searchStatus" />
<apex:actionStatus id="searchStatus" />

This will add a javascript function called "search" which your javascript can call, and when you call it it will cause the "search" controller method to execute and also show the searchStatus actionStatus.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.