Sightly Pagination Component using Sling Model and JavaScript Use API in AEM 6.1

[edubey]

Sightly pagination component which works together with some of the important concepts of AEM like Query Builder, Sling Model, JavaScript Use API and Sightly. In terms of functionality of this component its very similar to what we have in our AEM Community.

Read complete article here: http://adobeaemclub.com/sightly-pagination-component-using-sling-model-and-javascript-use-api-in-aem...

[rajeev_yadav]

This URL is not working. Can you please share the correct URL for reference.

[arunpatidar]

Hi,

please try https://aem.adobemarketingclub.com/sightly-pagination-component-using-sling-model-and-javascript-use...

[rajeev_yadav]

Thanks Arun. Here I see Javascript Use API has been used.. Instead can we use sling model which is recommended approach? Also, I think it is not using Ajax call. It seems to be traditional approach..

[arunpatidar]

Hi Rajeev,

Yes, In above page they used Javascript Use API but you can use Sling Model also,  model is used just to adapt slingServletRequest object into java Pojo object.

You can convert this into Ajax by creating servlet and use selector for range as explained in above article.

Thanks

Arun

[rajeev_yadav]

thanks Arun. Is it possible to use list htl structure from ajax response or else only alternate is to use any other html templating to convert the ajax json response data into required layout(similar to original list layout on which pagination component is added)

Thanks,

Rajeev

[arunpatidar]

Hi,

No, you can't but you can use javascript/jquery iterator.

jQuery loop over JSON result from AJAX Success? - Stack Overflow

Initial load  you can create html placeholder for pagination using HTL with dialog values. Once page is load servlet will be called and with the response later html can be updated.

[rajeev_yadav]

Thanks Arun. One last question hopefully.

Is it possible to call sling model directly from jquery and pass required parameters instead of writting intermittent servlet. Let’s assume sling model has json exporter on it.

[arunpatidar]

Hi Rajeev,

The answer for below question is No.

Is it possible to call sling model directly from jquery and pass required parameters instead of writting intermittent servlet. Let’s assume sling model has json exporter on it.

You need to tell jquery/Ajax where you need to make a request and for that you need a URI, which can be your page or anything that is accessible from URL or in a file system. In your case you need to apply some logic and get the response to show pagination which can be done by Java code and the easiest way is to create a servlet using paths and access servlet using that path in jquery.

But if you'll create sling model you can are not able to directly invoke from jquery.

Thanks

Arun

[Jitendra_S_Toma]

Hi Guys,

Both approaches are okay however if you are not catching ajax request then go with build response with JSON data & Html templating..handlebar or Dust js.

Having html in response is quite a heavy ajax response and mostly it is not preferred. but if you can cache ajax response then this could be useful. Another drawback is that if the response is cached then you need to find a way to keep refresh the same cache.

I hope this helps.

[rajeev_yadav]

Hi Jitendra,

what is the recommended approach to cache the ajax response from each ajax pagination request?

[Jitendra_S_Toma]

Well,

First thing, if ajax request does not have too many parameters then use selectors. Secondary make sure you have TTL & Max age, cache enable for these request. There are other settings as well at the akamai & Dispatcher level for caching ajax request. Talk to dev ops if you need help.

Regards,

Jitendra

[rajeev_yadav]

Thanks Jitender for the response.

Thanks

Rajeev