CODEWITHSUNDEEP
jquery
Bussiere
Bussiere

Reputation: 1154

Changing the src of an image with an unknown id with jquery

Here is my code :

<script>
$(document).ready(function(){
    $('#likeHeart').on('click', function() {
        var clickedSoundId = $(this).attr( "soundId" );
        console.log(clickedSoundId);
        $.get("http://localhost:8000/like/"+clickedSoundId+"/", function(data, status){
            console.log("Data: " + data + "\nStatus: " + status);
            $(this).attr("src","http://localhost:8080/Icons/favorite.png" + '?' + Math.random());
            $(this).attr("srcset","http://localhost:8080/Icons/favorite.png" + '?' + Math.random());
            console.log($(this).attr('src'));
            console.log(data["count"]);
            $("#likeCount"+clickedSoundId).text(data["count"]);
        });
    });
});
</script>

and here is the multiple image with the same id but different soundId

<img src="http://localhost:8080/Icons/like.png" srcset="http://localhost:8080/Icons/like.png" id="likeHeart" soundId="{{ s.id }}" height="15" width="15"><p id="likeCount{{s.id}}">{{s.nbLike}}</p><br>

var clickedSoundId = $(this).attr( "soundId" );

Give me the good id.

But 

$(this).attr("src","http://localhost:8080/Icons/favorite.png" + '?' + Math.random());

Doesn't change the image visually, but when i do a :

        console.log($(this).attr('src'));

The src is changed correctly ...

here is the fiddle :

https://jsfiddle.net/bussiere/7fh5n9kd/

Regards and thanks

Upvotes: 2

Views: 351

Answers (2)

Perfecto Web
Perfecto Web

Reputation: 184

At first, don't use same IDs for different elements. It's not valid HTML markup. Use class or other attribute.

Let's return to your question. Try this format: data-soundId="{{ s.id }}"

You can get this attribute with .data selector like this: $(this).data( "soundid" );

And don't use uppercase for .data.

Example:

$('.clickable').click(function(){
  var soundid = $(this).data('soundid');
  alert(soundid);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickable" data-soundid="15">15</div>
<div class="clickable" data-soundid="20">20</div>
<div class="clickable" data-soundid="25">25</div>

Upvotes: 3

MajiD
MajiD

Reputation: 2585

i think that you can not select multiple targets with ID. each id should not be more than one. try giving the images same class rather than ID

Upvotes: 0

Related Questions