Posts

Showing posts with the label jQuery

jQuery Autocomplete

Autocomplete using jQuery is quite easy. jQuery made this cumbersome work easy for programmers. So what is needed for autocomplete feature in your page jquery.js jquery.autocomplete.js jquery.autocomplete.css file Just include these three files in header. Ad the following script to your header function showItem(row) { return row[0]; } $(document).ready(function() { $("#category").autocomplete( "getcategory.php", { minChars:1, max: 200, scrollHeight: 180, formatItem:showItem } ); }); Let us depicts about the above code segments. Here #category means the category id on which you want autocomplete feature. and "getcategory.php" is the server side file which will provide result for autocomplete. Now let us discuss about the parameters. minChars : minimum character in the input to call autocomplete max: maximum item in the list. No more items exceeding this value will not be displayed. Its default value is 10 scrollHeight: this...

Simple Ajax Using jQuery

Ajax is a technique for handling data without reloading a page or without sending a postback. Often we want a loading indicator while Ajax request (xmlhttp request) is processing. A simple example is gmail email load indicator. Implementing this requirement using jQuery is quite easy. Interesting fact is that jQuery encapsulates ajax events which makes development task for programmer easy. We will use ajaxSend and ajaxComplete events of jQuery. ajaxSend attach a function that should be executed before an ajax request is sent. On the other hand ajaxComplete attach a function that should be executed when an ajax request completes. Here are the steps:- 1. include the jquery.js file. Download it from http://jquery.com 2.bind an event to the div where loading image placed.Initially the div id " loading"  is hidden. Code example is given below:- $(document).ready(function() {     /*shows the loading div every time we have an Ajax call*/  ...

jQuery selector example

Selector is most important part of jQuery. Here is some example how you can use jQuery to select an element from your html document. Suppose you have text box with id "user". Then the code to equivalent to document.getElementById("user").value is $("#user").val(). Look, here the slash (#) symbol denotes the id. if you use this slash symbol that means you are accessing the element by its id. var userName = $("#user").val(); The above line get the value of user text field. Now to set a value to user text box you have to write the following code:- $("#user").val("John"); Now, how to get an element by its name. jQuery give an easy command to do this. var stRoll = $("input[name=roll]"). If you have a radio group,textbox group, checkbox group with same name then the above code can be use to get value of all elements in the group. var values = new Array(); student = $("input[name=departments]"); Be...