Set the dynamic content of the data-text button of the Tweet button using javascript or ..?

Question

There is a code in the form that displays the Tweet button — a button on the form that displays several images — when the user clicks on one of the images, it becomes the “selected” image, and it is assumed that the Tweet button to retrieve the name and URL of the selected image:

<a id="tweetBtnId" href="https://twitter.com/share" class="twitter-share-button" data-text="Check me out on OurWebSite!" data-url=http://$ourSiteURL data-via=http://$ourSiteURL data-size="medium" data-count="none">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){js=d.createElement(s); js.id=id; js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}} (document,"script", "twitter-wjs");</script> 

I have an onclick () handler for a div that displays an image. When a user clicks on one of the images, his onclick () div handler is called and sets this image as "currentSelectedImage" on the page, and the onclick () handler should update the text-to-text Tweet button. attribute with the name of the image just selected:

  // This is part of the code of the 'onclick()' handler for // the image being selected. <script> function handleImageOnClick() { var myDynamicTweetText = "name of currently-selected image goes here"; var elem = document.getElementById("tweetBtnId"); alert("The elem is: " + elem); // elem IS NULL !! Dagnabbit. // this fails because 'elem' is null elem.setAttribute("data-text", myDynamicTweetText); // other onclick() code not shown for brevity...... } </script> 

I need to dynamically change the value of the "data-text" attribute in the Tweet button to be the name of the selected image. I added javascript code above which failed - "elem" is obtained from the code here:

  var elem = document.getElementById("tweetBtnId"); 

is null (I think) due to this twitter twitter line above:

  if(!d.getElementById(id)){js=d.createElement(s); js.id=id; 

I'm not sure, but it looks like the default Twitter Tweet button of the script overwrites any attempt to add the 'id' attribute to the Tweet button.

You will see that I added the id = "tweetBtnId" button to the Tweet button above so that I can access the Tweet button in my onclick () handler to select the image above, and then set the 'data-text' for the name of the image just selected .

I just doubt that the purpose of the Twitter design for the Tweet button was that "we are going to drown out this suction, we will allow these animals to choose ONLY the value of the text text - each Tweet button should have one hard code," text-text "" Once attribute -on-the-page "- joke on them if they try to dynamically change the text-to-text attribute of the Tweet button.

I need to get this to work - any ideas?

Answer 1

It looks like it will now be a hidden method of hidden form / php variables - I will send a message if I find a better job.

EDIT: a hidden form / PHP solution beat the roadblock set by the Twitter Tweet button - now I can successfully dynamically change the text of the Tweet button as desired at any time based on user input on the client side. On Domenica, the insightful observation that the above question is too long and contains code, I will skip the message here and apologize for the length indicated above.

Answer 2

Just put it in a container with a known identifier and move the document with it:

 <div id="someIDiKnow"> <a id="tweetBtnId"...>...</a> </div> $("#someIDiKnow a").attr("data-text", "Replacement Text!"); 

Answer 3

You can use jQuery to update the data-text attribute by adding an onclick action to the image. If you want to include text inside the actual image tag by adding your own attribute to the tag, this can be an easy task to build tweet text.

For instance:

 function updateTweetBtn(obj) { $('#someIDiKnow a').attr('data-text', $(this).attr('tweet')); } <img src="/images/myimage.jpg" tweet="This is what I want to tweet" onclick="updateTweetBtn(this);" /> <img src="/images/myimage2.jpg" tweet="This is some other text I want to tweet" onclick="updateTweetBtn(this);" /> 

Answer 4

using in html

 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <a href="http://twitter.com/share" class="twitter-share-button" data-text="old text">Tweet</a> 

I managed to change the "data text" using javascript

 var a = "new text"; document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text", a); 

also worked with document.getElementById ('twitter') if you added id = 'twitter' to <a>