Encoding / decoding UTF8 in javascript

From time to time it has somewhat annoyed me that UTF8 (today's most common Unicode transport encoding, recommended by the IETF) conversion is not readily available in browser javascript. It really is, though, I realized today:

function encode_utf8(s) {
  return unescape(encodeURIComponent(s));
}

function decode_utf8(s) {
  return decodeURIComponent(escape(s));
}

2012 Update: Monsur Hossain took a moment to explain how and why this works. It's a good, in-depth post citing all standards in play so you need not bring a wizard's beard to know why it works. Executive summary: escape and unescape operate solely on octets, encoding/decoding %XXs only, while encodeURIComponent and decodeURIComponentencode/decode to/from UTF-8, and in addition encode/decode %XXs. The hack above combines both tools to cancel out all but the UTF-8 encoding/decoding parts, which happen inside the heavily optimized browser native code, instead of you pulling the weight in javascript. 

Tested and working like a charm in these browsers:

Win32

• Firefox 1.5.0.6
• Firefox 1.5.0.4
• Internet Explorer 6.0.2900.2180
• Opera 9.0.8502

MacOS

• Camino 2006061318 (1.0.2)
• Firefox 1.5.0.4
• Safari 2.0.4 (419.3)

Any modern standards compliant browser should handle this code, though, so don't worry that it's a rather sparse test matrix. But feel free to use my test case: encoding anddecoding the word "räksmörgås". That's incidentally Swedish for a shrimp sandwich, by the way -- very good subject matter indeed.

And if you hand me your platform/browser combination and the its success/failure status for the tests, I'll try to update the post accordingly.

Categories:

• javascript
• unicode
• utf8
• tips

mysql allow remoe access

Solution:

When you have completed the installation of the MySQL into the server. You can run this command:

GRANT ALL PRIVILEGES ON *.* TO 'USERNAME'@'IP' IDENTIFIED BY 'PASSWORD';

Username - is the account you wish to create or use.

IP - is the physical IP address of the computer you wish to grant remote access to. [note: if you enter '%' instead of an IP address, that user will be able to remote into MySQL from any computer]

Password - is the password you wish to create if it’s a new user or the existing password of an existing account.

Once the command is sent and completed you must run this command afterward:

FLUSH PRIVILEGES;

jqwidgets: Grid Cells Formatting

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsformatting.htm

jqxGrid

The cellsformat property can be used for applying a formatting to the cell values. In the code example below is illustrated how to apply a custom formatting to a column with Date values and to a column with Numeric values.

Js

1. $("#jqxgrid").jqxGrid(  
2. {  
3.     width: 670,  
4.     height: 450,  
5.     source: source,  
6.     theme: theme,  
7.     sortable: true,  
8.     columns: [  
9.         { text: 'Ship Name', datafield: 'ShipName', width: 250 },  
10.         { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },  
11.         { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },  
12.         { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },  
13.         { text: 'Ship City', datafield: 'ShipCity', width: 100 },  
14.         { text: 'Ship Country', datafield: 'ShipCountry', width: 100 }  
15.     ]  
16. });  

Number format strings:
"d" - decimal numbers.
"f" - floating-point numbers.
"n" - integer numbers.
"c" - currency numbers.
"p" - percentage numbers. 

For adding decimal places to the numbers, add a number after the formatting string.
For example: "c3" displays a number in this format $25.256
Built-in Date formats:

// short date pattern
"d" - "M/d/yyyy",
// long date pattern
"D" - "dddd, MMMM dd, yyyy",
// short time pattern
"t" - "h:mm tt",
// long time pattern
"T" - "h:mm:ss tt",
// long date, short time pattern
"f" - "dddd, MMMM dd, yyyy h:mm tt",
// long date, long time pattern
"F" - "dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day pattern
"M" - "MMMM dd",
// month/year pattern
"Y" - "yyyy MMMM",
// S is a sortable format that does not vary by culture
"S" - "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss" 

Date format strings:

"d"-the day of the month;
"dd"-the day of the month;
"ddd"-the abbreviated name of the day of the week;
"dddd"- the full name of the day of the week;
"h"-the hour, using a 12-hour clock from 1 to 12;
"hh"-the hour, using a 12-hour clock from 01 to 12;
"H"-the hour, using a 24-hour clock from 0 to 23;
"HH"- the hour, using a 24-hour clock from 00 to 23;
"m"-the minute, from 0 through 59;
"mm"-the minutes,from 00 though59;
"M"- the month, from 1 through 12;
"MM"- the month, from 01 through 12;
"MMM"-the abbreviated name of the month;
"MMMM"-the full name of the month;
"s"-the second, from 0 through 59;
"ss"-the second, from 00 through 59;
"t"- the first character of the AM/PM designator;
"tt"-the AM/PM designator;
"y"- the year, from 0 to 99;
"yy"- the year, from 00 to 99;
"yyy"-the year, with a minimum of three digits;
"yyyy"-the year as a four-digit number;
"yyyyy"-the year as a four-digit number.
Grid Cells Formatting Sample

Js

1. $("#jqxgrid").jqxGrid(  
2. {  
3.     width: 670,  
4.     height: 450,  
5.     source: source,  
6.     theme: theme,  
7.     sortable: true,  
8.     columns: [  
9.         { text: 'Ship Name', datafield: 'ShipName', width: 250, sortable: false },  
10.         { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },  
11.         { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },  
12.         { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },  
13.         { text: 'Ship City', datafield: 'ShipCity', width: 100 },  
14.         { text: 'Ship Country', datafield: 'ShipCountry', width: 100 }  
15.     ]  
16. });  

jQuery Validation – Show & Focus on first error only!

Have you ever wanted to show one error message at a time, or create a different type of visual queue for a specific invalid element on a form? Using the validate options, you can easily create any effect you want.

The example below, is designed to show the first error message in a form and to set focus on that first element. The message is displayed in a basic JavaScript alert box, not very elegant but it makes for a simple demo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Show JS Alert - First Validation Error</title>

<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

<script src="Scripts/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#elForm").validate({

onfocusout: false,

invalidHandler: function(form, validator) {

var errors = validator.numberOfInvalids();

if (errors) {

alert(validator.errorList[0].message);

validator.errorList[0].element.focus();

}

},

rules: {

TextBox1: { required: true, minlength: 2 },

TextBox2: { required: true, minlength: 2 },

TextBox3: { required: true, minlength: 2 }

},

messages: {

TextBox1: { required: "TextBox1 Required", minlength: "TextBox1 MinLength" },

TextBox2: { required: "TextBox2 Required", minlength: "TextBox2 MinLength" },

TextBox3: { required: "TextBox3 Required", minlength: "TextBox3 MinLength" }

},

errorPlacement: function(error, element) {

// Override error placement to not show error messages beside elements //

}

});

});

</script>

<style type="text/css">

label { width: 90px; display: block; float: left; }

ul { list-style: none; }

ul li { line-height: 1.8; }

</style>

</head>

<body>

<form id="elForm" action="#">

<div>

<h1>jQuery Validation - Show First Error Only</h1>

<ul>

<li><label>Text Box 1</label><input type="text" name="TextBox1" id="TextBox1" value="" /></li>

<li><label>Text Box 2</label><input type="text" name="TextBox2" id="TextBox2" value="" /></li>

<li><label>Text Box 3</label><input type="text" name="TextBox3" id="TextBox3" value="" /></li>

</ul>

<input type="submit" id="submit" value="Validate" />

</div>

</form>

</body>

</html>

Here are the important parts to focus on.

1. invalidHandler, this option give you access to the current validator and all the errors messages/items via the “validator.errorlist”.

invalidHandler: function(form, validator) {

var errors = validator.numberOfInvalids();

if (errors) {

alert(validator.errorList[0].message);  //Only show first invalid rule message!!!

validator.errorList[0].element.focus(); //Set Focus

}

}

2. errorPlacement, this function controls how error messages are displayed. Since we don’t want any error messages displayed by default, we can override the default errorPlacement with a empty method call.

errorPlacement: function(error, element) {

// Override error placement to not show error messages beside elements //

}

The end result is a alert box showing the first broken rule for the first invalid element on the page. In the example each input has 2 rules (required and minLength), if you enter a single character into the first text box the message will change from “TextBox1 Required” to “TextBox1 MinLength”.