CODEWITHSUNDEEP
javascriptjqueryhtmlajaxxmlhttprequest
Guillaume
Guillaume

Reputation: 352

How to switch displayed image after AJAX process?

I want to switch from a displayed image to another after an AJAX request completes.

Here is the code for the AJAX call:

<script type="text/javascript">
$(document).ready(function(){
$('.item').click(function(){
    var $id = $(this).attr('data-id');
    $.ajax({
            type: "POST",
            url: "test.php",
            data: { id: $id },
            success: //
          })
    });
});
</script>

Here is the HTML :

<div class="item" data-id="1"><img src="image1.png" /></div>

If image1.png is displayed, I want to display image2.png instead.

If image2.png is displayed, I want to display image1.png instead.

Please, help me to fill the success part in the AJAX process.

Upvotes: 1

Views: 1110

Answers (2)

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

You can use the .find() method to find the image child, and then .attr() to get and set the attribute for the src property.

So before the AJAX call, find the image:

var image = $(this).find('img');

Then in the success function, check the src attribute and set it using attr():

success: function(data) {
    if (image.attr('src') == 'image1.png') {
      image.attr('src', 'image2.png');
    } else {
      image.attr('src', 'image1.png');
    }
}

See it demonstrated in the example below:

var urls = [
  "https://i.sstatic.net/C92ci.png?s=32&g=1", //image1.png
  "https://www.gravatar.com/avatar/8911010cdec4bb9d56b83b6bbbb1f341?s=32&d=identicon&r=PG"
];
$(document).ready(function() {
  //demonstration container- for AJAX request response
  var questionsContainer = $('#questions');
  $('.item').click(function() {
    var $id = $(this).attr('data-id');
    var image = $(this).find('img');
    $.ajax({
      url: "https://api.stackexchange.com/2.2/questions?order=desc&sort=activity&site=stackoverflow",
      success: function(data) {
        var index = urls.indexOf(image.attr('src'));
        image.attr('src', urls[Math.abs(index-1)]);
        /*if (image.attr('src') == urls[0]) {
          image.attr('src', urls[1]);
        } else {
          image.attr('src', urls[0]);
        }*/
        questionsContainer.html('# of Questions: ' + data.items.length);
      }
    });
    questionsContainer.html('...');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-id="1"><img src="https://www.gravatar.com/avatar/8911010cdec4bb9d56b83b6bbbb1f341?s=32&d=identicon&r=PG" /></div>
<div id="questions">Click the image to load # of questions</div>

Upvotes: 2

Hema Nandagopal
Hema Nandagopal

Reputation: 678

Hope this helps.If needed we can use toggle jquery function to toggle between these two images.

<script type="text/javascript">
    $(document).ready(function(){
    $('.item').click(function(){
        var $id = $(this).attr('data-id');
        var $imgId = $('.item img').attr('src');
        $.ajax({
                type: "POST",
                url: "test.php",
                data: { id: $id , ImageId :$imgId },
                success: function(data){
                  if(ImageId == 'image1.png'){   
                     $(this).attr('src', 'image2.png');                    
                   }
    			else{
    				 $(this).attr('src', 'image1.png');
    			}
                }
              })
        });
    });
    </script>

Upvotes: 0

Related Questions