Jquery Event onChange for Div

Question

I have a page with the following two divs:

<div id="searchResults">
</div>

<div class="postSearchOptions" style="display: none;">
</div>

Is there any way that I can make the "postSearchOptions" div appear when the "searchResults" div is updated by an AJAX call? I don't control the AJAX calls and I want to detect any change in the "searchResults" div.

I tried writing the following JQuery code, but then realized that it requires Jquery 1.4 and I only have 1.3:

$("#searchResults").live("change", function() {
    $(".postSearchOptions").css("display", "inline");
});

Is there any way to catch the event of the searchResults div changing using either standard JavaScript or Jquery 1.3? Thanks!

Answer 1

I don't think the onchange event will fire if you are programatically changing the innerHTML. Why don't you just show the Post Search options upon receiving those change i.e. why don't you include it as the last line in your ajax success method.

HTH

Answer 2

If the AJAX calls are made using jQuery, you could call handle the global ajaxComplete event and run your code there.

Answer 3

You could use setInterval to watch it, but as others have said it would be nicer to detect the change in the ajax callback. Here's an sketch of what a plugin would look like to "watch" a node, like you're trying to do with live:

jQuery.fn.watch = function() {
  this.each(function() {
    var original = $(this).html();
    setInterval(function() {
       var newHtml = $(this).html();
       if (newHtml != original) {
         $(this).trigger('change');
         original = newHtml;
       }

    }, 500);

  } );
}