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?