Tag Archive: javascript


Ajax using JQuery

Filed under: Technical — 4 Comments
July 27, 2008

Using JQuery, we can simply make Ajax call. JQuery provides us simple methods to make Ajax call using GET or POST. We can use any of these HTTP methods to make Ajax request using JQuery.

1. $.get() : Load a remote page using an HTTP GET request.

Syntax: $.get(String url, Map params, Function callback) returns XMLHttpRequest

Example 1: simple ajax call using $.get()

$.get(“test.php”);

Example 2: ajax call with parameter in query string

$.get(“test.php”, { name: “mohit”, age: “24″ } );

Example 3: ajax call handles response

$.get(“test.php”, function(data){
alert(“Ajax call complete”);
});

Example 4: ajax call with parameter in query string and handles response

$.get(“test.php”,
{ name: “mohit”, age: “24″ },
function(data){
alert(“Ajax call complete”);
}
);

2. $.post() : Load a remote page using an HTTP POST request.

Syntax: $.post(String url, Map params, Function callback) returns XMLHttpRequest

Example 1: simple ajax call using $.post()

$.post(“test.php”);

Example 2: ajax call with parameter

$.post(“test.php”, { name: “mohit”, age: “24″ } );

Example 3: ajax call handles response

$.post(“test.php”, function(data){
alert(“Ajax call complete”);
});

Example 4: ajax call with parameter and handles response

$.post(“test.php”,
{ name: “mohit”, age: “24″ },
function(data){
alert(“Ajax call complete”);
}
);

Isn’t it simple to use JQuery for AJAX…

Tags: , , , ,
Comment

JQuery script to change the alt attribute of all images

Filed under: javascript, Technical — Leave a comment
July 27, 2008

This is a small script, which change the alt attribute of all img (images) tags on the page:

$(document).ready(function() {

$(“img”).each(function(i) {

this.alt = ‘your new alt text’;

} );

})

Another complex script, which change the alt attribute of all img (images) tags on the page, to the title of the page, if the alt attribute is not set already.

$(document).ready(function() {

var title = $(“title”).html();

$(“img”).each(function(i) {

if(this.alt==”)

this.alt = title;

} );

})

JQuery makes the things as simpler as you cant imagine.

Tags: , , , , ,
Comment

Why Jquery ?

Filed under: Technical — Leave a comment
July 24, 2008

There have been a whole bunch of posts on this blog about the differences in code size between jQuery and Prototype. The basic premise of those posts (which I agree with) is that because of the way jQuery code is structured, all sorts of typical Javascript design patterns are rendered shorter and simpler in the framework when compared with Prototype.

A basic introduction to jQuery and the concepts that you need to know to use it.

<html>
  <head>
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

Edit the src attribute in the script tag to point to your copy of jquery.js.
For example, if jquery.js is in the same directory as your HTML file, you

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

Launching Code on Document Ready
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("abc") }

Inside of which is the code that you want to run right when the page
is loaded. Problematically, however, the Javascript code isn’t run
until all images are finished downloading (this includes banner ads).
The reason for using window.onload in the first place is due to the
fact that the HTML ‘document’ isn’t finished loading yet, when you
first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event:

$(document).ready(function(){
   // Your code here
 });

The remaining jQuery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on. Add the next section of code:

$("a").click(fuction(){
   palert("Thanksr feor visiting!");
 });

Adding a Class
Another common task is adding (or removing) a class. For example:

$("a").addClass("test");

source: http://docs.jquery.com/How_jQuery_Works

Tags: ,
Comment

Interesting behavior of Umlaut characters

Filed under: Technical — 2 Comments
July 24, 2008

I found an interesting behavior with umlaut characters (ö,ü …). When we calculate the length of a string having umlaut characters (using string length function), different language compilers gives the different results.

I did some testing in some programming & scripting languages, and got some interesting results. Have a look

Java 5:
“ü”.length(); //output : 2 (count 2 for umlaut character)
“üö”.length(); //output : 4
“aüö”.length(); //output : 5 (count 1 for simple characters and 2 for umlaut characters)

Javascript (tested on Firefox 2.0, IE6.0):
“ü”.length; //output : 1
“üö”.length; //output : 2
“aüö”.length; //output : 3

VBScript (tested on IE6.0):
Len(“ü”) //output : 1
Len(“üö”) //output : 2
Len(“aüö”) //output : 3

C#.NET (2005):
“ö”.Length; //output : 1
“üö”.Length; //output : 2
“aüö”.Length;//output : 3

VB.NET (2005):
“ö”.Length //output : 1
“üö”.Length //output : 2
“aüö”.Length//output : 3

PHP:
strlen(“ü”); //output : 2 (count 2 for umlaut character)
strlen(“üö”); //output : 4
strlen(“aüö”); //output : 5 (count 1 for simple characters and 2 for umlaut characters)

Turbo C++:
strlen(“ü”); //output : 1
strlen(“üö”); //output : 2
strlen(“aüö”); //output : 3

Your comments and views are invited.

Tags: , , , , , , , ,
Comment
Follow

Get every new post delivered to your Inbox.