Expand my Community achievements bar.

SOLVED

Ajax call to servlet in sightly

Avatar

Level 9

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

16 Replies

Avatar

Level 9

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.

Avatar

Level 9

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 sad

Avatar

Level 9

  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.

 

Avatar

Level 9

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

Avatar

Level 10

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

Avatar

Level 10

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

Avatar

Level 10

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 !

Avatar

Level 9

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.

Avatar

Correct answer by
Community Advisor

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

Avatar

Level 9

Hi Scott/Jitendra/Lokesh/Edubey/Mani,

Thanks a lot for your help.

Avatar

Level 9

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

I am seeing the similar issue.

Avatar

Level 9

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