How to get returned data from servlet with Jquery?

Question

I am currently learning jsp/servlet, and trying to make an online bookstore. Using jquery, I was able to send the GET request to the servlet. Upon success, it will reload the browseBookArea div with browseBookArea.jsp. What I don't understand is, this procedure causes infinite loop on my glashfish servet (it happens within the BrowseBookTag.java. I put a System.out.println there to check it).

Is there another way to get the data returned from servlet to Jquery, so I can do it properly? Setting variables in session is not a good way for this I think. I saw the example with jquery.get where we can get the response data.

  var currentCat = "all";
  $(document).ready(function(){
    $(".categoryItem").click(function(event){
         $("#browseBookArea").fadeToggle(100);
         currentCat = $(this).attr("id");
         $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:1});                               });    
   $("#browseBookArea").ajaxSuccess(function(){                               
         $(this).show(300);
         $(this).load("Components/browseBookArea.jsp");
    });

   $(".pagination").click(function(event){
         $("#browseBookArea").fadeToggle(100);
         var page = $(this).attr("id");
         alert(currentCat);
         $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page});
      });
});

Here is my browseBookArea.jsp:

<div id="browseBookArea" class="span-15 last">
    <%System.out.println("Back from servlet");
      Collection c = (Collection) request.getAttribute("booksFromCat");
      if (c == null) {
          Collection c1 = (Collection) session.getAttribute("booksFromCat");
          if (c1 == null) System.out.println("Books are null");
      }
    %>
    <myJavaTags:BrowseBookTag books="${booksFromCat}" pageSize="${pageSize}" >
        <c:if test="${not empty book1 }">
            <div class="span-7">
                    <center>
                        <img width="115px" height="115px" src='${book1.photoPath}.jpg'/>
                        <p>${book1.price}<br/><a>${book1.title}</a> <br/>${book1.authorName}<p>
                    </center>
            </div>
        </c:if>
        <c:if test="${not empty book2 }">
            <div class="push-1 span-7 last">
                <center>
                        <img width="115px" height="115px" src='${book2.photoPath}.jpg'/>
                        <p>${book2.price}<br/><a>${book2.title}</a> <br/>${book2.authorName}<p>
                </center>
            </div>
        </c:if>
    <hr class="space">
    </myJavaTags:BrowseBookTag>
    <hr class="space"/>
</div>

My BrowseBookTag:

 public void doTag() throws JspException, IOException{
//        if (books ==null){
//            admin = AdminBeanFactory.getAdminInstance();
//            books = admin.browseBook(cat);
//        }
        Iterator bookIt = books.iterator();
        JspContext jsp = getJspContext();
        int i = 0, count = 0;
        System.out.println("Total book size in browse tag: "+books.size());
        while (bookIt.hasNext() && i < pageSize){
            BookDTO b = (BookDTO) bookIt.next();
            if (count == 0){
                jsp.setAttribute("book1", b);
                if ((i+1) == pageSize){
                    jsp.setAttribute("book2", null);
                    getJspBody().invoke(null);
                }
                count++;
            }else{
                jsp.setAttribute("book2", b);
                getJspBody().invoke(null);
                count = 0;
            }
            i++;
        }
    }

One thing I don't understand: it seems you do the ajax call automatically after loading the document and, if the ajax call is successful, then you do a $(this).load("Components/browseBookArea.jsp"); that loads a new page (or is it the same one?) again in the window (I think $(this) at that moment is the document element)... I am not saying that this is wrong because there is some data missing, I just find it strange. — SJuan76
– SJuan76, Commented Apr 18, 2011 at 13:21
$(this).load("Components/browseBookArea.jsp"); refreshes the div #browseBookArea which is the div to be refreshed. The #browsebookArea is in the same browseBookArea.jsp. The ajax success just reloads that page (which contains only the div #browseBookArea) with the data in session from servlet. — Amumu
– Amumu, Commented Apr 18, 2011 at 13:26
When the site will let you, you should tick your answer as the accepted one so that it's obvious to others that your problem is solved. One thing, though, you should really avoid scriplets in JSP. Use the servlet API instead. (See Scriptlets Considered Harmful?) — Matt Ball
– Matt Ball, Commented Apr 18, 2011 at 14:49
I will be able to tick the answer in the next two days :( Thanks for the advice though. — Amumu
– Amumu, Commented Apr 18, 2011 at 16:47

Amumu · Accepted Answer · 2012-02-14 05:43:29Z

I found the culprit. It is:

$("#browseBookArea").ajaxSuccess(function(){                               
         $(this).show(300);
         $(this).load("Components/browseBookArea.jsp");
    });

Bad, bad, bad. This demonstrates that I didn't know the meaning of success method call. I've just realized that if I let the #browseBookArea div to load every time, it causes a successful operation, and then it will perform again which ultimately leads to recursion. Finally I got out of this pitfall. The correct thing should be:

$(".categoryItem").click(function(event){
      $("#browseBookArea").fadeToggle(100);
      var currentId = $(this).attr("id");
      $.get("GetBookFromCategoryServlet",{selectedCat:currentId, currentPage:1}, function(data){
             $("#browseBookArea").fadeIn(300); 
             $("#browseBookArea").load("Components/browseBookArea.jsp");                                  
             });
      });

I just need to define a successful handler after the GET request, and the successful handler must not be the div which invokes the operation.

Collectives™ on Stack Overflow

How to get returned data from servlet with Jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related