Refresh DOM With Jquery After AJAX Call

I'm working on a new project http://www.hotwirerevealed.com which reveals / identifies hotels on hotwire.com. After inputting a state and a destination I have a javascript function

Solution 1:

The quickest way I'd do it is to add the livequery plugin to the page,
and then instead of your:

$(document).ready(function(){
  $(".hotel").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'type'              : 'iframe'
  });
});

do this:

$(document).ready(function(){
  $(".hotel").livequery(function(){
    $(this).fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'type'              : 'iframe'
      });
  });
});

Solution 2:

Just to be clear, $("#details").html(data) loads the "a" tags right?

Last time I checked, fancybox() requires the element to be already existing on the DOM. When $(document).ready fires, the $(".hotel") probably doesn't exist yet. You can move the fancybox setups after $.post like:

function post(){
  $.post("lookup.php", 
    {action: "find", area: area, stars: stars, amenities: amenities, state:
      $('#state').val()}, 
    function(data) { 
      $("#details").html(data);
      // bind fancy box
      $(".hotel").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'type'              : 'iframe'
      });
  });
}

You might have to watch out for calling fancybox to elements that have been called with fancybox already. There might be some complications there.