Ajax call to servlet in sightly

[askdctm]

Hi All,

I am struggling for the past two days with the issue mentioned below :

1] I have a component.html and I have the below section[to call js]

<script>
    $(window).load(function() {

        getData();
    });
    </script>

2] I have component.js file with the below section

function getData() {

$.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);   
         }
     });
}

Issues I am facing 

a] When I write the ajax call in component.html it works fine, but if I have that in a seperate js and call, the servlet is not getting invoked.

b] Once the above is done, I have to send a property via the above Ajax call to servlet. That property is available to me in component.html file in the form of ${xyz.selectors}[the property was retrieved via Java use class]

Just an FYI : The AJax call is not completely written yet.

I am struggling here for quite some time. Any thoughts/pointers on this will be really helpful.

[askdctm]

Hi All,

Just to add to the above.

When I try with js file seperated from html, I see "Uncaught ReferenceError: getData is not defined" error in browser console.

[smacdonald2008]

See this related thread:

http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

[askdctm]

Hi Scott,

Thank you for your reply.

Details as below :

a] On the question #1, in the previous post I guess its happening because the html would have to be linked to js via clientlib and all. So, probably will ignore that for now and make use of js in html.

b] Coming to the second question, I am still clueless how it is to be done in my scenario. 

I somehow just don't seem to be getting this 

[Jitendra_S_Toma]

  It seems, you are loading all your java script files at the footer and call this function window load. "GetData" function isn't available to the caller.

 For quick check, add javascript library in the header.

askdctm wrote...

Hi All,

Just to add to the above.

When I try with js file seperated from html, I see "Uncaught ReferenceError: getData is not defined" error in browser console.

[Jitendra_S_Toma]

FYI

Javascript must be in the footer, but if there are some library which requires to be available then put it in header. 

In your case, call the GetData function inside a document ready function. 

Jitendra

[smacdonald2008]

We are going to look into writing a community article that shows use of AJAX and Sightly. 

[edubey]

Hi askdctm,

1. Make sure you load getData() function before you call.

2. Call JS code when page is completely loaded. 

3. You can sent POST request to your servlet. Have a doPost() method in your servlet and define it

[Lokesh_Shivalingaiah]

As everyone mentioned add

<script>
    $(window).load(function() {

        getData();
    });
    </script>

after you include your component.js and it should work as expected.

Also as @Scott mentioned, we would write a community article on this soon !

[askdctm]

Hi Scott/Jitendra/Lokesh/Edubey,

Thanks a lot for your response. Able to progress on it now. Stuck with an issue[guess its a minor one] and post back my results.

[Mani_kumar_ · Accepted solution]

Hi All,

This may me useful for community people i tried something linke this to have an ajax call in servlet please find post on my blog

http://learneasycodeeasy.blogspot.in/2016/02/ajax-call-in-sightly-component.html

Thanks,

Mani Kumar K

[askdctm]

Hi Scott/Jitendra/Lokesh/Edubey/Mani,

Thanks a lot for your help.

[GK-AEM]

This link is not opening.Could you please provide correct link if you have.

I am seeing the similar issue.

[GK-AEM]

I am seeing similar issue where my servlet is calling and returning json file but my json is not able to be parsed and load the results.

I don't see any errors in error.log.

Any idea??

Thanks,

Kishore

[GK-AEM]

Got the solution!!

[iannovic]

Link is broken

[smacdonald2008]

HTL and AJAX -- Adobe Experience Manager Help | Creating an AEM HTML Template Language Component that posts data usi...