How to Make Javascript and Jquery Selectors function after Content is Refreshed with AJAX

So today I had another really specific problem while working on followtheproject.com. For my setup I have a group of <a> elements that are targeted by a jQuery selector, like $("a#id"), that was capturing their click() events and performing some ajax requests instead of going to a link. The return data for the ajax request reloads all of the <a> elements. The problem is that these newly loaded <a> elements are no longer targeted by the Jquery selector!

After some searching I found an extremely easy answer to solve this. The secret lies in jQuery's .live() function: http://api.jquery.com/live/

syntax:

selector.live( event, handler(eventObject) )

By wrapping event calls in the .live() function you are ensuring that all elements that match the selector, both now and in the future, will be targeted. This is different from regular selector and event functions because those are only applied to current elements that match the selector.

Old code 

$("a#id").click( function(e){ STUFF } );

New code

$("a#id").live('click', function(e){ STUFF });

For the lazy, here is the link to all of Jquery's event handlers: http://api.jquery.com/category/events/

Easy Peasy. The link will not always be redirected to the jQuery click event through the live() function, even after AJAX reloads the <a> elements! I wonder why the developer's of Jquery don't just build this into the normal click() and other event functions. Any performance hits would likely be worth the extra functionality.

Detect where the scroll bar is with JQuery and provide visual cue to the user

I have a web page with a "display: fixed; z-index: 1; background: white" header at the top of the page. When I scroll down the body of my page slides behind the header. It works well but there is a problem:

• There is no indicator aside from the scroll bar that the page is not at the TOP and it is deceiving.

To fix this I decided to use some simple JQuery watch for when the page is not scrolled at the top and to shade the background of the header slightly.

$(document).ready( function(){
  $(documnet).scroll( function(){
    var scrollPosition = $(document).scrollTop();
    if (scrollPosition == "0"){
      //The page is scrolled to the top
      $('#header').css('background', 'white');
    }
    else {
      //The page is not at the top
      $('#header').css('background', 'gray');
    }
  });
});

The code fires whenever the page is scrolled and checks if it is at the top. If it is at the top, it sets the header background to white. If it isn't at the top it sets it to gray and is a good visual cue to visitors that they are not at the top of the page.

A popular on is to display a hidden div in a fixed position near the edge of the screen with the text "Scroll back to top". When that div is visible the page is obviously not at the top, and when it is clicked, it is expected to take you back up to the top.

Here is some sample code for the click event to that takes the screen back to the top:

$(document).ready( function(){
  $("#scrollmessagediv").click( function(){
    //scroll to the top of the page
    $(document).scrollTop(0);
    //hide the element since we are at the top now
    $(this).hide();
  });
});

There are lot of ways to get creative with scrolling and JQuery, hopefully this got you started!

Toggling Checkboxes in a Table with JQuery

I had a small problem tonight that was fun to solve. I have a table and in the first column of each row there is a checkbox. I want the checkbox to toggle when the row is clicked. This is easy to accomplish with some JQuery.

Here is a snippet of my HTML table:

    
    
Name
    
Size
    
Modified
  
       

    
    
Folder
    
1.0 KB
    
Dec. 28, 2011, 3:41 p.m.
  
    
    
This is a new folder for the new project
    
53 bytes
    
Jan. 3, 2012, 5:05 a.m.
  

ETC

And here is the accompanying JQuery:

$("tr").click(function(){
    var checkbox = $(this).children().children("input");
    checkbox.attr("checked", !checkbox.attr("checked"));
  });

The code finds the correct checkbox using the $(this) property provided by the event and the children() selector. Two children calls are necessary, first for the children of the TR, then for the children of the TD, this last one is specified to be the "input" child. The toggle is achieved by setting the "checked" attribute of the checkbox to the opposite of whatever it is currently set at, !$(checkbox).attr("checked");. Simple, love it!