jQuery is nice piece of code that provides very good support for ajax. jQuery can be used to develop highly interactive web applications. In this jQuery tutorials series we will show you how to use jQuery to develop nice ajax based applications.
The jQuery is cross-browser JavaScript library and it helps the programmer’s to develop cross-browser application easily. There are many available for the jQuery for different functionality. You can write your own plugin and then use it with jQuery.j
you can download the latest version of jQuery from its official site http://jquery.com/
Downloading and installation jQuery
Visit http://jquery.com/
and download jquery-1.2.6.min.js and add into js directory of your application. You can rename it to jquery-1.2.6.js.
Query UI Interaction : Sortable
Using jQuery sortable plug-in , you can sort selected element by mouse drag.
Given below the necessary code line, which needs to included for this effect :
$(“#element”).sortable();
EXAMPLE :
sortable.html
<!DOCTYPE html><style type=”text/css”>#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script type=”text/javascript”> $(function() { $(“#sortable”).sortable(); $(“#sortable”).disableSelection(); }); </script> </head> <body> <div><ul id=”sortable”> <li><span></span>Item 1</li> <li><span></span>Item 2</li> <li><span></span>Item 3</li> <li><span></span>Item 4</li> <li><span></span>Item 5</li> <li><span></span>Item 6</li> <li><span></span>Item 7</li> </ul></div> </body> </html> |
Output :
You can drag element from mouse and place it anywhere in series :
jQuery UI Interaction : Resizable
Using jQuery resizable plug-in , you can make selected item resizable. Means you can resize it. Resizing by holding ‘ctrl’ key can resize it equally.
EXAMPLE :
resizable.html
<!DOCTYPE html> |
Output :
You can resize the below box :
jQuery UI Interaction : Droppable
Using jQuery droppable plug-in , you can make selected elements droppable (meaning they accept being dropped on by draggables).
All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):
- ui.draggable – current draggable element, a jQuery object.
- ui.helper – current draggable helper, a jQuery object
- ui.position – current position of the draggable helper { top: , left: }
- ui.offset – current absolute position of the draggable helper { top: , left: }
Example :
droppable.html
<!DOCTYPE html><div id=”droppable”>Drop here</div><div id=”draggable”>Drag me</div></body> </html> |
Output :
When you drop small box on big one , it will show a alert message :
Query UI Widget : Autocomplete
Using autocomplete widget , you can add autocomplete feature to your input field. In this field when you will start type something , it will provide a list of related possible values (starting from that letter which you already typed). When you click on any of these , it will auto complete the remaining text.
EXAMPLE :
autocompleteUI.html
<!DOCTYPE html><script>$(document).ready(function() { $(“input#autocomplete”).autocomplete({ source: [“c++”, “java”, “php”, “coldfusion”, “javascript”, “asp”, “ruby”] }); }); </script> </head> <body style=”font-size:62.5%;”> <h3><font color=”red”>Fill the below Field</font></h3> Type your language proficiency : <input id=”autocomplete” /> </body> </html> |
Output :
When you type something , for ex. java , it will show :
jQuery UI effects
The jQuery UI effects depends heavily on this file This file is utilizes by all other methods and can be also be used stand-alone. Please note that ui.core.js is not a dependency for the effects to work.
Example : UIeffects.html
<!DOCTYPE html>//run the currently selected effectfunction runEffect(){ //get effect type from var selectedEffect = $(‘#effectTypes’).val();//most effect types need no options passed by default var options = {}; //check if it’s scale or size – they need options explicitly set if(selectedEffect == ‘scale’){ options = {percent: 100}; } else if(selectedEffect == ‘size’){ options = { to: {width: 280,height: 185} }; }//run the effect $(“#effect”).show(selectedEffect,options,500,callback); };//callback function to bring a hidden box back function callback(){ setTimeout(function(){ $(“#effect:visible”).removeAttr(‘style’).hide().fadeOut(); }, 1000); };//set effect from select menu value $(“#button”).click(function() { runEffect(); return false; });$(“#effect”).hide(); }); </script></head> <div> <div> <select name=”effects” id=”effectTypes”> <a href=”#” id=”button”> </div> <div> <p>Select the effect and click the button to preview the effect.</p> </div> |
Output :
jQuery check username availability using JSP
In this section, you will learn to check username availability from database using JSP & jQuery. In the given below example, a username input field is given, when you type username it checks whether it is available means it shouldn’t exist in the database. In spite of that, it also checks that the value entered shouldn’t be special character. It also restrict from pressing ‘space bar’ or ‘enter’ keys.
registration_form.html
| <html> <head> <title>Registration Form</title> <style type=”text/css”> .style1 { text-align: left; } .style2 { text-align: left; color: #0000FF; } .style3 { color: #0000FF; } .style4 { color: #FF0000; } </style> <script type=”text/javascript” src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> $(document).ready(function(){ //called when key is pressed in textbox $(“#inputString”).keypress(function (e) { $(“#error”).hide(); $(“#autoSuggestionsList”).hide(); //if the letter is not digit then display error and don’t type anything if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57) && (e.which<65 || e.which>90)&& (e.which<97 || e.which>122)) { //display error message $(“#error”).html(“No Special Characters.Only number & alphabets”).show(); return false; } });}); function lookup(inputString) { if(inputString.length <5) { $(‘#suggestions’).show(); $(‘#autoSuggestionsList’).hide(); } else { $(‘#suggestions’).hide(); $.post(“CheckUsername.jsp”,{user: “”+inputString+””},function(data){ $(‘#autoSuggestionsList’).html(data).show(); }); } }</script> </head><body> <form> <h2> <strong>Registration Form</strong></h2> <h4> —————————————————————</h4> <h4><span>Enter desired username :</span> <input name=”Text1″type=”text” id=”inputString” style=”height: 20px” onkeyup=”lookup(this.value);”/> </h4><font color=”red”> <div id=”suggestions” style=”display: none;”> Value must be greater than 4 characters</div> <div style=”display: none;” id=”autoSuggestionsList”></div> <div style=”display: none;” id=”error”></div> </font> </form> </body></html> |
OUTPUT
If you enter special characters or less than 4 characters ,it will display:
If you enter username which is already available it will display :
Login through database with the help of jQuery ‘ajax’ & JSP
In this tutorial, we will discuss about how to use ajax function of jQuery to create a login page , which has a JSP page to perform database connection. In this example , login page contain jQuery ajax to make connection with JSP ,which is use to connect to database and check authenticity of user . And if user is correct , it shows a welcome quote. The script file has also a fade-in effect, which displays output with fade-in effect.
loginValidation.html
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”><HTML> <HEAD>
<TITLE> <script src=”jquery-1.4.2.js”></script> <script src=”loginValidation.js” type=”text/javascript”></script> <style type=”text/css”> .style1 { color: #0000FF; } .style3 { color: #CC0066; } </style> </HEAD> <BODY> <div> <form id=”formL” name=”formL” method=”post” onsubmit=”return false;”> <span class=”style3″><strong>Enter Username & Password to Login : <br> <span class=”style1″>Username : </span> <input name=”user” id=”user” type=”text”> <br><span class=”style1″>Password :</span> <input name=”pass” id=”pass” type=”password”> <br><input name=”button” id=”button” value=”Submit” type=”submit”> </form> </div> <div id=”targetDiv” style=”display: none;”> </div> </BODY> </HTML> |
loginValidation.js
$(document).ready(function(){ //function to check name and comment fieldfunction checkCommentsForm(){ if(userName.attr(“value”) && userPass.attr(“value”)) return true; else return false; } //When form submitted $(“#formL”).submit(function(){ if(checkCommentsForm()){ $.ajax({ type: “post” , url: “loginValidation.jsp” ,data: “user=”+userName.val()+”&pass=”+userPass.val(), success: function(msg) {$(‘#targetDiv’).hide();$(“#targetDiv”).html (“<h3>” + msg + “</h3>”).fadeIn(“slow”);} }); } else alert(“Please fill UserName & Password!”); return false; }); }); |
loginValidation.jsp
| <%@ page language=”java” import=”java.sql.*” %><%response.setContentType(“text/html”);
String userName=request.getParameter(“user”); String userPass=request.getParameter(“pass”); %> <h2><font color=blue> <% String connectionURL = Connection connection=null; ResultSet rs; String userNam=new String(“”); String passwrd=new String(“”); String name=new String(“”); response.setContentType(“text/html”); try { // Load the database driver Class.forName(“com.mysql.jdbc.Driver”); // Get a Connection to the database connection = DriverManager.getConnection(connectionURL, “root”, “root”); //Add the data into the database String sql = “select user,password from jqlogin”; Statement s = connection.createStatement(); s.executeQuery (sql); rs = s.getResultSet(); while (rs.next ()){ userNam=rs.getString(“user”); passwrd=rs.getString(“password”); if(userNam.equals(userName)&&passwrd.equals(userPass)){ name=userNam; } } rs.close (); s.close (); }catch(Exception e){ System.out.println(“Exception is ;”+e); } if(name.equals(userName)) { %> <font color=”red”>Welcome</font> <% out.println(name); } else{ out.println(“You are not an authentic person”); } %> </font></h2> |
OUTPUT
When login is incorrect :
When login is correct , it shows :
Java World 