technology articles - life articles - health articles - love articles » Jquery

check keycode enter use javascript

admin — Thu, 11 Feb 2010 09:19:28 +0000

This function use to check enter on form with jquery

function check_key(e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
if(keycode == 13){
return false;
}

}

PHP, JSON and JavaScript usage

admin — Tue, 22 Sep 2009 06:44:54 +0000

Today i want to introduce you to jSON (JavaScript Object Notation), in short, it is a simple format designed to exchange data between different programming languages. I will show you how to create JavaScript object, convert it to JSON string, and send to PHP script, which will decode jSON string to readable format (for PHP). But that’s not all, PHP script will create it’s own data object encode it to jSON string and send it back. All communication between JavaScript and PHP will be done thru AJAX.

If you haven’t heared about jSON yet, then you can visit Wikipedia for more information. The other technology you need to be familiar with before reading this article is AJAX. If you need to, you can read my Introduction to AJAX post. Also if you are looking professional top notch PHP&AJAX knowledge i recommend you one of books below

Last note before we start, i am constantly working to make my articles as useful for you as possible, so beginning from this tutorial in each of my programming tutorials, at the end of the article you will find complete source code for download.

JSON objects

Usually when it comes to JSON we have an encoded string in mind, however JSON is a subset of JavaScript and in this programming language it can be used as is, to create objects. Simple JavaScript object created using JSON notation can look like this:

var JSONstring =
{
    "firstname": "Greg",
    "email": "greg@fake_email.com",
    "hobby":
    [
	{
	    "hobbyName": "sport",
            "isHobby": "true"
	},
        {
		"hobbyName": "reading",
	        "isHobby": "true"
	},
        {
		"hobbyName": "music",
	        "isHobby": "false"
	}
    ]
};

Accessing fields is done like in any other JS object (mainly because it is “normal” JavaScript object), if we want to know if hobby “reading” was checked then we would have to write:

1	JSONstring.hobby[1].isHobby; // true

Creating JavaScript Objects

Before we start, we will need something to work with. We will create HTML form with “validate” button, when someone clicks this button the whole proccess i described in the first paragraph will start. Also, despite JSON is a subset of JavaScript there are no built in function for converting JavaScript object into JSON string, so we will use already created class available at JSON homepage, the file is located here json2.js.

Here is the code for the HTML form, i think there is no need to explain it:

</script>
<html>
<head><TITLE>ditio.net jSon Tutorial</TITLE>
<script src="http://www.json.org/json2.js"></script>
<script>
// JavaScript source code will be here
</head>
<body>
<form name="personal" action="" method="POST">
Name <input type="text" name="firstname"><br>
Email <input type="text" name="email"><br>
Hobby
	<input type="checkbox" name="hobby" value="sport"> Sport
	<input type="checkbox" name="hobby" value="reading"> Reading
	<input type="checkbox" name="hobby" value="music"> Music
<input type="button" name="valid" value="Validate" onclick="validate()">
</form>
</body>
</html>

After clicking “validate” button validate() function will be called, we need to add it, in head section for example:

function validate()
{
    var p = document.forms['personal'];

    var JSONObject = new Object;
    JSONObject.firstname = p['firstname'].value;
    JSONObject.email = p['email'].value;
    JSONObject.hobby = new Array;

    for(var i=0; i<3; i++)
    {
        JSONObject.hobby[i] = new Object;
	JSONObject.hobby[i].hobbyName = p['hobby'][i].value;
	JSONObject.hobby[i].isHobby = p['hobby'][i].checked;
    }

    JSONstring = JSON.stringify(JSONObject);
    runAjax(JSONstring);

}

Code is quite easy to understand. First i assign whole form to variable p just to make further access to this form data easier. In next lines JavaScript object is created, as you can see it consists only from Object and Array data objects.

Note that this is completely the same object as in first listing of this tutorial, however different method was used to create it.

Sending JSON object to PHP with AJAX

I do not want ot get into AJAX here because it is not the topic of this tutorial, i will use code from my Introduction to AJAX post, if you do not want ot go there then remember that at the end of this article there is whole source code waiting to be downloaded.

var request;
function runAjax(JSONstring)
{
    // function returns "AJAX" object, depending on web browser
    // this is not native JS function!
    request = getHTTPObject();
    request.onreadystatechange = sendData;
    request.open("GET", "parser.php?json="+JSONstring, true);
    request.send(null);
}

// function is executed when var request state changes
function sendData()
{
    // if request object received response
    if(request.readyState == 4)
    {
	// parser.php response
	var JSONtext = request.responseText;
	// convert received string to JavaScript object
	var JSONobject = JSON.parse(JSONtext);

	// notice how variables are used
	var msg = "Number of errors: "+JSONobject.errorsNum+
		"\n- "+JSONobject.error[0]+
		"\n- "+JSONobject.error[1];

	alert(msg);
    }
}

That’s it we are half way there, now we need to create PHP script to handle AJAX request.

JSON and PHP

Decoding JSON string is very simple with PHP only one line of code is needed to parse string into object. Similary only one function is needed to encode PHP object or array into JSON string, look at the code:



// decode JSON string to PHP object
$decoded = json_decode($_GET['json']);

// do something with data here

// create response object
$json = array();
$json['errorsNum'] = 2;
$json['error'] = array();
$json['error'][] = 'Wrong email!';
$json['error'][] = 'Wrong hobby!';

// encode array $json to JSON string
$encoded = json_encode($json);

// send response back to index.html
// and end script execution
die($encoded);

?>

It is also interesting what is inside $decode variable

stdClass Object
(
    [firstname] => fgfg
    [email] =>
    [hobby] => Array
        (
            [0] => stdClass Object
                (
                    [hobbyName] => sport
                    [isHobby] => 1
                )

            [1] => stdClass Object
                (
                    [hobbyName] => reading
                    [isHobby] =>
                )

            [2] => stdClass Object
                (
                    [hobbyName] => music
                    [isHobby] =>
                )

        )
)

PHP finished execution, then “request” object status in JavaScript is now equal to 4. Response text (in sendData() function) will be parsed with JSON class to object and used to display message on the screen. Note that instead of using JSON.parse() we could use JavaScriipt eval() function.

Conclusion

This tutorial was intended to introduce you to JSON, and i wanted to make this tutorial as clear as possible so i intentionally used the simplest methods to achieve my goal. However this tutorial wouldn’t be complete if i wouldn’t give you further resources from which you can learn more.

First you should check out is Zend_Json class (a part of Zend Framework), it has the same functionality as json_decode() and json_decode(), but can handle more complicated JSON strings then those two functions.

Second is json.org home of JSON, check especially this tutorial, it has got great examples of more advanced JSON class usage.

Download code – json -javascript-php

10 Ways to Instantly Increase Your jQuery Performance

admin — Fri, 04 Sep 2009 03:24:22 +0000

1. Always Use the Latest Version

jQuery is in constant development and improvement. John and his team are always researching new ways to improve program performances. As a sidenote, just a few months ago, he released Sizzle, a selector library that’s said to improve program performances up to 3 times in Firefox.

If you want to stay up to date without having to download the library a thousand times, GIYF (Google Is Your Friend), in this situation too. Google provides a lot of Ajax libraries from which to choose.

view plain copy to clipboard print ?

<script type=“text/javascript” src=“http://www.google.com/jsapi”>script>
<script type=“text/javascript”>
/* and load minified jQuery v1.3.2 this way */
google.load (“jquery”, ”1.3.2″, {uncompressed: false});
/* this is to display a message box
when the page is loaded */
function onLoad () {
alert (“jQuery + Google API!”);
}
google.setOnLoadCallback (onLoad);
script>

* Editor’s Note: Perhaps, the quicker and easier method is to simply link to the script directly. Rather than hard-coding the specific version of jQuery directly (1.3.2), you should instead use 1, which will automatically reference the most recent version of the library.

view plain copy to clipboard print ?

<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js”>script>

2. Combine and Minify Your Scripts

The majority of browsers are not able to process more than one script concurrently so they queue them up — and load times increase. Assuming the scripts are to be loaded on every page of your website, you should consider putting them all into a single file and use a compression tool (such as Dean Edwards’) to minify them. Smaller file sizes equal faster load times.

The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). — From YUI compressor, an excellent tool jQuery officially reccomends to minify scripts.

3. Use For Instead of Each

Native functions are always faster than any helper counterparts. Whenever you’re looping through an object received as JSON, you’d better rewrite your JSON and make it return an array through which you can loop easier.

Using Firebug, it’s possible to measure the time each of the two functions takes to run.

view plain copy to clipboard print ?

var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time(‘native’);
var l = array.length;
for (var i=0;i
array[i] = i;
}
console.timeEnd(‘native’);
console.time(‘jquery’);
$.each (array, function (i) {
array[i] = i;
});
console.timeEnd(‘jquery’);

	var array = new Array ();
	for (var i=0; i<10000; i++) {
		array[i] = 0;
	}

	console.time('native');
	var l = array.length;
	for (var i=0;i

The above results are 2ms for native code, and 26ms for jQuery’s “each” method. Provided I tested it on my local machine and they’re not actually doing anything (just a mere array filling operation), jQuery’s each function takes over 10 times as long as JS native “for” loop. This will certainly increase when dealing with more complicated stuff, like setting CSS attributes or other DOM manipulation operations.
4. Use IDs Instead of Classes
It’s much better to select objects by ID because of the library’s behavior: jQuery uses the browser’s native method, getElementByID(), to retrieve the object, resulting in a very fast query.
So, instead of using the very handy class selection technique, it’s worth using a more complex selector (which jQuery certainly doesn’t fail to provide), write your own selector (yes, this is possible, if you don’t find what you need), or specify a container for the element you need to select.


view plaincopy to clipboardprint?


// Example creating a list and filling it with items 
//  and selecting each item once 
 
console.time(‘class’); 
var list = $(‘#list’); 
var items = ‘’; 
 
for (i=0; i<1000; i++) { 
 items += ‘ + i + ‘”>item
’; 
} 
 
items += ‘
’; 
list.html (items); 
 
for (i=0; i<1000; i++) { 
 var s = $(‘.item’ + i); 
} 
console.timeEnd(‘class’); 
 
console.time(‘id’); 
var list = $(‘#list’); 
var items = ‘’; 
 
for (i=0; i<1000; i++) { 
 items += ‘ + i + ‘”>item
’; 
} 
 
items += ‘
’; 
list.html (items); 
 
for (i=0; i<1000; i++) { 
 var s = $(‘#item’ + i); 
} 
console.timeEnd(‘id’); 


	// Example creating a list and filling it with items
	//  and selecting each item once

	console.time('class');
	var list = $('#list');
	var items = '';

	for (i=0; i<1000; i++) {
		items += 'item';
	}

	items += '';
	list.html (items);

	for (i=0; i<1000; i++) {
		var s = $('.item' + i);
	}
	console.timeEnd('class');

	console.time('id');
	var list = $('#list');
	var items = '';

	for (i=0; i<1000; i++) {
		items += 'item';
	}

	items += '';
	list.html (items);

	for (i=0; i<1000; i++) {
		var s = $('#item' + i);
	}
	console.timeEnd('id');
The above code really shows the differences between the two ways of selecting elements, highlighting a never-ending over 5 seconds time to load the class driven snippet.

5. Give your Selectors a Context
As stated in jQuery’s documentation,
The DOM node context originally passed to jQuery() (if none was passed then context will be equal to the document). 	It should be used in conjunction with the selector to determine the exact query used.
So, if you must use classes to target your elements, at least prevent jQuery from traversing the whole DOM using selectors appropriately.
Instead of


view plaincopy to clipboardprint?


$(‘.class’).css (‘color’ ‘#123456′); 


	$('.class').css ('color' '#123456');
always go for contextualized selectors in the form:


$(expression, context) 


	$(expression, context)
thus yielding


view plaincopy to clipboardprint?


$(‘.class’, ‘#class-container’).css (‘color’, ‘#123456′); 


	$('.class', '#class-container').css ('color', '#123456');
which runs much faster, because it doesn’t have to traverse the entire DOM —  just the #class-container element.
6. Cache. ALWAYS.
Do not make the mistake or reusing your selectors time and time again. Instead, you should cache it in a variable. That way, the DOM doesn’t have to track down your element over and over again.
Never select elements multiple times inside a loop EVER! It’d be a speed-killer!


view plaincopy to clipboardprint?


$(‘#item’).css (‘color’, ‘#123456′); 
$(‘#item’).html (‘hello’); 
$(‘#item’).css (‘background-color’, ‘#ffffff’); 
 
// you could use this instead 
$(‘#item’).css (‘color’, ‘#123456′).html (‘hello’).css (‘background-color’, ‘#ffffff’); 
 
// or even 
var item = $(‘#item’); 
item.css (‘color’, ‘#123456′); 
item.html (‘hello’); 
item.css (‘background-color’, ‘#ffffff’); 
 
 
// as for loops, this is a big no-no 
console.time(‘no cache’); 
for (var i=0; i<1000; i++) { 
 $(‘#list’).append (i); 
} 
console.timeEnd(‘no cache’); 
 
// much better this way 
console.time(‘cache’); 
var item = $(‘#list’); 
 
for (var i=0; i<1000; i++) { 
 item.append (i); 
} 
console.timeEnd(‘cache’); 


	$('#item').css ('color', '#123456');
	$('#item').html ('hello');
	$('#item').css ('background-color', '#ffffff');

	// you could use this instead
	$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');

	// or even
	var item = $('#item');
	item.css ('color', '#123456');
	item.html ('hello');
	item.css ('background-color', '#ffffff');

	// as for loops, this is a big no-no
	console.time('no cache');
	for (var i=0; i<1000; i++) {
		$('#list').append (i);
	}
	console.timeEnd('no cache');

	// much better this way
	console.time('cache');
	var item = $('#list');

	for (var i=0; i<1000; i++) {
		item.append (i);
	}
	console.timeEnd('cache');
And, as the following chart exemplifies, the results of caching are evident even in relatively short iterations.

7. Avoid DOM Manipulation
DOM manipulation should be as limited as possible, since insert operations like prepend(), append(), after() are rather time-consuming.
The above example could be quickened using html() and building the list beforehand.


view plaincopy to clipboardprint?


var list = ”; 
 
for (var i=0; i<1000; i++) { 
 list += ‘
’+i+‘
’; 
} 
 
(‘#list’).html (list); 


	var list = '';

	for (var i=0; i<1000; i++) {
		list += ''+i+'';
	}

	('#list').html (list);
8. No String concat(); Use join() for Longer Strings
It might appear strange, but this really helps to speed things, especially when dealing with long strings of text that need to be concatenated.
First create an array and fill it with what you have to join together. The join() method will prove much faster than the string concat() function.


view plaincopy to clipboardprint?


var array = []; 
for (var i=0; i<=10000; i++) { 
 array[i] = ‘
’+i+‘
’; 
} 
 
$(‘#list’).html (array.join (”)); 


	var array = [];
	for (var i=0; i<=10000; i++) {
	    array[i] = ''+i+'';
	}

	$('#list').html (array.join (''));
However, recent tests conducted by Tom Trenka contributed to the creation of the following chart.

“The += operator is faster—even more than pushing string fragments into an array and joining them at the last minute” and “An array as a string buffer is more efficient on all browsers, with the exception of Firefox 2.0.0.14/Windows, than using String.prototype.concat.apply.” — Tom Trenka
9. Return False
You may have noticed whenever your functions don’t return false, you jump to the top of the page. When dealing with longer pages, this result can be quite annoying.
So, instead of


view plaincopy to clipboardprint?


$(‘#item’).click (function () { 
 // stuff here 
}); 


	$('#item').click (function () {
		// stuff here
	});
take the time to write


view plaincopy to clipboardprint?


$(‘#item’).click (function () { 
 // stuff here 
 return false; 
}); 


	$('#item').click (function () {
		// stuff here
		return false;
	});
10. Bonus tip – Cheat-sheets and Library References

This isn’t a speed up tip, but could end up, in a round about way, being one if you take the time to find your way through cheatsheets and function references. Save yourself some time and keep a cheat-sheet within an arm’s reach.