What is wrong with this javascript?

Question

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
   var usr = 'charliesheen';

   function changeusr()
   {
      usr = document.getElementById("usrText").value;
      updatetwitter();
   }

   var twitter;
   newtwitter();

   function updatetwitter()
   {
      twitter.render().setUser(usr).start();
   }

   function newtwitter()
   {
     twitter =
     new TWTR.Widget({
       version: 2,
       type: 'profile',
       rpp: 4,
       interval: 6000,
       width: 200,
       height: 300,
       theme: {
         shell: {
         background: '#ffffff',
         color: '#367542'
       },
       tweets: {
          background: '#e3dfe3',
          color: '#000000',
          links: '#110af5'
       }
     },
     features: {
        scrollbar: false,
        loop: false,
        live: false,
        hashtags: true,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>

The results I see are: It loads fine. When I enter a new username and click "go" it may or may not reload the twitter widget, and the link "join the conversation" points to the correct url. I'd like it to reload the url with the new user entered. I'm a complete javascript noob. Thanks in advance.

Right...can you share it so I don't have to create it myself? — Michael Haren
– Michael Haren, Commented Mar 4, 2011 at 21:35
@Michael Haren jsfiddle.net/roviuser/aH7sY try that... not sure if it'll work. the jsfiddle "share" drop down doesn't work. maybe it's because i'm in IE7 — xdumaine
– xdumaine, Commented Mar 4, 2011 at 21:50
@roviuser - I updated my answer. If you have the "live" feature set to "true", it seems to work a little better, but I have not been able to get it to re-draw the header. — Pointy
– Pointy, Commented Mar 4, 2011 at 22:02

Pointy · Accepted Answer · 2011-03-04 22:07:02Z

4

Your input needs an id:

<input id='usrText' name="usrText"/>

Internet Explorer will return elements by name from "getElementById()", but that is simply legacy broken behavior and it's not imitated by other browsers.

edit — an update:

There doesn't appear to be much documentation for that widget thing. Things work somewhat better if you set the "live" feature to true. Also, when you update the user, you have to zap an internal variable on the widget:

function updatetwitter()
{
  twitter._profileImage = null;
  twitter.setUser(usr).render().start();
}

Here is the jsfiddle if you'd like to see it.

edited Mar 4, 2011 at 22:07

answered Mar 4, 2011 at 21:12

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

xdumaine Over a year ago

While this may be true, this isn't the problem. I am successfully getting the text from the box. the problem is with re-rendering the widget.

Pointy Over a year ago

I beg to differ - if the input doesn't have an "id" value, then (except in IE) the call to "getElementById()" will return null.

xdumaine Over a year ago

I edited the comment to say "successfully" instead of "correctly" - while it may not be correct, I AM getting the text from it, and the problem is with re-rendering the widget. You can see it in action here: somewhatbiased.blogspot.com - you can tell that I am getting the text, because while most of the widget fails to load, the link at the bottom of the widget that says "join in on the conversation" points to the text entered...

Pointy Over a year ago

On that page, your <input> element does have an "id" value :-)

Pointy Over a year ago

ah - well the problem is clearly inside that Twitter widget thing; it's like it works by calling "document.write" or something.

|

Collectives™ on Stack Overflow

What is wrong with this javascript?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related