CODEWITHSUNDEEP
javascriptjquerytwitter
InitLipton
InitLipton

Reputation: 2453

Change TwitterButton attribute value with JQuery

I'm having issues trying to access the data-text field with my twitter button. Im trying to customize the text based on a few selections by the user. Using JQuery i try to access even the anchor's text but it always comes back undefined. I'm not sure why i can't seem to access the values in the anchor field.

$(document).ready(function() {
  $("#TweetCounties").change(function() {
    var seletedCounty = $('#TweetCounties :selected').text();
    var seletedValue = $('#TweetCounties').val();
    if (seletedValue !== "0") {

      //ALL undefined
      var tweet = $('.twitter-hashtag-button').data("text");
      var tweetButton = $('.twitter-hashtag-button').text();

      var tweetButtonNew = $('#twitterButton2').text();
      var tweetButtonNew1 = $('.twitterButton').text();
      var test = $('#tweetButton a');
    }
  });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<div class="tweetButtonLaytout">
  <a id="twitterButton" class="twitter-hashtag-button" href="https://twitter.com/intent/tweet?button_hashtag=Test" data-text="#MyFirstHashTag Testing text" data-show-count="false">Tweet #Test</a>
  <select id="TweetCounties" value="0">
    <option value="0">Select Area</option>
    <option value="1">Dublin</option>
    <option value="2">Cavan</option>
    <option value="3">Wicklow</option>
    <option value="4">Galway</option>
  </select>
</div>

Upvotes: 0

Views: 80

Answers (2)

Bahadir Tasdemir
Bahadir Tasdemir

Reputation: 10793

When you put the button on the page, the library of twitter creates an iframe and creates the button inside it so you mustn't modify any object inside an iframe, instead you can delete and recreate the button as you wish like this (also reloading widget js lib):

function load_js()
   {
      var src = "//platform.twitter.com/widgets.js";
     
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
     
      script.type= 'text/javascript';
      script.src= src;
      script.charset= "utf-8";
     
      head.appendChild(script);
   }
   

$(document).ready(function() {
  $("#TweetCounties").change(function() {
    var seletedCounty = $('#TweetCounties :selected').text();
    console.log(seletedCounty);
    var seletedValue = $('#TweetCounties').val();
    if (seletedValue !== "0") {

      //
      $("iframe[id^='twitter-widget-']").remove();
      $(".tweetButtonLaytout").prepend('<a id="twitterButton" class="twitter-hashtag-button" href="https://twitter.com/intent/tweet?button_hashtag=' + seletedCounty + '" data-text="#MyFirstHashTag Testing text" data-show-count="false">Tweet #' + seletedCounty + '</a>');
      load_js();
    }
  });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<div class="tweetButtonLaytout">
  <a id="twitterButton" class="twitter-hashtag-button" href="https://twitter.com/intent/tweet?button_hashtag=Test" data-text="#MyFirstHashTag Testing text" data-show-count="false">Tweet #Test</a>
  <select id="TweetCounties" value="0">
    <option value="0">Select Area</option>
    <option value="1">Dublin</option>
    <option value="2">Cavan</option>
    <option value="3">Wicklow</option>
    <option value="4">Galway</option>
  </select>
</div>

EDIT: Or you can use Twitter's library as it is explained here:

twttr.widgets.createHashtagButton(
  "TwitterStories",
  document.getElementById("container"),
  {
    size:"large"
  }
);

Upvotes: 1

Kacper Polak
Kacper Polak

Reputation: 1411

You need to create and reload hashtag button using Twitter Lib API, because it's overwrite a element with iframe to button, so you can't change it without using their api (iframe is out of jQuery range).

Solution:

It's create first button after select from #TweetCounties and store it as currentButton, when #TweetCounties change it's create new button, remove old one and overwrite currentButton with new one.

This way is better then reload js when #TweetCounties change value because we have loaded twitter lib one time.

$(document).ready(function() {
  var currentButton;
  $("#TweetCounties").change(function() {
    var seletedCounty = $('#TweetCounties :selected').text();
    var seletedValue = $('#TweetCounties').find(":selected").attr('value');
    if (seletedValue !== "0") {
        var btnContainer = $('#buttonContainer');
        twttr.widgets.createHashtagButton(seletedCounty,
          document.getElementById('buttonContainer'))
          .then(function(newButton) {
            $(currentButton).remove();
            currentButton = newButton;
           });
    }
  });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<div class="tweetButtonLaytout">
  <div id="buttonContainer"></div>
   <select id="TweetCounties" value="0">
    <option value="0">Select Area</option>
    <option value="1">Dublin</option>
    <option value="2">Cavan</option>
    <option value="3">Wicklow</option>
    <option value="4">Galway</option>
  </select>
</div>

Upvotes: 1

Related Questions