Pass the callback value (result) from Visualforce.remoting.Manager.invokeAction to apex:repeat value.

Question

I want to pass the return value of my remote action method to apex controller from javascript.

This is my code.

Visualforce.remoting.Manager.invokeAction(//get store list for map points
               '{!$RemoteAction.ServiceLocatorController.getCaseNearbyAction2}',mp.x.toString(),mp.y.toString(),range,saStatus,deliveryCountry, serviceType, serviceProduct,
               function(result, evt){
                   console.log('debuggger');
                   if (evt.status) {
                       try{
                           console.log('this is the result : ', result);
                           document.getElementById('resultSize').innerHTML = result.length + 'Result(s)';
//This is the functionality I want to work on                               
//document.getElementById('j_id0:form:resultDiv:storeListValues').value = result;
                           setStoreNearby(result);
                       }
                       catch(ex){
                           console.log('stateOnChage exception: ' + ex);
                       }
                   } else {
                       console.log('error message: '+evt.message);
                   }
               },
               { escape: true }
            );


<apex:repeat id="storeListValues" value="{!storeList}" var="store">
                            <div class="slds-card" style="border: 1px solid #dddbda;box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);">
                              <div class="slds-card__header slds-grid">
                                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                                  <div class="slds-media__figure">
                                    <span class="slds-icon_container slds-icon-standard-account" title="account">
                                      <img src="{!URLFOR($Resource.houseIcon)}" height="30px" width="30px"/>
                                      <span class="slds-assistive-text">account</span>
                                    </span>
                                  </div>
                                  <div class="slds-media__body">
                                    <h2 class="slds-card__header-title">
                                      <a href="#" class="slds-card__header-link slds-truncate" title="Accounts" onclick="showInfo('{!store.Id}','{!store.Name}','{!store.ShippingStreet}','{!store.ShippingCity}','{!store.ShippingState}','{!store.ShippingCountry}','{!store.ShippingPostalCode}','{!store.ShippingLongitude}','{!store.ShippingLatitude}','{!store.CreatedBy.Name}','{!store.CreatedDate}','{!store.Phone}')">
                                        <span id="storeName" class="slds-text-heading_small">{!store.Name}</span>
                                      </a>
                                    </h2>
                                  </div>
                                </header>
                              </div>
                              <div class="slds-card__body slds-card__body_inner">{!store.ShippingStreet},{!store.ShippingCity}&nbsp;<br/>{!store.ShippingState}&nbsp;{!store.ShippingCountry}&nbsp;{!store.ShippingPostalCode}</div>
                            </div>
                        </apex:repeat>

Is there any workaround to this? to pass the result value to apex:repeat value?

Answer 1

The storeListValues apex:repeat was rendered on the server. You won't be able to force it to rerender with data client side. You could manipulate it via the DOM, or you could just wrap the entire repeat in an apex:pageBlock and have something like an actionFunction cause it to rerender.

You can see the usage of apex:actionFunction to rerender an area of the page in it's documentation.

<apex:actionFunction name="sayHello" action="{!sayHello}" rerender="out" status="myStatus"/>

You would change the action to {!getCaseNearbyAction2} and the rerender to the element on the Visualforce page that you want to update afterwards. As part of that operation you would update the storeList collection with the new values you want to display.