Refresh DOM with jquery after AJAX call

Question

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 functions that uses jquery's .post method to post. The post request goes to an php page which outputs html, I se jquery's html method to place the content on the page.

like so

function post(){
    $.post("lookup.php", {action: "find", area: area, stars: stars, amenities: amenities, state: $('#state').val()}, function(data){ 
        $("#details").html(data);
    });
}

I have hyperlinks to hotels which I like to use in a light box

<a class="hotel" href="http://google.com/search?btnI=1&amp;amp;q=Amerisuites+Northeast+Orlando+(Airport+MCO)"&gt;Amerisuites Northeast</a>

im trying to use jquery's fancy box but fancy box

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

but it doesn't seem to work, im guessing because jquery doesn't know the element it there? I've tried to use jquery live() method with little success, any help would be appreciated, thanks ahead of time

Answer 1

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.

Answer 2

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