Beutelevision

by Thomas Beutel

Detecting a click in a checkbox with jQuery

A simple script to detect when a checkbox is clicked. What you do with once you’ve detected the click is up to you.
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$('#agree').click( function() {
if($(this).attr('checked')){
alert('checked');
}
else{
alert('unchecked');
}
});
});
</script>
</head>
<body>
<p>
<input id="agree" type="checkbox" /> I agree
</p>
</body></html>

Redirect from within a WordPress admin page

I was trying to perform a redirect to generate a CSV file from within a WordPress admin page using the wp_redirect( ) function, but the problem was that I would always get the dreaded “Cannot modify header information – headers already sent” message. This is because admin plugins are simply hooks that are performed within the framework of the admin system.

The solution was to use a Javascript redirect. The Javascript attaches an event listener to listen for the “load” event. When the admin page is finished loading, a page containing the CSV data is loaded. That page has a Content-Type of application/csv, so it downloads immediately, leaving the admin page open (at least in Safari 4).

In my WordPress admin panel (this is a fragment of a plugin):
// setup Javascript redirect
$location='/wp/csv-output/?year='.$year.'&month='.$month;
?>
<script>
function addListener(element, event, listener, bubble) {
if(element.addEventListener) {
if(typeof(bubble) == "undefined") bubble = false;
element.addEventListener(event, listener, bubble);
} else if(this.attachEvent) {
element.attachEvent("on" + event, listener);
}
}
addListener(this, "load", function() { window.location="<?php echo $location ?>" });
addListener(document, "load", function() { window.location="<?php echo $location ?>" });
</script>

And in my CSV page (again, just a fragment):
ob_end_clean();
header("Content-type: application/csv");
header("Content-Disposition: attachment; filename=contact_data_$year_$month.csv");
header("Pragma: no-cache");
header("Expires: 0");

I found the javascript code here.

Result of expression ‘document.forms[0].submit’ [[object HTMLInputElement]] is not a function.

I was trying to add a small delay into my form submission like so:

<form ... onsubmit="setTimeout('document.forms[0].submit()',2000);return false;">

but everytime I tried it, I got the following error:

Result of expression 'document.forms[0].submit' [[object HTMLInputElement]] is not a function.

This one had me stumped, until I realized what it was telling me… that my submit button was named “submit”.

<input type="submit" name="submit" id="Button1" />

I changed the name of the submit button and the problem went away.

<input type="submit" name="button1" id="Button1" />

Basically, Javascript provides a “convenience” by adding the names of the form inputs as children of the form. But this then clashes with preset function names, like the submit() function.

It’s like deviantART meets the App Store

mayhemJohn Fort over at the Big Tech Fortune blog writes about Tyrese Gibsonâ??s Mayhem which is the first digital book for sale on iTunes 9. This strikes me as something that would interest the deviantART community of digital artists and writers. Imagine selling your artistic creations to millions of iTunes users for $0.99 a pop, just as iPhone app writers have been doing at the App Store. Good for artists. Good for Apple.

John mentions that the tools to create the e-book is based on standard web tech: HTML, CSS, and Javascript. My guess is that some day, not too long from now, we will see something like Pages (or maybe GarageBand) for iTunes where you can create your own digital creations and submit them to the iTunes store. It will probably dwarf the App Store in total volume.

Update: ReadWriteWeb has more to say about this.

iTunes 9: Option-click the green button to get the mini-player

The first thing I noticed when I upgraded to iTunes 9 was that clicking the minimize (green) button no longer selected the mini-player. A quick search revealed the answer: now you have to option-click the green button to get the mini-player. Thanks to Maclife for the answer.

miniplayer

RSSCloud: No need to adjust your firewall

I’ve been following the recent development of RSSCloud with interest… I think it has the potential to replace Twitter in the long term, although I suspect that Twitter might also evolve in the direction of RSSCloud.

One misconception about RSSCloud is the supposed need for the cloud to notify the desktop or mobile reader of an update. This would seem to mean that you would have to adjust your firewall to accept inbound connections to your computer/mobile device.

While the implementor’s guide shows that the cloud does notify the aggregator, the aggregator doesn’t have to be the same as the reader. As the guide suggests, the aggregator can also be in the cloud, with the reader opening an outbound connection to the aggregator, in the same way AIM or Skype or Jabber clients do, using protocols like XMPP. No need to adjust your firewall.

For that matter, Twitter clients do the same thing, using HTTP REST calls. The only difference is Twitter limits the number of API calls per hour (currently 150 requests per hour, or 2.5 requests per min–close enough to realtime for me), while there are no limits with XMPP. The tradeoff is arguably one of simplicity – is your client easier to implement with one or the other?

Hopefully the folks working on RSSCloud are developing an example of a cloud aggregator and an associated protocol. My vote would be for the protocol to be REST-based, but I could be convinced otherwise.

Using jQuery and Prototype together while avoiding the dreaded element.dispatchEvent error

Here is what I do to avoid the dreaded “element.dispatchEvent is not a function” error. I load jQuery first, Prototype second, and then I use jQuery( ) instead of $( ) for all my jQuery calls.

 <!--  Set up jQuery and prototype together  -->
 <script src="http://www.google.com/jsapi"></script>
 <script>
 google.load("jquery", "1.3.2");
 google.load("prototype", "1.6.0.3");
 google.setOnLoadCallback(function() {
  jQuery('#helphide').hide();
  jQuery('#helpbutton').click( function(){
    jQuery('#helphide').toggle();
 });
 });
 </script>

Using Skype to control a model train

Small wireless spy cameras are widely available, and there are even a few available specifically for HO-scale trains.

This got me to thinking about letting my cousin in Germany run a train on my train layout, using Skype. Why not? Connecting the camera receiver to my laptop is easy and Skype allows you to select the camera source for video chats. For controlling the train, I can use the open source JMRI framework.

The only integration problem to solve is how to expose the throttle controls to my cousin. I could hack something together on a web page and have him work the controls there.

But is there a way to build this on top of Skype? After all, Skype supports instant messaging, so throttle commands could travel back and forth over IM. Skype offers an API, but I haven’t yet delved deeply enough to know what kind of applications I can build on top of Skype.

More soon.

A short blurb on using sfGuardPlugin credentials

(Here are a few notes I made to myself about the credential system.)

Credentials are part of the sfGuardPlugin security system for Symfony. For some reason, Symfony also refers to credentials as permissions. As far as I can tell, the two terms are used interchangeably.

sfGuardUser records are stored in the sf_guard_user table.

The tables in the sfGuard permission system are:

  • sf_guard_permission <- represents a permission (credential)
  • sf_guard_group <- represents a group.
  • sf_guard_group_permission <- associates permissions to groups
  • sf_guard_user_group <- associates users to groups

Typcially, users belong to one or more groups, and groups are associated to permissions. This is the preferred method, and the above 4 tables are all that is needed to associate permissions to users, via groups.

It is possible (but not usually advisable) to associate a user directly with a permission by using the following table:

  • sf_guard_user_permission <- associates users to permissions

Permissions

Permissions typically represent what a user can do, as opposed to representing a “type” of user. Examples of proper permissions are:

  • can_view_items
  • can_edit_items

The following are improper permissions because they represent user types:

  • paying_clients
  • non_paying_clients

Restricting actions via security.yml

For credentials to work, the user must be logged in. Since an application is divided into modules, it is conventional to divide modules into those that don’t require a logged-in user (i.e. fully public pages, such as main/aboutUs or main/termsAndConditions), and those modules that do require a logged-in user.

To require a login for a module, add the following into the module’s config/security.yml file:

 all:
   secure: on

For the most part, permissions are assigned to specific actions. For example:

 listItems:
   credential: can_view_items
 editItem:
   credential: can_edit_items

Using permissions within actions

 public function executeIndex( )
 {
   $user = $this->getUser();
   if($user->has_credential('can_view_items') )
   {
     // get the item list
     ...
   }
   ... and so forth
 }

Meta refresh in Symfony – use view.yml

The easiest way I’ve found to add meta refresh to a specific action in Symfony is to use the view.yml file. Note that I use http_metas, not regular metas.

indexSuccess:
  http_metas:
    refresh: 300

which results in adding the following, as you would expect:

<meta http-equiv="Refresh" content="300" />