Hack hack hack...

An open journal-- some of it written for you, but most of it is for me.

Jquery-air-intermediate

Retriving the href
1
2
$('#tabs ul li:last a').attr('href')
$('#tabs ul li:last a').data('flights') //this would be from an html5 data tag
  • event delegation-
  • it can be method chained and performs faster than live
  • ’$(document).delegate’

Don’t forget the brackets on the selector!!

eq selector

eq(element#) - a selector
1
$('ol.econ­omy-class li.ro­w:eq(1) ol li:eq­(3)').html­()
1
2
3
$('ol.econ­omy-class li.ro­w:eq(1) ol li:eq­(3) a').a­ttr('href'­);
// to access the href you need to specify the a tag
$('ol.econ­omy-class li.ro­w:eq(1) ol li:eq­(3) a').d­ata('seat'­);
1
2
3
4
5
$('div.seating-chart a.available').click(function (event){
  event.preventDefault();
  $('a.available').removeClass("selected")
  $(this).addClass("selected")
});

Bind Element

  • jQuery bind() function is used to attach an event handler to elements, while the unbind() is used to detached an existing event handler from elements.
1
2
3
$('div.seating-chart a.available').bind({
  click: selectSeat
});
  • This allows you to list multiple events for each element. NOTE the different syntax, this becomes like a MAP now (very similar to a hash)

Unbind Element

  • Let’s imagine the following scenario…
  • The user clicks on a “vote” button.
  • Some AJAX calls are performed.
  • After a successful AJAX call you setup a cookie to deny further votes from this machine.
  • So one possible solution is to unbind the click event…

  • Have something happen on a click event, but only once! Unbind the click handler after the element has been clicked once.

Once and only once…
1
2
3
4
$('#my-selector').bind('click', function() {
       $(this).unbind('click');
       alert('Clicked and unbound!');
});
Jquery Air
1
2
3
4
5
6
7
8
9
function selectSeat(e) {
  e.preventDefault();
  $('.selected').removeClass('selected');
  $(this).addClass('selected').unbind("click", selectSeat);
  $('#seatSelected').text($(this).data('seat'));
  $('#confirm-seat').show();
}

$('div.seating-chart li a.available').click(selectSeat);

Live Event

$('a.confirm-upgrade').live("click", confirmUpgrade);

  • Bind binds to the event one time
  • Live will look for that event now or in the future and will catch it and call the right function

Delegate

Delegate > live
1
2
3
4
5
6
$('#flights a').live("click", selectFlight);
// is the same as
$(document).delegate("#flights a", "click", selectFlight);
// this is too general. It would be better if you just checked inside a specific element
$(#tabs div).delegate("#flights a", "click", selectFlight);
// check inside the element rather than the entire page
  • Delegate can be method chained and it is more performant

Ajax

  • Video2
  • $.get and $.ajax are alternatives. $.ajax is slightly more
  • cache: false option ensures that your browser won’t cache the html for every request
  • Error handling
  • Loading div - call beforeSend the AJAX invoked then hide it in the complete:
  • If it returns successfully - success: and if not - error:

Mistake I keep making

1
2
3
4
5
6
7
8
9
10
function fetchFirstClassConfirm() {
  var flight_id = 815;
  var url = '/flights/' + flight_id
  $.ajax(url, {
    success: function(result) {
      $('#confirm-first-class').html(result).show();
      //I have a big problem missing the '' in the selector!
    }
  });
}

Comments