I had a bug that I ran into today that had me really scratching my head. I needed to place a normal timeline widget on a website for a client. The widget was nothing special, just a default widget that Twitter allows you to grab from their widget page - Twitter Widgets. When I pasted the code onto my page nothing showed up except the text "Acme's Tweets". That isn't what I wanted. The facebook widget had worked fine and I had no reason to believe that Twitter's widget wouldn't work.
I created a new flat file to see if the code would work. When I pasted in the code and saved the widget popped up just like I would expect. I started googling for errors that some other developers may have encountered and hopefully resolved, but nope - no such luck.
The next thing I tried was to see if I had some kind of configuration wrong when I set up the Widget. I looked and looked but nothing seemed wrong.
I finally thought that maybe my issue was with some included javascript files. I grabbed all of the links to external JS files and put them in my test file. As soon as I did that my widget failed. I now had narrowed down my problem area. I knew now that one of these files was creating a conflict and now all I had to do was figure out which one.
I started by eliminating half of my includes and saved. The widget still worked. My problem was in the other half of the files. I excluded the last half of my includes and it failed. So now I know my error is in the last few linked files. I commented out the first file - prototype.js. My widget worked. I uncommented it. It failed. There's my issue.
The site I was working on used a javascript image viewing script called Lightbox to display it's images full screen with controls in a really pretty gallery setting. Lightbox is cool and has been around for quite some time. This gallery code uses the Prototype.js Framework to work, but unfortunately this code is conflicting with the Twitter code I was trying to use.
I thought that since Prototype is the issue - maybe there was a newer version that might have the problem fixed. My version was 1.6. I went to Prototype's website to see what versions were available; Prototypejs.org. At the time of this post 1.7.2 was available. I downloaded the new framework and saved the file. I posted that to my live server and setup my script links and saved. It worked! Both the Twitter widget as well as Lightbox was now functioning. Updating my old Prototype.js code to a new version resolved the issue.
