image in <li> does not get updated after changing data-img-src

[abhayastudios]

Update - I created a fiddle with simplified code at: http://jsfiddle.net/vSv6k/6/

I am using this lovely plugin to show thumbs of image objects. To speed up the process and show the user a complete list immediately, I am initially generating the imagepicker for all objects with a place holder image and only then replace the thumb one by one. The problem is that after updating the data-img-src by jquery and re-init of imagepicker the select option does contain the correct data-img-src but the list item still contains the placeholder (except for the first object which displays with the correct image instead of the placeholder). Any ideas how to solve this?

This is what I am doing:

First generate initial imagepicker with placeholders:

          $.each(photos_list, function(key, photo ) {
            // add entry to imagepicker with placeholder thumb
              $('#imagepicker').append(
                $("<option>" , {
                  text: photo.name,
                  value: photo.object,
                  'data-img-src' : 'http://placehold.it/100x100&text=Loading+Image'
                })
              );

Then in async.queue replace thumbs one by one:

          // replace placeholder thumb by real thumb
          $('#imagepicker option[value="'+photo.data.object+'"]').attr('data-img-src','data:image/jpeg;base64,'+response);
          // update imagepicker every 10 images
          if (thumbcount%10==0) {
            $("#imagepicker").imagepicker({
              hide_select: true,
              show_label: true
            });
          }

Of course I also call re-init of imagepicker at the drain event of the queue so it will display also the last images.

If I do the same but instead start with an empty list and add select options one by one with the final thumb it works fine.

[rvera]

Thanks for this, I'll take a look.

[castler]

So I've had a similar error.

I don't know why we have this kind of behavior, but it looks like that the elemens which are manipulated aren't manipulated in the DOM. So the Image Picker thinks that nothing has changed.

You can fix this by using the event manager.

See http://jsfiddle.net/vSv6k/12/

[rvera]

Super late to the party, this is a jQuery issue. jQuery only parses the data once, after that you need to modify the data directly instead of the attributes, example here

http://jsfiddle.net/vSv6k/37/

ie, do this:

$('#imagepicker option[value="1.jpg"]').data('img-src', 'http://placekitten.com/100/100');

instead of this:

$('#imagepicker option[value="1.jpg"]').attr('data-img-src', 'http://placekitten.com/100/100');```