使用javascript或..动态设置推文按钮'数据文本'内容？

Question

Here is functioning code on a form that displays a Tweet button -- the button's on a form that displays several images -- when the user clicks one of the images, it becomes the 'selected' image and the Tweet button is supposed to tweet the selected image's name and url:

      <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 the div that displays the image. When the user clicks one of the images, its div's onclick() handler is called and sets that image to be the 'currentlySelectedImage' on the page -- and the onclick() handler then needs to update the Tweet button's 'data-text' attribute with the name of the just-selected image:

          // 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 'data-text' attribute's value in the Tweet button to be the name of the selected image. I added the javascript code above which fails-- the 'elem' obtained from the code here:

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

is null (I think) because of this line in the Twitter tweet button code above:

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

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

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

I just doubt that Twitter's design goal for the Tweet button was "we're gonna dumb this sucker WAY down, we'll only let these animals choose ONE data-text value - every Tweet button has to have one hard-coded, "Once-on-the-page" data-text attribute - joke's on them if they try to dynamically change the Tweet button's data-text attribute."

I need to get this to work -- any ideas?

Answer 1

Just put it in a container with a known ID and traverse the document with it:

<div id="someIDiKnow">
    <a id="tweetBtnId"...>...</a>
</div>

$("#someIDiKnow a").attr("data-text", "Replacement Text!");

Answer 2

You could use JQuery to update the attribute data-text by adding an onclick action on the image. If you wanted to include the text inside the actual image tag by adding your own attribute to the tag, that could be an easy work around to assembling the tweet text.

For example:

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 3

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' with javascript

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

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

Answer 4

Looks like it's going to be the kludgy hidden form/php variable approach for now -- I'll post back if I find a better work-around.

EDIT: the hidden-form/PHP variable solution has beaten the roadblock put up by Twitter's Tweet button -- I can now successfully, dynamically change the Tweet button text at will, anytime based on the user's client-side input. Per Domenic's astute observation that the question above is too long and has code in it, I'll skip posting the answer here, and I apologize for the length above.