Generating Form Elements with Javascript in IE 10

There’s a DOM manipulation gotcha in IE10 that just got me, and Google didn’t help much, so I’m giving Google something to show anyone who has this problem in the future.

When you dynamically generate a form input in Internet Explorer 10 the you must set the type attribute before doing anything else to the element, otherwise any values you set will be ignored when submitting the form, and in some cases will not be displayed. When inspecting elements using IE’s developer tools, however, the correct value appears in the generated document tree.

So this works as expected:

var sub = document.createElement('input');
sub.setAttribute('type', 'submit');
sub.setAttribute('value', 'Submit Generated Button');


But this doesn't:

var sub = document.createElement('input');
sub.setAttribute('value', 'Submit Generated Button');
sub.setAttribute('type', 'submit');

This is particularly hard to catch with radio buttons and checkboxes, (this is what got me). Their default value is “on” which doesn’t tell me much, especially if you’re submitting an array of them.

Here’s a demo. The first button shows its value, (and submits its value), and the second shows, (and submits) the default of “Submit Query.”

The only documentation I found on this behaviour is a passing sentence in the createElement documentation at MSDN. When they say “then set the type property to the appropriate value in the next line of code” they’re serious about the next line of code.

Also, who chooses “Submit Query” as a default value for a submit button in 2013 anyway? Are they trying to confuse people? Shouldn’t it just be “Submit”?

Does anyone use PayPal integration in Appointment Booking WordPress Plugins?

I’m working on my own branch of an appointment booking plugin for WordPress for a client site. It works great, but there’s more to do.

The original plugin has an option to require payment via PayPal when someone books an appointment. I want to know if people use this feature.

For those of you who use a plugin to accept appointment bookings through your WordPress site, (or one you develop), do you use PayPal integration to accept payment for those appointments?

Bonus Questions: Do you use some other payment provider to accept payments for appointments? Which appointment booking plugin do you use?

Please leave a comment below, or E-mail me via my contact form.

Thanks!

Boil Water Advisory: A Lack of Timely Communication in Montreal

TL;DR

My water was brown this morning. It took over an hour and a half for me to find out if it was safe to drink, wash, or anything else with it. We can do better. When something goes wrong that affects your customers, let them know what to expect!

The Long Version

Around 8:30 this morning I turned on the tap to find the water was the colour of weak coffee. Gross. My thoughts went something like this: Is it safe to drink? How about wash my baby’s face, which at the time was covered in banana & oatmeal? Who knows. Is it just my apartment? Can I shower? Do I want to shower in brown water even if it is safe?

Twitter confirmed that it wasn’t just my apartment:

The Montreal website, Montreal Twitter, and Montreal Twitter Account all had no indication of what was going on, and when I called 311 I got a “We can’t answer your call, please call back later” message! Total communication breakdown. Was it safe wash my baby’s face?

Around 9 311 actually answered and they told me that there is a problem at the water treatment plant affecting my whole borough, (later I discovered it’s both my borough and the neighbouring one, for a combined population of 135,682 people). Update (11 AM): As I was writing this the boil water advisory was expanded to cover most of the city. I was told to boil water for 10 minutes. Then, at 9:04 Montreal finally tweeted:

Ok, what about washing my baby’s face? (Actually, he’d been washed at this point using some water from the Brita).

20 minutes later the phone rang and a recording told me a boil water advisory was in effect, and I should boil water for 1 minute. So, is it 1 minute or 10? At this point I want a page on the city website that tells me what I should do with my water when there’s a boil water advisory. It turns out there is one, but I found out about it because it was posted to Facebook, not from any official source, (it looks like they think 1 minute of boiling is sufficient).

Finally, around 10, Montreal tweeted a link to it as well:

It took me way too long to find out what was going on this morning. It should have been different.

Make it right next time

It is not hard get information to people who are looking for it. Next time there’s a boil water advisory, (or any emergency), I recommend:

  • Posting to social media immediately. This is super easy, there’s no code to write on a website, (don’t wait until the social media person comes in at 9).
  • Updating the city and/or borough websites ASAP. Yes, this may require someone to write HTML, that’s why you just posted to your social media accounts.
  • Linking to the “What to do in a Boil Water Advisory” document in your initial social media post, or in another post 2 seconds later. Don’t wait an hour to link to that document.

Conclusion

This was a preventative boil water advisory. Hopefully the city will make a better effort in the case of a more severe emergency.

Announcing DeadTrees

Today I’m releasing DeadTrees, a WordPress plugin to share the books you read. Get it from wordpress.org or search for DeadTrees in the Plugins > Add section of your WordPress admin.

Features

DeadTrees lets you post the books you read, with or without writing about them, (really, does the internet need to know what you thought of the last mystery you read?). It generates Amazon affiliate links to those books so you, (or I), can make a little money if your readers buy the books, and it auto-fetches the books’ cover art from Amazon so things look cool.

Why?

I have been posting about books that I read for a while now, but ground to a halt when I got lazy & didn’t want to write a whole post about each book, and realized often it doesn’t matter what I think about a book. However, I did want to keep posting at least the te title & author of each book I read, (and so my sister can check to see what I’ve read before giving me a book).

Why write a plugin when there are other plugins to share the books I read? Because the other plugins didn’t do it how I wanted them to. I couldn’t find another plugin that uses WordPress’s Custom Post Types to store books I’ve read, and books are such a perfect use of CPTs that they’re even used as the example in the WordPress documentation!

Support & All That

I’ve put DeadTrees up at GitHub, if you have issues try to submit them there. My contact page is also always available to reach me.

See It Live

DeadTrees is up & running here. Take a look at the books I’ve read.

Improving Trac’s Tickets By Milestone Report

I entered a ton of tickets & milestones into a Trac installation today and when I was done the Active Tickets report was a mess. Tickets by Milestone was better, but still far from perfect.  Time for report customization. Google helped, and so did the #trac IRC channel. If you’re lazy & want to just jump to the solution, do it.

Here’s what I was looking for in my report:

  • Group tickets by Milestone
  • Order milestones by due date, (soonest first)
  • If a milestone had no due date, put it at the end of the report, (if it’s important it’ll have a due date set, otherwise it’s a “backlog” item that hasn’t been prioritized yet.
  • Display the due dates with the milestone names.

To get started, go to the Tickets by Milestone report that’s in Trac by default and click the “Copy Report” button, you’ll get a copy of Tickets by Milestone to play with. Click the Edit Report button and we’ll update the SQL to get the report we want. Grouping by Milestone is already done in this query, so we’ll start with ordering by milestone due date and putting milestones without a due date at the end of the report.

Order by Milestone Due Date

To order by date we need to join the milestone table. Add to the line after FROM ticket t:

LEFT JOIN milestone ms ON ms.name = t.milestone

Then to the beginning of the ORDER BY statement add (ms.due > 0) Desc,ms.due, so the ORDER BY is now:

ORDER BY (ms.due > 0) Desc,ms.due, (milestone IS NULL),milestone, CAST(p.value AS integer), t.type, time

The (ms.due > 0) Desc part makes milestones that have a due date come first, then ms.due orders those by due date with the soonest first.

Display Due Dates with Milestone Names

For Trac 0.12 and above replace the line

'Milestone '||milestone AS __group__,

with:

'Milestone '||(milestone || CASE WHEN ms.due > 0 THEN ', (due ' || datetime(ms.due/1000000, 'unixepoch')  || ' UTC)' ELSE '' END) AS __group__,

And for Trac versions below 0.12 replace the line with:

'Milestone '||(milestone || CASE WHEN ms.due > 0 THEN ', (due ' || datetime(ms.due, 'unixepoch')  || ' UTC)' ELSE '' END) AS __group__,

The difference is that in Trac 0.12 dates, (at least milestone due dates), started to be stored as mircoseconds since the unix epoch, and before that they were stored as a simple unix timestamp, so now, to use SQLite’s datetime function we have to divide the stored value by 1,000,000.

This statement makes milestone names look like this:

Milestone Page Style Updated, (due 2011-11-21 23:00:00 UTC)

Note that there’s a UTC time listed. This is because I can’t figure out how to get a user’s timezone offset preference into the query. It would be relatively simple if the time was attached to a ticket, but in this case it’s attached to a milestone. If anyone knows how to work the proper timezone offset into the SQLite query please let me know.

Bonus: Link the Milestone Titles to Reports Showing Only That Milestone

It’s possible to create a link a list of that milestone’s tickets. Just add this line after the line that you just altered:

(CASE WHEN(milestone IS NOT NULL) THEN '../query?group=status&milestone=' || milestone ELSE NULL END) AS __grouplink__,

The grouplink column is a magic column that Trac understands and uses as a link for the group title, (in this case, the milestones).

The Full Solution

For you lazy folks, here’s the full query:

SELECT p.value AS __color__,
   'Milestone '||(milestone || CASE WHEN ms.due > 0 THEN ', (due ' || datetime(ms.due/1000000, 'unixepoch')  || ' UTC)' ELSE '' END) AS __group__,
  (CASE WHEN(milestone IS NOT NULL) THEN '../query?group=status&milestone=' || milestone ELSE NULL END) AS __grouplink__,
   id AS ticket, summary, component, version, t.type AS type, 
   owner, status,
   time AS created,
   changetime AS _changetime, t.description AS _description,
   reporter AS _reporter
  FROM ticket t
  LEFT JOIN milestone ms ON ms.name = t.milestone
  LEFT JOIN enum p ON p.name = t.priority AND p.type = 'priority'
  WHERE status <> 'closed' 
  ORDER BY (ms.due > 0) Desc,ms.due, (milestone IS NULL),milestone, CAST(p.value AS integer), t.type, time