CODEWITHSUNDEEP
phpjqueryhtmlajax
user1970839
user1970839

Reputation: 90

Ajax with php toggle of image only works once

I have two images a "pin" and "unpin" that I would like to change on clicks after doing some database backend stuff.

When I click on and image once it changes it as expected. However, clicking on the new image does not do anything when it should change it back to the other image.

In a nutshell here is the html and ajax stuff that goes along with it. I create a span with a unique id since there would be many. I create the image and give it a unique id as well along with data. The data and unique id's are numeric companyid. The goal is to click on the image, get the id and replace it with another image using the same id's.

Again, it works fine on the first click, but subsequent clicks on the new image do nothing.

The ajax stuff is loaded in the the head of the page.

Thanks for looking !!!

Here is the php / html part

 if($isfavorite == 0) {
    $id       = "pin_${companyid}";
    $pinit    = "pinit${companyid}";
    $favorite = "<img data-cid='$companyid' id='$id' src='white_pin.png' style='cursor:pointer'>";
 } else {
    $id       = "unpin_${companyid}";
    $pinit    = "pinit${companyid}";
    $favorite = "<img data-cid='$companyid' id='$id' src='white_unpin.png' style='cursor:pointer'>";
 }


    echo "<span id='$pinit' style='float:right;'>$favorite</span>";

I have simplified the code but still get the same behaviour.

   $("[id^='unpin_']").on('click',function(){
      var newimg = 'siteimages/icons/white_pin.png';
      $(this).attr('src', newimg).attr('alt', 'Add').attr('title', 'Add to favorites');
   });


   $("[id^='pin_']").on('click',function(){
      var newimg = 'siteimages/icons/white_unpin.png';
      $(this).attr('src', newimg).attr('alt', 'Remove').attr('title', 'Remve from favorites');
   });

As you can see from the attached images of a console screen shot, all is working as expected. The problems till persists that it only toggles once.

BeforeAfter

Upvotes: 0

Views: 58

Answers (2)

LSerni
LSerni

Reputation: 57418

The goal is to click on the image, get the id and replace it with another image using the same id's.

When you create the new image, the click handler is likely lost.

Do this: set the click handler on the image container:

like so:

$('#container').on('click', 'img.pin', function() {
    var img = $(this);
    if (img.attr('alt') === 'Remove') {
        // Click on a Remove pin. So we turn it into an Add pin.
        img.attr({
            src: 'siteimages/icons/white_pin.png',
            alt: 'Add',
            title: 'Add to favorites'
        });
    } else {
        img.attr({
            src: 'siteimages/icons/white_unpin.png',
            alt: 'Remove',
            title: 'Remove from favorites'
        });
    }
});

This way, all images with class pin - even the new ones - inside #container will share the same click handler, and since you're not modifying the container, the click handler won't go away.

Upvotes: 0

voodoo417
voodoo417

Reputation: 12111

Change:

$('').click(function(){..});

To:

$('').on('click',function(){..});

Or use old behaviour ( I don`t know your jQ version):

$('').live('click',function(){..});

See more about that behavior - event handlers for dynamic DOM-elements here jQuery -on.

Upvotes: 1

Related Questions