CODEWITHSUNDEEP
jqueryjsp
Amumu
Amumu

Reputation: 18552

How to refresh the same div in Jquery from two events from two different elements?

Here is the script:

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

I am making an online bookstore. The "browseBookArea" is the div where books will be displayed on the browser. Class ".categoryItem" is the category buttons. Whenever a category button is pressed, the books belong to that category will be retrieved through GET rerquest, and upon success, it will reload that area with returned books from servlet. That's what the $("#browseBookArea").ajaxSuccess function does.

Now I am doing the pagination. Essentially, the pagination is the same as category, except this time category is already known (the current category, which I declared as a global variable), and the page is retrieved from the page button when user pressed (if a category button is pressed, it is considered the first page and is set to 1).

The problem is, it only works the first time when I press one of the category buttons, or one of the page buttons. After the ajax success function is invoked, the page buttons won't work anymore. I put an alert there just to make sure. It won't pop up anything.

All the ".pagination" buttons are inside the "#browseBookArea" div.

Upvotes: 0

Views: 997

Answers (2)

mu is too short
mu is too short

Reputation: 434635

Your problem is that this:

$(this).load("Components/browseBookArea.jsp");

replaces the contents of #browseBookArea and thus you lose the buttons their bindings. You can either use the callback for load to bind click handlers to the new buttons or you can use live for the buttons:

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

or delegate for the buttons:

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

There are some caveats with delegate and live, review the documentation to make sure they won't apply to your specific case before you use them.

Upvotes: 1

beatgammit
beatgammit

Reputation: 20215

Are you removing elements from the DOM? I think that when you do that, you event handlers get removed as well.

You will probably want to use delegate instead, because events that are bound with delegate persist for all elements with a common selector, regardless of when they are added.

In the background, delegate basically does a JavaScript "addEvent", whereas click does an "onclick" event. The onxxxx events are bound to an element, whereas events added with addEvent are bound to a selector (class, id, etc). I think this will fix your problem.

Note:

You should always be using delegate, just in case something like this happens.

Upvotes: 1

Related Questions