I have a page where I have a views slideshow with cs adaptive images in it. The page also has a form which is submitted via ajax. When the form is submitted, the adaptive image javascript behavior fires again and images are inserted again.

to fix this, in cs_adaptive_image.js replace

// Insert adapted images.
      $('noscript.adaptive-image').addClass('adaptive-image-processed').each(function(index) {
        var img = getAdaptedImage(this);
        $(this).after(img);
      });

with

// Insert adapted images.
      $('noscript.adaptive-image:not(.adaptive-image-processed)').addClass('adaptive-image-processed').each(function(index) {
        var img = getAdaptedImage(this);
        $(this).after(img);
      });
CommentFileSizeAuthor
#11 1667874_cs_adaptive_image_once-11.patch944 bytesdalin
#8 0001-cs_adaptive_image-use-behaviour-Issue-1667874-8.patc_.patch943 bytessandervd
#3 cs_adaptive_image-twice-1667874-3.patch922 bytesdavid lesieur
#2 ajax_duplicate-1667874-2.patch605 bytesalbert volkman

Comments

drew reece’s picture

drew reece commented

I'm seeing this too, but my use case is a little different.
I have a slideshow-view page that is loaded into a colorbox overlay via ajax on page load, I see multiple copies of the adaptive images in the colorbox.
If I use 2pha's code I only see one image and it works correctly.

I think the .once() function is intended for this use case e.g.

// Insert adapted images.
$('noscript.adaptive-image').once('adaptive-image').each(function(index) {

edit: This looks like a duplicate of http://drupal.org/node/1585342

albert volkman’s picture

albert volkman commented
Status: Active » Needs review
StatusFileSize
new ajax_duplicate-1667874-2.patch605 bytes

Confirmed that the fix from #1 resolved the issue. Here's a patch.

david lesieur’s picture

david lesieur commented
Title: problem when ajax form sumitted on page with CS adaptive images » Image inserted twice when ajax form submitted on page with CS adaptive images
StatusFileSize
new cs_adaptive_image-twice-1667874-3.patch922 bytes

I like the idea of using the once() method.
How about this patch? Does it work for you?

drew reece’s picture

drew reece commented

The patch in #3 works for me.

albert volkman’s picture

albert volkman commented
Status: Needs review » Reviewed & tested by the community

#3 works for me, and the code is cleaner.

david lesieur’s picture

david lesieur commented
Status: Reviewed & tested by the community » Fixed

Committed, and forgot to credit my own contribution. ;-)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

sandervd’s picture

sandervd commented
Status: Closed (fixed) » Needs work
StatusFileSize
new 0001-cs_adaptive_image-use-behaviour-Issue-1667874-8.patc_.patch943 bytes

The correct way would be to use the context of the behaviour

SGhosh’s picture

SGhosh commented

Patch in #3 worked for me.

dalin’s picture

dalin
he/him
Primary language English
Location 🇨🇦, 🇲🇽, 🌍
commented

The more correct way would be to combine both #3 and #8 - to use context _and_ .once().

dalin’s picture

dalin
he/him
Primary language English
Location 🇨🇦, 🇲🇽, 🌍
commented
Status: Needs work » Needs review
StatusFileSize
new 1667874_cs_adaptive_image_once-11.patch944 bytes

New patch based on #10

hedel’s picture

hedel commented

#11 worked for me (problem was in a Views slideshow with Lightbox)

david lesieur’s picture

david lesieur commented

Committed #11, but I have replaced once('adaptive-image').each(function() { with once('adaptive-image', function() { since the once() function can perform the iteration.

david lesieur’s picture

david lesieur commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

spelling mistakes