I am trying to use the jQuery .removeData and .data functions to change the values in the tweet button. I am trying to modify the data-text attribute and I cannot get it to work.
Random Quote Codepen
My thought process:
1.Remove the original value for data-text with the jQuery:
2.Pull from my array to with:
All the jQuery in my JS works except those two. I am almost positive it has to do with my attempt at modifying the DOM data. I know a different solution as a work around for this, but really want to understand the flaw in my logic.
I welcome any comment that can point me in the correct direction.
Use .attr() instead.
$('#twitter').attr('data-text', 'hello world' );
I just tried it on the codepen and it didn’t work. I also tried it with $(’#twitter’).attr(‘text’, ‘hello world’ );.
The .attr function works.
The issue with your program is something else. I think you’re using an iframe for twitter. So after the iframe is initialized with your first hardcoded data-text, you can’t update it anymore.
Why not just call twitter with something like this?
<a href="https://twitter.com/intent/tweet?text=your text goes here - www.yourwebsite.com">
Here is the twitter code:(no iframe)
<div><a id="twitter" href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-text="Don't cry because it's over, smile because it happened. Dr. Seuss" data-dnt="true" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>
The resulting html of this twitter code is this:
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" title="Twitter Tweet Button" src="https://platform.twitter.com/widgets/tweet_button.7bf2b0e802ada47dae9548b7a1739fed.en.html#dnt=true&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Fs.codepen.io%2Fboomerang%2FiFrameKey-babb6839-8585-f805-0f5d-d30da825b42e%2Findex.html&size=l&text=Don%27t%20cry%20because%20it%27s%20over%2C%20smile%20because%20it%20happened.%20%20Dr.%20Seuss&time=1497569913682&type=share&url=https%3A%2F%2Fcodepen.io%2FLBOD2000%2Fpen%2FLLGoVe" style="position: static; visibility: visible; width: 76px; height: 28px;"></iframe>
There’s your iframe. Your quote is buried deep in the src= attribute.
It only works the first time your page is loaded… then you can’t update the text anymore.
Thanks for the help. I had not understood the way that it was transforming the anchor.