Thursday, May 5, 2011

a nice list of firebug extensions

http://getfirebug.com/wiki/index.php/Firebug_Extensions

I love firebug and here are all the extensions for it. One thats nice is Yslow that will tell you how you can make your site's performance better.

making your own selectors in jquery

It was really cool when I found out you can make your own jquery selectors.

http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/

for instance you can do this
$.extend($.expr[':'],{
inline: function(a) {
return $(a).css('display') === 'inline';
}
});

then use it like this
$(':inline'); // Selects ALL inline elements
$('a:inline'); // Selects ALL inline anchors

the article also teaches how to store data in elements and ways you can get at that data with regular expressions. This is good because sometimes I store data in made up parameters in the dom but this is not valid html but if you store key value pairs with javascript on certain elements you can store stuff in the webpage and get it using jquery selectors or select certain items with a dom flag set using the data method of jquery.

Monday, May 2, 2011

Javascript escaping in an onclick handler

I was having trouble escaping quotes that are in an onclick handler.
The problem is that the onclick event is surounded by double quotes so there can not be any double quotes inside. I have javascript code in there that has single quotes and I escape other single quotes like this \' but double quotes can't be escaped. I found that a good way of allowing double quotes inside is to contert them to javascript escape characters such as \042 or \x22 or \u0022 which are all interprited by javascript as double quotes. If you use the " then you find out that the browser converts them to their double quote equivalents before the javascript engine can see them and then it causes javascript errors because it finds a double quote inside the onclick events double quotes and not the html entities.
Here is a list of other possibilites.
http://stackoverflow.com/questions/97578/how-do-i-escape-a-string-inside-javascript-inside-an-onclick-handler

here is the php functions that will take care of both the above javascript escaping and html escaping as well

<?php
function esc_js($value){
//use this in onclick handlers where all quotes need to be seen as quotes by javascript
//here is the double quote equivilent \x22
//here is the single quote equivilent \x27
$value = str_replace("\"","\\x22",$value);
$value = str_replace("'","\\x27",$value);
return $value;
}

function esc_html($value){
//this encodes both single and double quotes so they appear in textbox values correctly
$value = htmlentities($value,ENT_QUOTES);
return $value;
}
?>

$val1="test's test";
$val2='test"s test';
$val3="test\"s test's";

<a href="" onclick="alert('<?php echo esc_js($val1);?>');return false">test 1</a><br>
<a href="" onclick="alert('<?php echo esc_js($val2);?>');return false">test 2</a><br>
<a href="" onclick="alert('<?php echo esc_js($val3);?>');return false">test 3</a><br>