01.5.2010

More about jQuery AJAX

Bookmark and Share
Add to DZone

jQuery made AJAX simple by using .ajax() function.
The syntax for this function is:

$.ajax( /* properties */);

Now let me explain what properties we can use in this function.

First, I would like to tell you what basic (standard) options for .ajax() as follow:
Properties:
- url: String /* The URL to send the request to */
- type: String /* The request type ("GET", "POST") */
- contentType: String /* default: "application/x-www-form-urlencoded" */
- data: Object, String /* Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2' */

Events:
- beforeSend: Function /* This function runs just before sending the request */
- success: Function /* This is an important part. Here we run the code because the request is done */
- complete: Function /* This function runs after the success is done and errors are shown */
- error: Function /* This function runs when error occurred
function(ajaxHnadler,eventHandler){
// ajaxHandler: xmlHTTP object
// eventHandler: handles the event as string
*/
- timeout: Function /* runs when request is timed out */

There are more options, you can check them on jQuery website.
Actually, I cannot create a demo to test all mentioned properties and methods... So, if you experienced a problem or need some help, please contact me.

For more information about jQuery AJAX Please visit: click here.
You can also read about .GET and .POST

08.3.2009

jQuery: Catch Keyboard Events

Bookmark and Share
Add to DZone

Link: http://www.freelancer-id.com/files/jkey/

Lot of jQuery projects relies on keyboard/mouse event like pressing "p" for previous and "n" for next also using the arrows.

Because this is important, I have managed a code to get the keyboard character on 3 events:
- Keypress
- Keyup
- Keydown

I have created a function to return the key as below:

function getKey(key){
if ( key == null ) {
keycode = event.keyCode;
// To Mozilla
} else {
keycode = key.keyCode;
}
// Return the key in lower case form
return String.fromCharCode(keycode).toLowerCase();
}

Now let's use the events:

/*Keypress*/
$(document).keypress(function (eh){
alert("Keypress: The key is: "+getKey(eh));
});

/*Keyup*/
$(document).keyup(function (eh){
alert("Keyup: The key is: "+getKey(eh));
});

/*keydown*/
$(document).keydown(function (eh){
alert("Keydown: The key is: "+getKey(eh));
});

To see an exaple of this code, please check the demo below:
jKey demo

Have fun.

01.12.2009

Image lightbox (imageflow) and image enlargement with Jquery

Bookmark and Share
Add to DZone

While I was looking for a way to make a good lightbox with Javascript, I found a better way to do that. A simple code with a absolute result.

I used many ways to create this lightbox or as some people call "Image Flow", but this way is a better way in my openion.
I used Jquery plugin and generated some code to get a great result.

Here is the explanation and the demo code for this script:

Read more »

Free Blog Themes / Templates