Prepending and animating text loaded via AJAX with jQuery.

Question

Old hand with Prototype, new to jQuery, and writing a simple app to get a feel for the framework (and because I want to use it). I've got an HTML fragment that I load via AJAX, and I want to stick this at the top of a div, with a slide-in transition animation.

This bit works, and does the prepending bit:

// Get the HTML fragment and stick it at the top of the containing div.
$.post("/create_new_thing", function(data) {
    $('#container_div').prepend(data);
});

What I'd like to do, and can't figure out, is animate the newly added HTML fragment with a show() effect.

Any suggestions?

Answer 1

Try something like this...

$('#div').load('file.html').fadeIn("slow");

The load function is better suited to your needs, as it's main purpose is to load HTML from a remote file and inject it into the DOM.

Using the "post" function is better for loading a remote page using a POST request (posting data via a form and returning dynamic data based on your post request).

See below...

$.post("file.php", { name: "superuntitled", time: "2am" },
function(data){
  $('#div').fadeIn("slow").append(data);
});

jQuery has no support yet for "PUT" requests. So if you really need to use a put request, I can recommend extending the jQuery functionality with a custom function that adds support for "PUT". That said, there are some work arounds! See here for more details! ... http://homework.nwsnet.de/news/9132_put-and-delete-with-jquery