0

I designed a page, where clicking on the button "Get Quote" will display various quotes in a div, which are obtained from an API. I want to add a twitter shate button. But I am really confused on how to change the value of the "data-text" attribute of the twitter button, dynamically which the changing values of the quotes from the API. I use jQuery for processing data from the API, so how do I change the value of the "data-text" using jQuery?

The code is:

HTML:

<body>
  <h1><div id="quotegot" class="well well-lg quote"></div></h1>
  <button type="submit" class="btn btn-success btn-lg" id="quoteid">Get Quote</button>
  <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false" data-text="hello">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>

JS:

$("#quoteid").on("click",function(){
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en",function(quotejson){
        $("#quotegot").html(quotejson["quoteText"]);
    });
});
$(".twitter-share-button").attr("data-text", $(".quote").text());
Arun Kumar A
  • 104
  • 1
  • 10

1 Answers1

0

Dynamically change Tweet Button "data-text" contents

Can't comment yet so putting it here. There is a jsfiddle in there showing how it works.

Community
  • 1
  • 1
Chris
  • 486
  • 3
  • 8
  • 22