11 Replies Latest reply on Dec 16, 2012 11:50 PM by Veena_07

    How to implement Ajax

    Raja_Raju_Learner Level 1

      Hi All,

       

      I need to implement Ajax functionality in my component.

       

      The requirement is,

      1. On clicking on a button Java servlet needs to be invoked.

      2. In the servelt, need to access CRX nodes and store a particular value.

      3. Back in the component, i need to retrieve this value(this can be doneby accessing the node value).

      4. Page should not be refreshed.

       

      How can i implement this? any sample code will be helpful to understand the ajax with sevlet implementation.

       

       

      if there are any other possiblities, kindly let me know.

       

      It is very urgent and needs to implement is as soon as possible.

       

      i am in very needy situation.

       

      Any help will be really helpful.

       

      Thanks a ton in advance.

       

      Regards,

      Raja R

        • 1. Re: How to implement Ajax
          Ryan Lunka Level 3

          CQ has a version of jQuery included.  Look at the jQuery documentation for how to perform AJAX GET and POST requests.  That's one way you could handle it.  CQ also has some built in JS objects for doing this type of thing.  If I remember correctly the CQ.HTTP object is what I'm thinking of.  There's plenty of documentation and examples out there on how to do an AJAX request with JavaScript.

          • 2. Re: How to implement Ajax
            Raja_Raju_Learner Level 1

            Hi Ryan,

             

            Thanks for your reply. I have used Ajax with java script for normal web application.

             

            But i would like to use it with CQ5.

             

            On clicking on the button,i could invoke ajax call. but i am not able to associate the url of the ajax to a servlet.

             

            after connecting to servlet i need to access the crx nodes to store values.

             

            kindly help me for this.

             

            any help is appreciated.

             

            Thanks.

            • 3. Re: How to implement Ajax
              Ryan Lunka Level 3

              Assuming your user session (including an anonymous one) is authenticated correctly, you can just retrieve content via URI to specific resources.  For example, http://localhost:4502/content/geometrixx/en/products/jcr:content/par.json returns the property definition of the paragraph system as JSON.  Or http://localhost:4502/content/geometrixx/en/products/jcr:content/par/text.html returns the result of the servlet that the /par/text resource returns (in this case /libs/foundation/components/text/text.jsp is what gets invoked).  Make sense?

              • 4. Re: How to implement Ajax
                Ryan Lunka Level 3

                This link has some info on how to create URLs for Apache Sling applications (like CQ5).  http://dev.day.com/content/ddc/blog/2008/07/cheatsheet.html

                • 5. Re: How to implement Ajax
                  Raja_Raju_Learner Level 1

                  Hi Ryan,

                   

                  I could able to understand that, the seletors are mating to the URI and then conten is retrieved,

                   

                  My issue is,

                   

                  Assume , this is my component.jsp
                  <input type="button" id="hello-world2" value="Button" onclick="fun()"/>

                  <script type="text/javascript">
                  function fun(){

                             alert("inside fun"); 
                                      $.ajax({ 
                               
                                  url:'/apps/rating',          
                                  type:"POST",
                                  success: function() {
                                           
                                         alert("success");   
                                
                                         },
                                  error: function() {
                                                         alert("error");   
                                         }
                                    }); 
                             
                           }

                  </script>

                   

                  2.  on clicking on the Button, i need to invoke a servlet,  where i need to access the node values and store them in another crx node.

                   

                  am i maknig sens? please let me know if you need more information

                  • 6. Re: How to implement Ajax
                    MarcelBoucher Adobe Employee

                    You can refer to my blog post on building custom components. The second part of the series focuses specifically on implementing AJAX call back to CQ

                    http://blogs.adobe.com/mtg/2011/11/building-components-in-adobe-cq5-part-2-a-tutorial-on-j query-ajax-and-sling.html

                    • 7. Re: How to implement Ajax
                      Raja_Raju_Learner Level 1

                      Hi Marcel,

                       

                      I have gone through your blogs already. i am missing a point here.

                       

                      How can i make my ajax to hit the .post.jsp page?

                       

                      and one more query is that, how can i access the crx nodes inside the post.jsp?

                       

                      any sample for this will be really helpful.

                       

                      kindly help to implement my first ajax implementation with CRX.

                       

                      Thanks.

                      • 8. Re: How to implement Ajax
                        MarcelBoucher Adobe Employee

                        They key is the baseURL variable in the client-side javascript

                        var baseURL = "<%= currentNode.getPath() %>";

                         

                        You will notice that I set the url property of the flexigrid component to:

                        url: baseURL + '.json',

                         

                        What this accomplishes is set the AJAX callback url to something like:  /content/yoursite/par/yourcomponent.json

                         

                        Now, because most AJAX callbacks execute a POST method (like in your example), you need to create a POST handler script that will be used by Sling. Let's say your component is located in /apps/myapp/components/mycomponent, then you create a new script in this location with the following name: yourcomponent.json.POST.jsp. because your callback url is requesting .json as the extension, that will match the first selector in the filename (.json). Because you are executing a POST method, then that will match the second operation in the filename (.POST).

                         

                        That's where the magic happens. The yourcomponent.json.POST.jsp becomes your callback "servlet" as you called it.

                         

                        Hope this helps.

                        • 9. Re: How to implement Ajax
                          Raja_Raju_Learner Level 1

                          Hi Marcel,

                           

                          That’s a great information. Thanks for that.

                           

                          I tried follow your instruction.

                           

                          1.       When I used "<%= currentNode.getPath() %>"; , it showed me null pointer exception. currentNode is null here.

                           

                          2.       I have hard coded the url as apps/component/mycomponent.json.POST.jsp.

                           

                          3.       The ajax query is success.

                           

                          4.       But in the mycomponent.json.POST.jsp, I am trying to access the nodes through the following code,

                          <%

                          Session session1 = resourceResolver.adaptTo(Session.class);

                          Node node = session1.getNode("/content/pageweb/samplepage/jcr:content");

                          int likesCountVal = 0;

                           

                          if(node.hasProperty("likesCount")){

                              likesCountVal = Integer.parseInt(node.getProperty("likesCount").getString()) + 1;

                              node.setProperty("likesCount",new Integer(likesCountVal).toString());

                               node.save();

                               out.println("Likes count " + node.getProperty("likesCount").getString());

                          }else{

                              node.setProperty("likesCount","0" );

                              node.save();

                          }

                          %>

                           

                          5.       But it is not working. I am trying to set a property named “likesCount”. But it is not creating.

                           

                          Could you please  help me in this?

                           

                          Sorry to troubling you much. As I am learning this, getting these kind of errors.

                           

                          Thanks in advance.

                           

                          Regards,

                          Raja R

                          • 10. Re: How to implement Ajax
                            Ryan Lunka Level 3

                            If you component (the one referenced by "currentNode") is included programatically, it may not represent an actual node in the JCR.  This is called a SyntheticResource and is likely why "currentNode" is null.  I think resource.getPath() should return what WOULD be the node path location, regardless of whether the resource is synthetic.  This could be your issue with "currentNode".

                             

                            You don't want to make a request to your /apps location.  That would be making a request to a source code file.  You want to make a request to the URI of a resource with a resourceTpe of "apps/components/mycomponent", so that Apache Sling can resolve to the correct servlet implementation.  Like I said in my private message, review how Apache Sling works.  I think that is your challenge, not "how to use AJAX" in CQ.

                            • 11. Re: How to implement Ajax
                              Veena_07 Level 3

                              Hi raja

                               

                               

                                  Have u got solution for this requiremnt. Am having a same requirement.

                               

                               

                              Thanks

                              veena