the ender.com blog

The Wrong Way to Ajax

2010-09-24T20:31:06Z

Recently I logged onto LinkedIn, to belatedly answer to connection requests.

LinkedIn now has some fancy ajax stuff, so you can just click accept on an invitation, and instead of loading a page, it does a background request and, if all goes well, that invite just disappears with a success message, leaving you to deal with the next request without leaving the page.

That's great. I did a lot of that when doing web application work for DAZ3D. One of the hallmarks of efficient e-commerce is giving people tools to get things done faster - and that meant things like list filters, type-ahead searches, ajax'd add-to-cart buttons - you name it.

But LinkedIn has an issue. See the screenshot:

I've used Firebug to peek at what is happening when it makes the request. As you can see, there's an error. The first time, I wrote it off as something transient, but I came back days later and got the same error.

I decided to log off and log back on, and the issue was fixed. Clearly, the "remember me" was sufficient for a normal page view, but not sufficient for accepting a connection request.

The problem arises because the ajax request is getting a normal full pageview back with the 500 error. I've written before about detecting ajax; if you're going to send a request over ajax, then whatever is handling the request should be aware, even if it's an error. There's nothing wrong with a 500 code for an ajax request that errors out; but your javascript should be ready to handle it.

In this case, as you can see from the (slightly privacy-screened) screenshot, I had a "spinny" (that's the technical term) that was going to sit there forever. That's especially bad, as a normal user will have no idea if the request has failed or is taking a really long time. Ideally, you throw a good error to the user; or, in this case, since you're not accepting their stale credentials, even redirect them to a login box. What you don't do is just throw a 500 error the javascript can't interpret and then stop there.

I personally like returning JSON objects, and I prefer to return them regardless of the code: 200 or 500, you get JSON if you made an ajax request. Then, my javascript always "fails over" - it looks for success. If there's no success message, it's an error.

Example:

$.get(href, function (data, textStatus) { var res = handleJSON(data); if (res['success']||false) { tgt.after(""+(res['success']||'Subscription added.')+""); $("#subsvcmsg").attr("id", "").fadeOut(2500, function() { $(this).remove(); }); } else { tgt.after(""+(res['error']||'An unknown error occurred trying to modify that subscription')+""); $("#subsvcmsg").attr("id", "").fadeOut(2500, function() { $(this).remove(); }); } } );

As you can see here, this code tests for a success message - using javascript's || operator to avoid any error messages being thrown to the user even if that element doesn't exist - and unless a success message is available, it prints an error. It tries to use the error returned by the server, if one exists - but again, if the error isn't there, it has a default message.

The point here is: don't leave your users hanging. (Also, you may not want to tell people your crack team is springing into action to handle a 500 error if that's not the case and it will still be failing days later, but that's aside from the point.)

MySQL Performance: # of columns vs varchars

2009-10-08T23:20:09Z

I have long told fellow developers that trying to stick to tables that have entirely fixed width columns is good practice.

This tends to lead to, at the least, normalizing out text on a performance sensitive table/application.

Instead of:

CREATE TABLE foo ( idx int(10) unsigned not null auto_increment primary key, productId int(10) unsigned not null, price decimal(7,2) not null, description text not null default '', KEY productId_idx(productId) );

It might be broken up into:

CREATE TABLE foo ( myInt int(10) unsigned not null auto_increment primary key, productId int(10) unsigned not null, price decimal(7,2) not null, KEY productId_idx(productId) ); CREATE TABLE foo_text ( foo int(10) unsigned not null primary key, text not null default '' );

The idea is that if you're doing most operations with the "foo" table, you'll get much better performance without a variable width column (varchar, text, etc).

They used a table with a varchar(1) column, and got a massive performance hit, but only when the number of columns was large. I'd like to experiment to see if it is the number or pure width of the columns. (In short, compare something like 99xchar(3)+1 varchar(1), or 1xchar(297) + 1 varchar(1).

MySQL NULL gotcha; or, yes, Virginia, types do matter

2009-04-28T20:15:51Z

If you spend a lot of time dealing with languages that are loosely typed and have scalars running wild, then like me, you may be prone to doing something like this:

mysql> select NOW(); select GREATEST(NOW(), DATE_ADD(NOW(),INTERVAL 1 DAY)); +---------------------+ | NOW() | +---------------------+ | 2009-04-28 14:17:36 | +---------------------+ 1 row in set (0.00 sec)
+-------------------------------------------------+
| GREATEST(NOW(), DATE_ADD(NOW(),INTERVAL 1 DAY)) |
+-------------------------------------------------+
| 2009-04-29 14:17:36 |
+-------------------------------------------------+
1 row in set (0.00 sec)

mysql> select GREATEST(NULL, NOW());
+-----------------------+
| GREATEST(NULL, NOW()) |
+-----------------------+
| NULL |
+-----------------------+
1 row in set (0.00 sec)

I'm glad the bug this caused had a minor impact, and this will hopefully be sufficient to slap me out of my loosely typed comfort zone for a while.

Worth

2008-10-23T05:41:57Z

This may be worth following.

Seinfeld is an appropriate Microsoft shill; Vista is a joke

2008-08-22T00:44:00Z

I was pleased and amused at news that Seinfeld will apparently pimp Vista, which has been ravaged by issues such as poor performance, the way UAC trains users to click yes without providing real security, to say nothing of how Vista has horrible DRM, which distrusts the user and hurts consumers.

Vista is so bad, Microsoft came up with this elaborate plan to trick people into saying nice things about Vista. It might be easy to trick a few novice users into thinking Vista looks neat when they're in a lab, but do they know about the performance issues it may have on their hardware, or the frustrating DRM? For that matter, can they navigate the small ocean of different Vista licenses to select the right one? Vista is not what you'd expect from a half-decade of development. When you spend billions upon billions of dollars on a new operating system, you'd expect more than a "Defective By Design" piece of junk.

All this leads me to conclude that Seinfeld is the perfect spokesperson for Vista. Because Vista is a joke. Windows is the Smelly Car of personal computing. It makes computers stink, and Vista is just the latest horrible manifestation.

If this is an iPhone killer, don't take out insurance yet

2008-08-08T05:41:08Z

Seriously Wired, what's wrong with you?

The E71 looks more like a Blackberry Killer, but don't be fooled: This great white hope gives the iPhone a run for its money in a lot of different areas (yes, really).

No, not really.

Big, nasty keyboard
Display not as large as ipod, let alone iphone
MicroSD, but only 8GB.
$500 unlocked. Ouch. You're not iPhone 3.0, you know.
No headphone jack.

So it's an iPhone killer because... uh... the battery lasts 3 days! Yeah... because you can't do anything cool with it.

Slacker

2008-07-15T04:18:24Z

I'm aware I haven't posted much. That said, I'm hoping to have an app I've been working on for the GAE (Google App Engine) done shortly, and will post some impressions about the GAE, and Python. (Wait, do I need a new category?)

After that, now that Apple has opened the developer floodgates, it's time to put in some time with my Cocoa for MacOSX book, iphone dev docs, etc, and do some iphone work. I enjoy my own iphone way too much to not develop something for it. Yay open platform! I did a small app for PalmOS ages ago, never even distributed it, but just had to to do it because I loved my palm and there was a decent gcc-based toolchain.

I am planning to upgrade to 3g, despite battery concerns. If necessary, I will disable the 3g except when I expect to be using lots of data. I never had an issue with call quality, and don't talk enough (<100m a month on average) to care. Maybe I can figure out a way to make that hotkeyed in some way. (I'd like to have a handful of settings toggles available when you double-click home when locked, like the ipod controls)

I grabbed a mybat external battery for the iphone. We'll see how that works, but tucked in my laptop bag, hopefully that will be serviceable in the clutch when battery is low and a recharge opportunity is not coming.

Xen and the Art of Virtualization

2008-06-20T00:10:44Z

I have historically had several servers at Layered Tech. They recently raised their prices, and the prices for several friends who have hosted servers there. The majority of our use is low volume, experimental sorts of things, and so we decided to go in together on a larger box that we could virtualize.

Enter Voxel, who offer a $199/mo dedicated server that includes:

4 GB RAM
Quad XEON 2Ghz
320GB SATA disk (which are growing more standard among these providers, but a lot of options are still IDE
SSH-accessible serial console access included

That last one is a serious nod to their foresight and a judo chop to other providers. Layered Tech overs a KVM solution as a $30 or $35/day rental. Voxel automatically includes it.

Anyhow, with this beefy box, we set about setting up Xen. Voxel's support was admirable when my initial xen install broke the serial console access. It turned out my /etc/grub.conf needed a change:

title CentOS (2.6.18-53.1.21.el5xen) root (hd0,0) kernel /xen.gz-2.6.18-53.1.21.el5 com1=9600,8n1 module /vmlinuz-2.6.18-53.1.21.el5xen ro root=LABEL=/ console=tty0 console=ttyS0,9600 panic=100 module /initrd-2.6.18-53.1.21.el5xen.img

(Change in bold)

Without the com1= line, it defaulted to 38400.

Anyhow, with that done, I got to work actually setting up Xen virtual server instances. The host box (aka the Dom0) is CentOS, and so the "easy" install should be another instance of virtualized CentOS, although any variant should be usable. I tried to use virt-install, but it failed miserably.

First, I had issues with networking. Even when I resolved those, halfway through anaconda installing packages, the system crashed.

Ultimately, I settled on doing it manually using this guide to installing CentOS DomUs on a CentOS Dom0.

Caveats for me included the fact that my bridge was virbr0 instead of xenbr0. I have a xenbr0, it just wasn't the correct bridge for RFC1918 going out...

Anyhow, aside from the networking problems, that went fairly smoothly. (Although the top of the guide has you selecting from i386 or x86_64, and the kickstart config just says i386, so I had to restart to correct that, since I was doing the x86_64 install.

Still on the agenda: getting a real IP address. Voxel offered a reasonable extra 8 IPs for $4/mo, and we'd like to ensure each VPS has its own IP address, not 192.168 addresses that translate.

Still, this has been a pretty fun thing so far. I've heard that Xen is what Amazon is using to provide AWS, and I've been learning a lot of new linux tools (like brctl; I'd never had a reason to do linux bridging prior to now, even though I've done it plenty with networking devices).

jQuery 1.2.6

2008-06-10T05:17:54Z

A couple weeks ago, the jQuery team released jquery 1.2.6.

jQuery is ~~the write-once, run-anywhere~~ a new type of javascript library.

It's incredibly full of win. Favorite things in 1.2.6:

Still small (minified+gzipped, 15k)
Dimensions plugin - I can see why. Dimensions was a godsend, providing totally important calls like $.position() and $.innerHeight() and whatnot. Indispensible.
makeArray - jQuery's internal .makeArray() method now converts any array-like object into a new array. Additionally it wraps all other objects as an array and returns the resulting set. This one is so wild, it will require further digestion, but there are plenty of possibilities

I'm working on a brief introductions to jQuery I will post to go over a bunch of basic techniques; things that go a tiny bit beyond the jquery.com documentation usage.

jquery, the jquery form plugin, and detecting an ajax submit

2008-04-09T02:44:46Z

When you send a request via $.ajax, $.get, or $.post in jquery, you can test for the HTTP_X_REQUESTED_WITH header, looking for a value of 'XMLHttpRequest', a la:

function isajax() { return ((!empty($_SERVER['HTTP_X_REQUESTED_WITH'])) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'); }

But what happens when you're using the jQuery Form plugin? Normally, things work fine. Below the cut for a serious caveat!

]]> The jQuery form plugin supports posting uploads. However, when an upload is posted, the form plugin instantiates an iframe and submits that form, since xmlhttprequest can't be encoded for file uploads.

Therein lies the problem: that xmlhttprequest header will not be set.

I handled it with a hidden field:

[...]

Now you have a magic variable to check. Then, in your jquery:

$("#myform").ajaxForm() { [...] beforeSubmit: function (formData, jqForm, options) { $("#isajaxrequest").attr("value", 1); }) [...] }

This way, if your form is submitted via iframe, $_REQUEST['isajaxrequest'] (in php parlance) will be non-zero.

WARNING: the isajaxrequest field will only work as presented here in the iframe; so you still have to test for the server header AND the isajaxrequest variable. Why? Because by the time the form plugin calls beforeSubmit, it has already copied the form into an object which will be used to serialize and submit it, and changes to the form do not propagate. What's interesting is, if you apply ajaxForm to a form with an input type='file', it will only use the iframe if that field is selected. So on the same form, clicking submit with the file selected will use an iframe, but clicking submit when the file field is empty will let it submit over xmlhttprequest.

You *can* still use beforeSubmit to set the field regardless, but you'll have to navigate the formData array, which is an array of js objects, like: [ { "name": "isajaxrequest", "value": "1"}, {"name": "someotherfield", "value": "someothervalue" } ]

Not particularly something you want to iterate through if you can avoid it, although if you're concerned about a proxy stripping the xmlhttprequest header, you may want to do it anyhow.

Event bubbling in Javascript

2008-04-04T01:55:54Z

Today I had the opportunity to play with event bubbling and applying generic event handlers. Quick overview on handling them (with jquery!) and which events cannot be cancelled.

]]> Why use generic handlers?

If you are making a dynamic document, you know that CSS settings are applied as entries are inserted. If you dynamically create a div with class="foo", and you have a ".foo" style defined in your stylesheet(s), then it will inherit it automatically.

If you bind to every class="foo" element on a page at some point (say, with $(".foo").bind() with jquery), then append more elements with that class, they do NOT automatically inherit the event binding.

How to get around it

To get around this shortcoming, you can bind your event handler to a higher level event. I'm going to describe it with jquery. For example, let's assume you want to check for clicks on all divs with a class "foo", and make the background color red.

Here's the 'old' way with jquery:

$(".foo").bind("click", function(e) { $(this).css({'backgroundColor': 'red'}); });

The problem is, if you add a new div into the DOM, it will not have that event binding.

Here's the 'new' way:

$(document.body).bind("click", function(e) { var $target = $(e.target); if ($target.is(".foo")) { $target.css({'backgroundColor': 'red'}); } });

Pretty simple, right? Actually, it is. And it's less code and less of a pain than all the code required to bind new elements coming in most likely. Here's the code at work. Elements with class foo are bound to change bgcolor to red when clicked:

What can go wrong?

The major problem is events that don't bubble up. The wikipedia entry on DOM events has a nice list of events with their Bubble property - among those that don't bubble up: load, unload, focus (which was the one that prompted me to investigate), blur, DOMNode(RemovedFrom|InsertedInto)Document, rowexit, and others.

Still, this is an awesome technique. The more you make your page dynamic, the more useful it becomes.

Put this in your toolbox

2008-03-20T16:11:14Z

I'm going to admit to not having used this yet. But having used a lot other solutions (most recently pear Safe_HTML with additional pre/post-processing), this is a breath of fresh air: HTML Purifier

Hello again, Hello World

2008-03-11T03:05:42Z

Any programmer has done this one a thousand times. But this one is more fun than I remember this being before.

MT 4.1

2008-03-09T03:50:23Z

So, I've upgraded to Moveable Type 4.1, and I'm forcing commenters to use on the of the web login services (typekey, oid, etc). If that doesn't cut down on the spammers, then it's time to drop the hammer and put in an anti-spam plugin. But at least now that I am upgraded, getting such a plugin will be easier.

MySQL Update Evaluation Gotcha

2007-08-13T23:45:21Z

If you use MySQL, note this:


mysql> create database test;

Query OK, 1 row affected (0.01 sec)

mysql> use test;

Database changed

mysql> create table foo (

    -> x int,

    -> y int

    -> );

Query OK, 0 rows affected (0.00 sec)

mysql> insert into foo values (1, 2);

Query OK, 1 row affected (0.00 sec)

mysql> select * from foo;

+------+------+

| x    | y    |

+------+------+

|    1 |    2 |

+------+------+

1 row in set (0.00 sec)

mysql> update foo set x=5,y=10,x=x+y;

Query OK, 1 row affected (0.00 sec)

Rows matched: 1  Changed: 1  Warnings: 0

mysql> select * from foo;

+------+------+

| x    | y    |

+------+------+

|   15 |   10 |

+------+------+

1 row in set (0.00 sec)

mysql>

I bolded the part that bothers me. No warnings. Double-updating the same value in the same row in the same statement throws no warnings (never mind errors!). I haven't checked the ANSI standard to see if this is mentioned, but it sure is worth noting.