Difficulties with Google Gadget in WordPress

I had a hard time trying to put my little flickr-show Google Gadget into a WordPress page -- Various versions of the gadget has been used in Google Sites and Blogger pages (also on the sidebar) successfully.

This gadget is very much a proof of concept: The Gadget concept is Google's way for developers to write small apps in XML and JavaScript that could be placed in all kinds of web pages and the Google Desktop. It's not a novel concept but Google seems to be the most open among the companies that have something like it. Google Gadget is simple conceptually: You write an XML module that specifies a number of things, among that relevant to interfacing with the users are (1) a section for options, (2) content area which functions as an HTML/DOM container, (3) JavaScripts that work in the content area and (4) optional message files in XML for multiple language support.

One issue I take with Google's handling of gadgets is inconsistency: The same gadget behaves differently in Google Sites than in a non-Google website where you have to use Google's gadget creator tool to turn the XML modules into an HTML for rendering by user's browsers. Little differences can be very annoying. For example, the gadget creator tool generates three div containers around the iframe with white background color for no apparent reason. I mean, I can understand that Google wants to put their logo on rendered gadgets, but why this obnoxious white background?

Blogger allows gadgets in the sidebar directly. But if you want to put one in your blog entry contents, you have to run it through the gadget creator. Now, on to what I think is a bug somewhere in the Google code cloud. The code the creator tool generated calling Flickr's API function to search for photos returns an empty list in a WordPress page while it works in a Blogger page -- I have later learned that this could be caused by the chaotic use of jQuery in WordPress and many of its plugins, but this seems to be a problem of a different kind as the call does go out through Google's gadgets.io.makeRequest() proxy function and return with results.


To avoid using the Google gadget creator tool, I made changes to make the flickr-show.js module work with or without the Google Gadget API.


On the WordPress side, we observed a situation in which multiple instances of jQuery gets loaded. Which caused chaos for jQuery UI: UI widget functions would randomly disappear from the jQuery namespace. WordPress seems to need a JavaScript library manager badly -- something like the Drupal JavaScript Libraries Manager.

A Bug in jQuery Grid Plugin

I want to call this a bug because, as the name implies, editoptions is optional. (That being said, this is a small bug in an excellent jQuery plugin.)

But without editoptions, a column with edittype="select" will be created in a formedit dialog without an id attribute, which results a data element missing when the form is submitted. Of course, this is only a problem when one wants to customize the form initialization — Most people probably do not use jqgrid that way.

The bug should be in the area between line number 548 and 564 in grid.formedit.js as of jQuery Grid plugin version 4.2.0. But I haven't had much time to understand exactly how that code section works.

A workaround seems to be always have an editoptions parameter for a select type column, as the example below shows:

     array('name' => "actid", 'index' => "actid", 'width' => 50, 'align' => "center",
           'editable' => true, 'edittype' => "select", 'editoptions' => array('value' => ";"))

That is data for a column in PHP from the drupal-nm project, with the workaround colored in red.

JavaScript 纠错

用 jQuery 有一段时间了，一直是用 Firefox 做开发环境，一个重要的原因就是因为 Firebug 这个好工具。但是有时候 JavaScript 在 IE 里面会出现一些奇妙的错误，有些时候这些错误还不是很容易重复。或许还是我太懒，一直用 Firefox 顺手，所以有成见。不过有这种成见的似乎不只我一个。

言归正传，今天有遇到一位只用 IE 的同事 -- 因为在医院做技术支持，机器上一般都只有 IE -- 用我的 portman 工具时遇到问题。于是就搜了一下 "Firebug IE7"，找到这篇文章《Firebug in IE for *any* web site》，顺藤摸瓜回到 Firebug Lite，文中的主意似乎已经被吸纳到“正版”里了，现在只要直接在 IE 里面加一个书签就行。

这么现成的工具，以前居然一无所知。

jQuery 1.4.3 has a problem with apostrophe?

It seems that jQuery 1.4.3 has a problem with the apostrophe (' -- single quote) character in JSON data or any ISO Latin-1 code representation of characters.

In working on the drupal-nm project, I come across a port that has a description of Wei's phone, the port information dialog box would not display. I start up Firebug to see what's going on. Firebug seems to show that the JSON data is received and at least the debugger parsed that data correctly. However, my callback function to the jQuery's $.post() call was not invoked, at all.

Click on a different port without the apostrophe in the description, things work fine.

So I went to the server side of the function, trying to escape the apostrophe. I replaced the (') character with (') -- things stayed the same, no call back with the received JSON data, no sign of any error occurred in Firebug. In fact, any ISO Latin or HTML entity expression would cause the same problem.

This used to work fine with jQuery 1.3.2 -- which has different issues with the jQuery context menu plugin -- that needs a different blog post here.

For now, I am replacing (') with (’) -- copy and pasted the character into my code, not using the ISO Latin expression of (’), hope no one would notice.

[2010-11-13]: Posted a question on the jQuery Forum and received a pointer to jsFiddle.net -- a very nice tool for JavaScript testing, by the way. Created a test there, which seems to prove that the problem is not within jQuery 1.4.3. That means, the problem is likely a bad reaction between my own JavaScript components or other jQuery plugin modules I am using. I'll have to figure that out later.

[2010-11-16]: This is a known Drupal bug. To fix the bug in Drupal 6.20, replace lines 2500 - 2502 in includes/common.inc with the lines below:

      return '"'. str_replace(array("\r", "\n", "\t", "\\", "\/", "\"", "\'"),
                           array('\r', '\n', '\t', '\\', '\/', '\u0022', '\u0027'),
                           addslashes($var)) .'"';

[2011-03-29]: This problem still exists in the latest Drupal 6.20 release. Also, the JSON specification allows the apostrophe (') but jQuery's JSON parser does not.

[2011-05-02]: Drupal 6 may have a bigger problem with JSON conversion than this one bug. As it turns out, the above fix would also escape the double quotes surrounding member variable names and string values, which causes the entire JSON data object to be interpreted as a big string when received by a jQuery client end. Not good!

My first Google gadget: flickr-show

Here it is:



This example shows photos published by anyone on Flickr with the tag UT12.

[Update 2010-10-14] Version 1.1 is now functioning, with bug fixes and a photo pre-loading new feature.