AJAX, JS and Fancybox, how to make it work properly?

Question

I'm making a small website using ajax, mainly by curiosity.

I wan't to use Fancybox to display images in an ajax content.

The thing I'm currently doing is very simple, I have a main html page, and hyperlinks just change the content of a single div... for example :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="js/ajax.js"></script>

    <link rel="stylesheet" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  </head>

  <body>

    <div>
      <a href="javascript:void(0)" onclick="xml_doc('ajax', 'ajax.html')"> test </a>
    </div>

    <div id="ajax">
    </div>

  </body>

</html>

and the basic js code :

function xml_obj()
{
    var xmlhttp;

    // IE7+, Firefox, Chrome, Opera, Safari
    if (window.XMLHttpRequest)
    return new XMLHttpRequest();

    // IE6, IE5
    else
    return new ActiveXObject("Microsoft.XMLHTTP");
}

function xml_cfunc(div, xmlhttp)
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    div.innerHTML=xmlhttp.responseText;
}

function xml_doc(id, url)
{
    var xmlhttp = xml_obj();
    var div = document.getElementById(id);

    xmlhttp.onreadystatechange = function()
    {
    xml_cfunc(div, xmlhttp);
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

the content of the ajax.html would be a single href for example :

<a id="single_image" href="image.png"><img src="thumb.png" alt=""/></a>

Now i have to put the fancybox call somewhere :

$('a#single_image').fancybox();

But I just can't find out where... If I put it in the html content it won't be evaluated.

So when I click on the thumbnail, it will just send me to the full size image (with Uncaught TypeError: Cannot call method 'appendChild' of undefined, and Resource interpreted as document but transferred with MIME type image/png.).

All my research ended up on an opposite problem (call ajax content within fancybox).

Now my questions are:

Is this a correct way to use ajax?
How can I do so the ajax content can contain Fancybox links?

Thanks much, Pierre-Luc

Answer 1

Got it working by starting fancybox directly in the ajax callback :

function xml_cfunc(div, xmlhttp)
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    div.innerHTML=xmlhttp.responseText;
    $("a#single_image").fancybox();
    }
}

The drawback is that it will be proceed in each of ajax calls, but this certainly can be changed. The important is that the javascript has to be evaluated once the DOM is ready.

Note that I know use JQuery.ajax, but the result is the same, for example :

$.get(url,
  function(data) {
      $('#content_id').html(data);
      $("a#single_image").fancybox();
  });

Answer 2

~~You could hook an event listener to the change event of the div.~~

Just realized that there is no change event for divs. I'd delete the answer altogether but the comment from the OP might help someone else.

AJAX, JS and Fancybox, how to make it work properly?

Question

2 answers

solution1
3 ACCPTED 2011-05-09 12:54:55

solution2
0 2011-05-07 11:26:59

AJAX, JS and Fancybox, how to make it work properly?

Question

2 answers

solution1 3 ACCPTED 2011-05-09 12:54:55

solution2 0 2011-05-07 11:26:59

solution1
3 ACCPTED 2011-05-09 12:54:55

solution2
0 2011-05-07 11:26:59