Ajax call to retrieve date properties to be used on a component for a specific page type

Hi 

You can refer the below link to know more about how to call ajax calls and retrieve data using sling servlets.

https://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html

Mani Kumar 

Hi Mani,

Thank you for your reply.

@All,

With the data we have as of now, looks like we have to make this Ajax call to a restful service and pass a single parameter to it, based on which two date values will be provided which has to be made use of in our components. 

From the approach listed in  the above article

- Looks like we have to create a servlet, pass the required parameters and then obtain the results, which has to be displayed on the page, correct?

- Is there any other way we can achieve our objective?

- Any thoughts/pointers/code snippet will be helpful.

In the servlet, write a query that retrieves page properties. Place prop values in  JSON data and return data.

Hi ,

you do not want to write a servlet ? if so please on load of the page where the component is present make an ajax call directly using jquery or javascript then display the response accordingly

please refer link to write ajax call on page load but instead making servlet call is best approach and handle all your rest calls in the servlet itself.

http://api.jquery.com/load/

--Mani Kumar K

Hi Mani,

Thank you for your reply.

We would like to go with the servlet approach. As you mentioned, we will call rest calls in the servlet itself. Now I am stuck with the below:

1] I have to fetch a page property and send it to the servlet.

2] We are using Sightly.

3] Based on Scott's article, trying the below in the sightly html file [not completely written yet]and when I run in debug mode, the control is going to servlet. However, in the below I am trying to fetch jcr:title property of the page to pass to customservlet and failing.

    <script>
    $(document).ready(function(){
    (function () {
    var title = granite.resource.properties["title"];    
});
    $.ajax({
         type: 'GET',    
         url:'/bin/customservlet',
         success: function(msg){
           var json = jQuery.parseJSON(msg); 
            var msgId=   json.id;
            var lastName = json.lastname;
            var firstName = json.firstname;
              
            $('#ClaimNum').val(msgId); 
            $('#json').val("Filed by " + firstName + " " + lastName);   
         }
     });
    })
    </script>

Any thoughts/pointers on this will be really helpful.

HI Mani,

Thank you for your reply.

A small change here. In the above AJax call to my servlet, I need not pass any property but just call the servlet and fetch the json data and display on the page.

For now, I am just trying the below (out of the entire thing to be done):

I tried to put this Ajax to servlet call in a seperate js file and trying to call that from sightly. Tried various options, but struggling here. Any snippet here would be helpful.

Can you share those snippets how your trying it ?

Hi Mani,

Thank you for your help and addressing this issue in your blog[http://learneasycodeeasy.blogspot.in/2016/02/ajax-call-in-sightly-component.html].