What's wrong with my ajax function for fetching images?

Question

I’m polling S3 every 5 seconds for an image. My polling is successful and I can see it GETs the URL with the image in web inspector. But the function inside of the done() isn’t executing (I can't see anything logging to console):

  (function poll() {
    setTimeout(function () {
      userId = $('#photo').data('user-id');
      photoPath = $('#photo').data('photo-path');
      $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'http://s3.amazonaws.com/my_bucket/user-photos/'+userId+'/original/'+photoPath,
        done: function (data) {
          console.log(data);
          $("#photo").append(data);
        },
        complete: poll
      });
    }, 5000);
  })();

What am I doing wrong?

Do you think $("#photo").append(data) will show the image? — Popnoodles
– Popnoodles, Commented May 31, 2014 at 14:57
setTimeout makes it once with delay of 5 seconds , you need setInterval to make it every 5 seconds — Majed DH
– Majed DH, Commented May 31, 2014 at 15:17
@MajedDH if you look, the function is being called in done() - this is the correct way because the image may take a short time to load and eventually setInterval will interfere with its previous iterations. — Popnoodles
– Popnoodles, Commented May 31, 2014 at 15:20

Popnoodles · Accepted Answer · 2014-05-31 15:21:35Z

1

You're asking for dataType: 'json' but you won't get that back because the server is sending an image.

Are you wanting to show the image in $('#photo')?

 (function poll() {
    setTimeout(function () {
      console.log('polling');
      userId = $('#photo').data('user-id');
      photoPath = $('#photo').data('photo-path');
      $('<img>').on('load', function(){
          $('#photo').empty().append(this);
          poll();
      }).prop('src', 'http://s3.amazonaws.com/my_bucket/user-photos/'+userId+'/original/'+photoPath);
    }, 5000);
  })();

Demo (with image path replaced by jsfiddle logo)

edited May 31, 2014 at 15:21

answered May 31, 2014 at 15:02

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

What's wrong with my ajax function for fetching images?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related