Technical notes

Posts

Showing posts from March, 2012

JQGrid Custom Validation

How to check whether EmailId already exists or not colModel:[{name:'emailId',index:'emailId', width:200,editable:true, sorttype:'int',editrules:{email:true, required:true, custom:true, custom_func:checkvalid}}], function checkvalid(value, colname) { var gr = jQuery("#list2").getGridParam('selarrrow'); if(gr=='') { var flag = false; var allRowsInGrid=$("#list2").getGridParam("records"); for(i=1;i<=allRowsInGrid;i++) { var rowId = $("#list2").getRowData(i); var emailId = rowId['emailId']; if(emailId == value) { flag = true; } } if(flag == true) return [false,"Email Id: Email already exist, Please enter a different email ID."];

jQuery to Simple Image Scroller

<!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" xml:lang="en-us"> <head> <title>jCarousel Examples</title> <link href="../style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="script/jquery-1.2.3.pack.js"> </script> <script type="text/javascript" src="script/jquery.jcarousel.pack.js"> </script> <link rel="stylesheet" type="text/css" href="style/jquery.jcarousel.css"/> <link rel="stylesheet" type="text/css" href="style/skin.css" /> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ }); }); </script>

jQuery To Simple tabs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Tabs</title> <script src="script/jquery-1.1.3.1.pack.js" type="text/javascript"></script> <script src="script/jquery.history_remote.pack.js" type="text/javascript"></script> <script src="script/jquery.tabs.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(function() {

jQuery Drop Down Menu

Steps to develop the Drop Down menu . Step 1: Create a new file (suckerfish.html) and add the following code into it: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>jQuery Drop Down Menu</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#van-one li").hover( function(){ $("ul", this).fadeIn("slow"); }, function() { } ); if (document.all) { $("#van-one li").hoverClass ("sfHover"); } }); $.fn.hoverCl

jQuery Toggle the Div

Steps to develop the Toggle of a Div . Step 1: Create a new file (jqrycollapse.html) and add the following code into it: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>JQuery Collapse</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $("#click_here").click(function(event) { event.preventDefault(); $("#div1").slideToggle(); }); $("#div1 a").click(function(event) { event.preventDefault(); $("#div1").slideUp();

JQuery Sliding elements example

For sliding effect jQuery has following methods : .slideDown( ) This method display the matched elements with a sliding effect. Example : Image is initially hidden, we can show it slowly : $('#clickme').click(function() { $('#imageNew').slideDown('slow', function() { // Animation complete. }); }); .slideToggle( ) This method is used to display or hide the matched element with sliding effect. .slideUp( ) This method is used to hide the element with sliding effect. Example(for slideToggle & slideUp) : In the below example, when you click on given button, a window opens .And if you again click on this button, it hides window. This window also contain a '[x]' button. When you click on it, it hides the window also. This window displays because the button click fires 'slideToggle' event, which slide u

How to add Horizontal Scroll bar and checkbox in JQGrid

autowidth:true, scrollable:true, shrinkToFit:false, autoheight:true, multiselect: true,

On Change Event in JQGrid

colModel:[ {name:'countryName',index:'countryName',width:100,editable:true,edittype:"select", editoptions:{value:countrylist, dataEvents :[ { type: 'change', fn: function(e) { var thisval = $(e.target).val(); $.get('state.htm?id='+thisval, function(data) { var res = $(data).html(); $("#stateName").html(res); })

Passing data to the Server

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method. Example: This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it: <html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} ); }); }); </script> </head> <body> <p>Enter your name and click on the button:</p> &l

Getting JSON data

There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action. Syntax: Here is the simple syntax for getJSON() method: [selector]. getJSON( URL, [data], [callback] ); Here is the description of all the parameters: URL: The URL of the server-side resource contacted via the GET method. data: An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string. callback: A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second. Example: Consider the following HTML file with a small JQuery coding: <html> <head> <

Loading simple data

This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job: Syntax: Here is the simple syntax for load() method: [selector]. load( URL, [data], [callback] ); Here is the description of all the parameters: URL: The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database. data: This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used. callback: A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text recieved from the server and second parameter is the status code. Example: Consider the following HTML file with a s

jQuery Hello World example

This section we are going to create our first jQuery application called "Hello World jQuery". This application will simply display " Hello World !! (display due to jQuery)" message in browser. After completing the example you will be able include the jQuery library in your application and use it to do simple functions. Let's start developing the Hello World application in jQuery. Setting up jQuery When you click on the following link it will open a page containing jQuery library script. This file is around 70kb.You need to save this as "jquery-1.4.2.js". Now we are ready to use jQuery inside your html page. Hello World Example(HelloWorld.html) <html> <head> <title>jQuery Hello World</title> <script type= "text/javascript" src= "jquery-1.4.2.js" ></script> </head> <script type= "text/javascript" > $ ( document ) .ready ( function (){

How To Make Jquery Ajax Call

This is my first blog post when I just started working on the Web Development. I had to call a Web Service in an HTML page to display the data on the screen. I googled and found multiple Ajax call examples but didn't find a simpler one to get started with. So, I created one myself so that I can refer it as and when needed. Check it out if that helps you as well: $.ajax({ type: "POST", url: "test.htm", data: "param1=value1&param2=value2", success: function() { // code to execute after the ajax call succeeds }, error: function() { // code to execute after the ajax call fails } }); Here, type:- is the request type i.e Get/Post/Put/Delete url:- is the url of the web service or the request data:- is used to send the parameters along with the request success:- is the callback function which triggers after the request returns