Geekality » Javascript

JavaScript: Delayed keypress event (sort of)

Torleif — Sun, 05 Feb 2012 17:48:18 +0000

Wanted to do an AJAX call whenever the content of a field was changed. This can be done simply with the onchange event, but the problem is that you have to tab out of the field to make it fire. You can also do it with the keypress event, but then you’ll get one AJAX call for each and every keypress, which is just silly.

Found a nice and easy solution, and here it is slightly changed.

It’s a bit sneaky, but you should be able to deduce how it works Working sample over at samples.geekality.net/delay-check.

Measure upload time and speed with PHP and Javascript

Torleif — Sun, 20 Nov 2011 07:34:42 +0000

Stumbled upon a question on StackOverflow the other day which got me curious. The question was about how to measure how long it takes to upload a file to a PHP script. This is what had been tried out:

$upload_time = time() - $_SERVER['REQUEST_TIME'];

This pretty much always returns zero, even though the uploading actually took many seconds, because the request start time is after the server has received the post data. That we actually just get how long the script took to run, which of course is pretty close to zero seconds. So, what can we do?

Right before data is posted, nudge the server with an AJAX call which stores the current timestamp in a session variable
Post the data
Compare current timestamp with the one stored in step 1

Wasn’t sure how it would work, but seems to work pretty well. There will of course be a very tiny difference since the AJAX request will be a bit part of the time, but compared to the upload time it shouldn’t matter much. Anyways, here’s how you could do it

In your HTML you need your form, obviously.

And then we need the Javascript which does the AJAX request (using jQuery). Notice that this makes sure we have gotten a response from the timer script before we actually submit the form.

The start timer simply stores a timestamp in a session variable.

session_start();
$_SESSION['time'] = microtime(true);

Then in the upload script we simply need to compare that time with the current timestamp to figure out how long this took.

session_start();
$upload_time = microtime(true) - $_SESSION['time'];
// You should of course probably also check if the upload was OK and all that ;)

And that’s pretty much all there is to it! Working sample at samples.geekality.net/upload-timer.

PHP: What’s a valid JavaScript identifier (or function name)?

Torleif — Wed, 03 Aug 2011 15:09:49 +0000

After another reply to a question I’ve had on StackOverflow for a while, I decided that I perhaps should add another level of security to my method of providing JSONP from PHP. The way I did it before, I didn’t do any checking on the provided callback. This means that someone could technically put whatever they wanted in there, including malicious code. So, therefore it might be a good idea to check if the callback, which should be a function name, actually is a valid function name. But,

What is valid?

To figure that out, we need a look in the ECMAScript Language Specification. In chapter 13 on functions, we find that a function name is a so-called identifier, which is described in chapter 7.6. There we can find the following facts:

Identifier	but not
IdentifierName
IdentifierStart	$ _ \
IdentifierPart
UnicodeLetter	Uppercase letter (Lu) Lowercase letter (Ll) Titlecase letter (Lt) Modifier letter (Lm) Other letter (Lo) Letter number (Nl)
UnicodeCombiningMark	Non-spacing mark (Mn) Combining spacing mark (Mc)
UnicodeDigit	Decimal number (Nd)
UnicodeConnectorPunctuation	Connector punctuation (Pc)
UnicodeEscapeSequence	The definitions of the nonterminal UnicodeEscapeSequence is given in 7.8.4
ZWNJ	U+200C (Zero-width non-joiner
ZWJ	U+200D (Zero-width joiner
ReservedWord
Keyword	break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try
FutureReservedWord	class, enum, extends, super, const, export, import implements, let, private, public, yield, interface, package, protected, static
NullLiteral	null
BooleanLiteral	true, false

Looks long, but not too complicated.

Checking if a string is valid

To check if a string is a valid identifier is now pretty easy. We just need to make sure the string matches the allowed syntax, and that it’s not a reserved word. The first we can solve with a regular expression and the second with a simple white list array. For example, something along the following lines.

Not too complex, although the regular expression might look a bit nuts at first because of all the Unicode character groups. You might find regular expressions other places to do this that uses a-z for the letters, but as you saw from the specification that won’t cover much of what’s actually valid.

I built the expression using the very helpful RegexBuddy and exported an HTML explanation of it. Also threw together a tiny identifier validator thing where you can test it out with. You find it all at samples.geekality.net/js-identifiers.

And that’s that. Hope that might be helpful for someone and please let me know if you find any issues with it!

Note: I have ignored the issue with the Unicode escape sequences for now as I’m not quite sure how to best handle those. From the specification:

A UnicodeEscapeSequence cannot be used to put a character into an IdentifierName that would otherwise be illegal. In other words, if a \UnicodeEscapeSequence sequence were replaced by its UnicodeEscapeSequence’s CV, the result must still be a valid IdentifierName that has the exact same sequence of characters as the original IdentifierName. All interpretations of identifiers within this specification are based upon their actual characters regardless of whether or not an escape sequence was used to contribute any particular characters.

So, I’m not sure if there is a way to just convert those sequences into actual characters or if this is done automatically by PHP as they come in as GET parameters or what. Either way, my code above there is ignoring them. This means, identifiers with escape sequences will not be considered valid. If you have some good ideas on how to handle it, please leave a comment

jQuery: Nice and smooth hover effect

Torleif — Thu, 26 Aug 2010 17:44:31 +0000

Needed to add a hover effect on some table rows and wanted to make it look nice. Think I managed to get it quite smooth in the end and thought I could share it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// In the document ready event
$(function()
{
// Attach handler
$('table tbody').delegate('tr', 'hover', hoverHandler);
});

function hoverHandler(event)
{
switch(event.type)
{
// When mouse comes over
case 'mouseover':
$(this)
// Stop animation where it is
.stop(true)
// Start fading up
.animate({backgroundColor:'#fd8'}, 'fast');
break;

// When mouse goes out
case 'mouseout':
$(this)
// Jump to end of animation
.stop(true, true)
// Start fading down
.animate({backgroundColor:'transparent'}, 'slow');
break;
}
}

You can check out a live version at samples.geekality.net/hover-effect

I would like to have used a class instead of a hard-coded color though. I tried to use addClass and removeClass, but with animation those proved to be quite buggy in this case. The problem with hard-coded colors is first of all that it generally is much better to collect styles in style-sheets than to have them spread out in other code. Secondly, doing it this way will override any background-color the rows might have had before you hovered over them.

A case where the second can ruin things a bit is if you have alternated background colors. This could be worked around if you take it into account in the handler though. Just for fun I tried to do just that: samples.geekality.net/hover-effect/alt.php

Note that this might not work so well if your table is dynamic (if you sort, add or remove rows for example). But anyways, looks pretty cool I think

JavaScript: Uppercase first letter in a string

Torleif — Wed, 30 Jun 2010 13:21:07 +0000

In PHP there is a very handy function called ucfirst which

Returns a string with the first character of str capitalized, if that character is alphabetic.

Needed that in JavaScript, but discovered there was no such thing.

Luckily I quickly found a function over at StackOverflow that I adjusted slightly and added to the string class:

String.prototype.ucfirst = function()
{
return this.charAt(0).toUpperCase() + this.substr(1);
}

Can be used like so:

alert('some text'.ucfirst())
// Alerts: Some text

Alternative CSS method

In many cases it might be good to just handle this with CSS instead. For example, to uppercase the first letter in all list items, you can do this:

li:first-letter
{
text-transform: uppercase;
}

Weeee Ok, back to work…

PHP: How to easily provide JSON and JSONP

Torleif — Sun, 27 Jun 2010 18:03:28 +0000

Would you like to grab some server-side data through an AJAX call? For example by using the handy jQuery.ajax method?

A good data format to use then is JavaScript Object Notation, more commonly known as JSON. Providing data in the JSON format with PHP is super duper simple

JSON

All you need to do on the server side is to set the content-type to application/json, encode your data using the json_encode function and output it.

header('content-type: application/json; charset=utf-8');

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);

echo json_encode($data);

You can test it out for example in the FireBug console by running this line:

$.ajax({url: 'data.php'})
// Response: [1,2,3,4,5,6,7,8,9]

You should see the request being done in the console and also in the Net tab. If it didn’t work, you might be subject to the following:

Due to browser security restrictions, most “Ajax” requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

A nice and simple solution to that problem is JSON with padding, also known as JSONP.

JSONP

As stated on Wikipedia,

JSONP or “JSON with padding” is a complement to the base JSON data format, a usage pattern that allows a page to request and more meaningfully use JSON from a server other than the primary server.

I’m not sure I get everything about JSONP, but I have used it and I know that it works It’s almost just as easy as plain JSON actually, and all that’s needed is to wrap the JSON encoded data in a callback function provided as a GET parameter.

header('content-type: application/json; charset=utf-8');

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);

echo $_GET['callback'] . '('.json_encode($data).')';

You can test it by running

$.ajax({url: 'data.php', dataType:'jsonp'})
// Response: jsonp1277656587731([1,2,3,4,5,6,7,8,9])

This time you won’t see the call in the FireBug console though, but only in the Net tab. That’s because the data is loaded in a script tag instead of through an actual AJAX call. Thankfully jQuery handles all of that for you behind the scenes, so you don’t have to worry about it at all. You’ll get the same JSON data in your response handler, ready to be used however you want to

What if you’d like to provide both formats?

JSON and JSONP together

Easy as cake actually. You just need to check if the callback parameter is set or not:

header('content-type: application/json; charset=utf-8');

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
$json = json_encode($data);

echo isset($_GET['callback'])
? "{$_GET['callback']}($json)"
: $json;

And that’s all! Although there are some additions you could do if you want:

Cross-Origin Resource Sharing (CORS)

When testing this you might have noticed it will not work cross-domain. This is because of security stuff in your browser. So, if you want everyone to be able to get access to some JSON data of yours, you need to flag that this is OK. One way to do this, is through CORS:

Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries.
…
CORS defines how browsers and servers communicate when accessing sources across origins using HTTP headers to allow both the browser and the server to know enough about each other to determine if the request or response should succeed or fail. — enable-cors.org

You can read more about it on the enable-cors.org website, but all you should need to do if you want your JSON data accessible from everywhere is to add a single header.

header('content-type: application/json; charset=utf-8');
header("access-control-allow-origin: *");

// Rest of script...

It should now be accessible from everywhere

Added security

Since the sender can send whatever they want as a callback, you could potentially have someone injecting malicious code there. I’m not sure how likely this is to happen, but it is a possibility. Could for example be used to steal cookies. Not the baked kind… So, although it does make things a bit uglier, it’s better to be safe than sorry I suppose? So I did some research and ended up with a function I could use to check that the callback is indeed a valid JavaScript identifier. Here’s the code with the added security.

header('content-type: application/json; charset=utf-8');

function is_valid_callback($subject)
{
$identifier_syntax
= '/^[$_\p{L}][$_\p{L}\p{Mn}\p{Mc}\p{Nd}\p{Pc}\x{200C}\x{200D}]*+$/u';

$reserved_words = array('break', 'do', 'instanceof', 'typeof', 'case',
'else', 'new', 'var', 'catch', 'finally', 'return', 'void', 'continue',
'for', 'switch', 'while', 'debugger', 'function', 'this', 'with',
'default', 'if', 'throw', 'delete', 'in', 'try', 'class', 'enum',
'extends', 'super', 'const', 'export', 'import', 'implements', 'let',
'private', 'public', 'yield', 'interface', 'package', 'protected',
'static', 'null', 'true', 'false');

return preg_match($identifier_syntax, $subject)
&& ! in_array(mb_strtolower($subject, 'UTF-8'), $reserved_words);
}

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
$json = json_encode($data);

# JSON if no callback
if( ! isset($_GET['callback']))
exit($json);

# JSONP if valid callback
if(is_valid_callback($_GET['callback']))
exit("{$_GET['callback']}($json)");

# Otherwise, bad request
header('status: 400 Bad Request', true, 400);

Please comment if you have any feedback

Update: Added charset to the content-type header as recommended in an answer to a question I posted about this on StackOverflow.

Update: Added stuff about callback checking. Recommended in new answers to my question at StackOverflow.

Update: Discovered an easy way to compress the JSON data! Blogged about it too

Update: Added some info about cross-origin resource sharing