CODEWITHSUNDEEP
javascripthtmljquerytwitter
The Dead Man
The Dead Man

Reputation: 5566

load twitter profile on input change

I have a section in my app where user provide twitter account via input, now I want to display the profile on input change.

Here is Twitter docs on how to display embedded Twitter profile, https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview

Here is my live demo on jsfiddle :

live demo

Here is my solution: HTML

<html lang="en">
   <head>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>    
   </head>
   <body>
      <div class="tw-containeritter">
         <a class="twitter-timeline" href="" data-tweet-limit="1"></a>
      </div>
      <input id="twitterurl" placeholder="provide the twitter url" />
   </body>
</html>

Here is js

$("#twitterurl").on('change', function(e) {

    var twitterUrl = $(this).val();
    $(this).attr('href', twitterUrl);

    setTimeout(function() {

        console.log("setTimeout twitter");
        twttr.widgets.load();
    }, 2000);
})

Now when the user provides the profile URL, the profile is not displayed

What do I need to do to solve this problem?

Upvotes: 0

Views: 60

Answers (1)

poltorin
poltorin

Reputation: 302

Honestly I'm not an expert in JQuery, but I made it work. I found that for updating DOM you should use event delegetion. reference

<!DOCTYPE html>
<html lang="en">
   <head>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>    
   </head>
   <body id="main">
      <div class="tw-containeritter"></div>
      <input id="twitterurl" placeholder="provide the twitter url" />
   </body>
</html>


$("#main").on('input', '#twitterurl', function(e) {
    var twitterUrl = $(this).val();
    $('.tw-containeritter').append("<a class='twitter-timeline' href='' data-tweet-limit='1'></a>");
    $('.twitter-timeline').attr('href', twitterUrl);
    $('#twitterurl').blur();

    setTimeout(function() {
        console.log("setTimeout twitter");
        twttr.widgets.load();
    }, 2000);
})

Upvotes: 1

Related Questions