API Giphy: Définition d'un nouvel attribut de source pour les GIF aléatoires avec jQuery

Question

Je suis si proche! et un peu confus ... alors dites-moi si je complique trop les choses.

J'utilise le public Giphy API pour remonter un gif aléatoire (tag = chien dans l'exemple ci-dessous) et je veux en parcourir de nouveaux à chaque fois que je clique sur un bouton.

Dans l'exemple ci-dessous, je reçois la console pour enregistrer "succès", je n'arrive juste pas à comprendre comment définir la nouvelle URL aléatoire comme source.

Toute aide est appréciée, merci d'avance!

HTML:

<div class="iframe"> 
    <iframe src="https://giphy.com/embed/26FmRLBRZfpMNwWdy" id="giphy-embed"> 
    </iframe> 
</div> 

<button type='button' class="btn btn-default" id="new"> New GIF 
</button> 

JS/jQuery:

$("#new").click(function() { 
    var gif = $('#giphy-embed').attr('src', function(newGIF){ //This is where it will go! 
    $.ajax ({ 
    url: "//api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=dog", 
    type: "GET", 
    success: function(response) { 

     console.log("success"); //This is what I get, just need to set the new URL as the src 
    }, 
    error: function(e) { 
     console.log("uh oh"); 
     } 
    }); 
    }); 

}); 

Answer 1

Essayez de mettre à jour l'iframe src dans le cadre de la fonction de la réussite au lieu.

$("#new").click(function() { 
//This is where it will go! 
    var imgSrc; 
    $.ajax ({ 
    url: "//api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=dog", 
    type: "GET", 
    success: function(response) { 
     // console.log(response); 
     imgSrc = response.data.image_url; 
     $("#giphy-embed").attr("src", imgSrc); 
     return false; 
    }, 
    error: function(e) { 
     console.log("uh oh"); 
     } 
    }); 
});