​

// Try wrapping your 'model' in this case with a function

// so you can abstract away any knowledge about the server

// from your UI.

​

​

// Instead of using the success handler, checkout

// The $.Promise API. jQuery.ajax returns promises

// so we can use them to our advantage.

/* 

function getData(data) {

  return $.ajax({

    url: '/ajax.aspx',

    data: data

  });

} */

​

// In this case though, we're going to swap out ajax 

// for an offline example. 

function getData(data) {

  var dfd = $.Deferred();

  setTimeout(function() {

    dfd.resolve("it works! " + data);

  }, 1000);

  // $.Deferred makes promises just like $.ajax!

  return dfd.promise();

} 

​

// We can reduce our event handler down to one

// function, by inspecting the `type` member of the event object.

function onHover(ev) {

  var el = $(this);

  var target = $('#' + el.data('popbox'));

​

  if (ev.type === 'mouseenter') {

    // Do code to setup API call

    target.text('loading').show();

    // Do API call

    getData('33')  //= returns a promise

    // Then, do code to handle API call

    .then(function(data) {

      target.html(data);

    })

    // If it fails, do something else

    .fail(function(err) {

      console.log(err);

    });

  }

  // mouseout

  else {

    target.hide().empty();

  }

}

​

// Use `on()` instead of deprecated $.hover syntax,

// which is just sugar for the mouseenter and mouseout events.

​

// Instead of attaching to a specific set of element(s) (a.hover)

// we're binding this function to the body, and listening 

// for events to bubble up, filtered by selector a.hover

// This is much more performant when dealing with many a.hover elements.

$('body').on('mouseenter mouseout', 'a.hover', onHover);

​