Tutorial :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?


Solution: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


Solution:2

This is what I use for adding a new post to the list:

success: function(data){    $("#posts-container").prepend(data).children().first().hide().show('slow');  }  

This assumes the added element is wrapped in a div and is first in the #posts-container.


Solution:3

I am using this

 $.post("yourdocument.php", {parameter:"caucana.com"}, function(data) {          $('#contiene_resultados').prepend(data);    });  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »