jQuery Random Quote Machine .data issues

1

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:

$("#twitter").removeData(“text”);

Also tried:
$("#twitter").removeData();
$("#twitter").removeData(text);

2.Pull from my array to with:
$("#twitter").data(“text”, quotes[i])

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.

2

Use .attr() instead.

This works

  $('#twitter').attr('data-text', 'hello world' );
3

I just tried it on the codepen and it didn’t work. I also tried it with $(’#twitter’).attr(‘text’, ‘hello world’ );.

4

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">
  Tweet me</a>

5

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>

6

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&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Fs.codepen.io%2Fboomerang%2FiFrameKey-babb6839-8585-f805-0f5d-d30da825b42e%2Findex.html&amp;size=l&amp;text=Don%27t%20cry%20because%20it%27s%20over%2C%20smile%20because%20it%20happened.%20%20Dr.%20Seuss&amp;time=1497569913682&amp;type=share&amp;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.

1 Like
7

Thanks for the help. I had not understood the way that it was transforming the anchor.