how to capture an event on loading external html via AJAX

Question

Not full-time javascript dev. I'm loading some external html via AJAX / JSON as a string and then placing it in the DOM.

The json will look like this:

  {
    user_ids:[2,4,7],
    html:"<div class='show-fade-in' >here is text</div>"
   }

I'd like to give the user some feedback by animating in the effect so that they will notice it rather than having it just appear which might make them miss it. I would like to use a technique similar to this: http://jsfiddle.net/SO_AMK/a9dnW/3/ linked to via https://stackoverflow.com/a/11681331/152825 . My question is how would I capture the event of loading the external json and putting into the DOM so that we can start the animation in the element 'show-fade-in'.

I'll be adding the html via something like:

so:

$.get('/arc/external-info',function(){},'json'
).done(function(r){
   $('#item-editing').append(r.html);
    // EDIT #1 this doesn't word
    $( ".show-fade-in" ).fadeIn( "slow", function() {
      alert('fade-in complete');
    });

})

thx for any help

Is there a reason you can't do this in the `.done()` callback? — Jason P, Jan 29 '14 at 18:07
the `.done()` function is called once the ajax call has been completely ***done*** — Gabriele Petrioli, Jan 29 '14 at 18:09
@timpone, do you mean that you want to fade in the text once it has been appended to `item-editing`? — Andy, Jan 29 '14 at 18:10
@Gaby aka G. Petrioli I added the fadeIn code above in the done statement that I had tried but didnt' work. Sorry - I should have had it in there in original question — timpone, Jan 29 '14 at 18:31
your code would work if you had a css rule `.show-fade-in{opacity:0}` so on appending it would be hidden and the code would show it.. — Gabriele Petrioli, Jan 29 '14 at 18:34
thx @GabyakaG.Petrioli are you sure the opacity:0 will work? I think I need it to be like {display:hidden} I'd trust you more than myself but I am just trying to understand. I created this jsbin: http://jsbin.com/oqesiyiJ/2/ thx — timpone, Jan 29 '14 at 18:44
@timpone `display:none` should work if the opacity setting doesn't. (it's `display:none` or `visibility:hidden`) — Jason P, Jan 29 '14 at 18:46
@timpone, you are right .. you should use `.animate({opacity:1},'slow');` instead.. or `display:none` as Jason noted. — Gabriele Petrioli, Jan 29 '14 at 19:04

score 1 · Accepted Answer · answered Jan 29 '14 at 18:08

1

Simple fade in

There is noo need to know to know when it's done if you use keyframes. As soon as you append the element it does the animation

div.myAjax{
 -webkit-animation:x 700ms ease;
 opacity:1;
}
@-webkit-keyframes x{
 0%{opacity:0;}
 100%{opacity:1;}
}
 /*add -webkit,-moz,-ms,-o for more support.*/

DEMO

http://jsfiddle.net/rU9yN/

If you have any questions just ask .. if i misunderstood your question tell me so i reelaborate the code.

answered Jan 29 '14 at 18:08

cocco

16,442
7
62
77

thx, let me test this. this would be simpler than using jQuery and binding – timpone Jan 29 '14 at 18:12
jquery is made for ie6 .. yes. – cocco Jan 29 '14 at 18:12
+1, but add the standard properties as well (*not just the vendor-specific ones*) for better support ;) – Gabriele Petrioli Jan 29 '14 at 18:14
there is alot of stuff that comes out every day .. i don't think jquery can stand that.ppl should understand that jquery is not a language . but a library. that should help. there is a big performance impact using jquery atm especially if you want that your users can see the page on a mobile device.. in that case jquery is just a big problem.also ie 10 is standardized now.and mobile devices use webkit. ios & android. we are in 2014. – cocco Jan 29 '14 at 18:19
@cocco are you talking to me ? :) – Gabriele Petrioli Jan 29 '14 at 18:24
yeah i was thinking you talk about jquery.what proprieties?there is standard css3 & webkit. + the prefixes are listed.what you want me to add? – cocco Jan 29 '14 at 18:24
.. you have not added the standard ones.. just the `-webkit-` ones. The standard ones are `animation:...;` and `@keyframes x{...}` – Gabriele Petrioli Jan 29 '14 at 18:29
because that works on most devices. chrome safari ios & android.standard has no prefixes.sry have to run now edit later. – cocco Jan 29 '14 at 18:30
I know standard has no prefixes.. I just believe that example code should be with the standard properties (*you know... being the **standard** ones*) and then add the disclaimer, as you did, about the vendor specifics.. – Gabriele Petrioli Jan 29 '14 at 18:37
oh.. and the vendor prefixes have nothing to do with devices.. it has to do with browsers.. my android devices use firefox mostly.. – Gabriele Petrioli Jan 29 '14 at 18:39

how to capture an event on loading external html via AJAX

1 Answers1