Ajax call to servlet in sightly | Community
Skip to main content
A
askdctm
Level 9
February 11, 2016
Solved

Ajax call to servlet in sightly

  • February 11, 2016
  • 16 replies
  • 11357 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Mani_kumar_

    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

    16 replies

    A
    askdctmAuthor
    Level 9
    February 11, 2016

    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.

    A
    askdctmAuthor
    Level 9
    February 11, 2016

    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

    Jitendra_S_Toma
    Jitendra_S_Toma
    Level 10
    February 11, 2016

      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
    Jitendra_S_Toma
    Level 10
    February 11, 2016

    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
    smacdonald2008
    Level 10
    February 11, 2016

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

      edubey
      edubey
      Level 10
      February 11, 2016

      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
      Lokesh_Shivalingaiah
      Level 10
      February 11, 2016

      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 !

      A
      askdctmAuthor
      Level 9
      February 12, 2016

      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_
      Community Advisor
      Mani_kumar_Community AdvisorAccepted solution
      Community Advisor
      February 12, 2016

      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

      Show more replies
      Terms & ConditionsAccessibility statement

      Loading footer...