Cannot use divs from success function in AJAX

Question

I do not know why this will not work for me.

}).success(function(data){ if(data.status == 'success'){ // $("#useravatar").empty(); for(i = 0;i < data.id.length; i++){ $("#useravatar").prepend('<div id="av'+data.id[i]+'" class="avatar">'+data.avatar[i]+'</div>'); var dropDiv = $('#av'+data.id[i]); // Code from here dont work. No error. tried alert(data.id[i]); and is fine. dropDiv.css({ left: 130, top: -190, opacity: 0, display: 'inline' }).animate({ left: 5, top: 10, opacity: 1 }, 7000, 'easeOutBounce'); } } }); 

If I use only this code:

  var dropDiv = $('#useravatar'); dropDiv.css({ left: 130, top: -190, opacity: 0, display: 'inline' }).animate({ left: 5, top: 10, opacity: 1 }, 7000, 'easeOutBounce'); 

will work with this div.

My question is why the first divs do not work? How can I make it release a div with animation?

EDIT:

I tried all the above code in the same file: but it did not work either (the second function is not called or does nothing).

  function getchatuser() { $.ajax({ type: "POST", url: "../users/process.php", data: {getchatuser: "getchatuser"}, cache: false, dataType: 'json', async: false }).success(function (dat) { if (dat.status == 'success') { //$("#useravatar").empty(); for (i = 0; i < dat.id.length; i++) { $("#useravatar").prepend('<div id="av' + dat.id[i] + '" class="avatar">' + dat.avatar[i] + '</div>'); dropdivs(dat.id[i]); } } }); } function dropdivs(idDiv) { // alert(idDiv); ----------> just to try this and it works got 112 dropDiv = $('#av' + idDiv); dropDiv.css({ left: 130, top: -190, opacity: 0, display: 'inline' }).animate({ left: 5, top: 10, opacity: 1 }, 7000, 'easeOutBounce'); } 

Answer 1

• demo http://jsfiddle.net/5fKJf/4/
  • updated code to show bounce effect proposed by bdrx
  • updated code to use the object, + fancy avatar;)

  var dat = { id: [1, 2, 3, 4], avatar: ['https://cdn2.iconfinder.com/data/icons/male-users-2/512/1-32.png', 'https://cdn2.iconfinder.com/data/icons/male-users-2/512/14-32.png', 'https://cdn2.iconfinder.com/data/icons/male-users-2/512/8-32.png', 'https://cdn2.iconfinder.com/data/icons/male-users-2/512/2-32.png'] }; for (i = 0; i < dat.id.length; i++) { $("#useravatar").prepend($('<div id="av' + dat.id[i] + '" class="avatar"><img src="' + dat.avatar[i] + '" alt="" /></div>').css({ left: 130, top: -190, opacity: 0 }).delay(i * 50).animate({ left: 5, top: 0, opacity: 1 }, 1500, 'easeOutBounce', function () { })); } 

Answer 2

Try the following:

 var dropDiv = $('<div id="av' + data.id[i] + '" class="avatar">' + data.avatar[i] + '</div>'); $("#useravatar").prepend(dropDiv); 

There is no need to use the jQuery selector to search for the item you created earlier. The code above should be a little faster.

Answer 3

This part of the original post may be released.

 // `dat` may be `dat` (`data`) `response` from `request`, // if `dat` does not have `status` property, ieg, `dat.status`, // within `dat` ( `json` `object` ? ), // `if` `condition` may return `false`, // not continue to pieces inside `if` `{}` .success(function (dat) { if (dat.status == 'success') { } }) 

Try this (Figure)

 function getchatuser() { $.ajax({ type: "POST", url: "../users/process.php", data: {getchatuser: "getchatuser"}, cache: false, dataType: 'json', async: false }) .done(function(data, textStatus, jqxhr) { // `data` : `data` returned, ( `json` `object` ? ) // `textStatus`, `string`, ieg, `success` // `jqxhr`, `object` // if `textStatus` === `success` if ( textStatus === "success" ) { // `console.log()` `dat`, `textStatus`, `jqxhr` // returned from `request` console.log(data, textStatus, jqxhr); // below pieces not addressed, // adjust, continue, based on `response` // $("#useravatar").empty(); // for (i = 0; i < data.id.length; i++) { // $("#useravatar").prepend('<div id="av' + data.id[i] + '" class="avatar">' + data.avatar[i] + '</div>'); // dropdivs(data.id[i]); // }; }; }); }; getchatuser() 

jsfiddle http://jsfiddle.net/guest271314/nqe44/

See http://api.jquery.com/jQuery.ajax/

Answer 4

How can I do this to make the div fall with the animation?

I updated your example in jsFiddle to test the script.

http://jsfiddle.net/ywYyR/6/

(Press the RUN button again after opening for the first time)

 function getchatuser() { $.ajax({ type: "POST", url: "../echo/json/", data: { json: '{"id":[3,4],"avatar":["https://cdn2.iconfinder.com/data/icons/male-users-2/512/8-32.png","https://cdn2.iconfinder.com/data/icons/male-users-2/512/2-32.png"], "status" : "success"}', delay: 1 }, cache: false, dataType: 'json', async : false, success: function (dat, textStatus) { console.log(dat); if (dat.status == 'success') { //$("#useravatar").empty(); for (i = 0; i < dat.id.length; i++) { $("#useravatar").prepend('<div id="av' + dat.id[i] + '" class="avatar"><img src="' + dat.avatar[i] + '" alt="" /></div>'); dropdivs(dat.id[i]); } } }, error: function(jqXHR,textStatus,errorThrown){ console.log(textStatus); console.log(errorThrown); } }); } 

This fiddle does the following:

• at the beginning there are 2 users.
• make ajax call.
• After the successful completion of the ajax call, the data contains 2 new users.
• Add 2 users to HTML and animate them.

I recommend a double check:

• div #useravatar exists when your request returns.
• the .avatar class has a position value other than static .
• You have included the jQuery lightweight library so that easeOutBounce is available.

Answer 5

Instead of pre-adding an element by selecting it, you can simply use prependTo() and do both on the same line:

 var dropDiv = $('<div id="av'+data.id[i]+'" class="avatar">'+data.avatar[i]+'</div>').prependTo("#useravatar"); 

Answer 6

Have you tried delegating an event for a dynamic div?

https://api.jquery.com/delegate/