Disable inputs after submit to avoid double submission using JQuery and Ajax

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with 1 Comment on Disable inputs after submit to avoid double submission using JQuery and Ajax

This article will explain the safe way to submit the forms using JQuery. It will avoid accidental double submission.

This tutorial will explain one of the ways to avoid accidental submissions of form using the JQuery and Ajax. While developing the web application this is the most common bug ignored by the newbies.

I will use the JQuery library and the Ajax to accomplish this behavior.

Disable inputs after submit to avoid double submission using JQuery
Disable inputs after submit to avoid double submission using JQuery

Continue reading “Disable inputs after submit to avoid double submission using JQuery and Ajax”

Creating JSON Parser Using JQuery

Author posted by Jitendra on Posted on under category Categories Web Technology and tagged as Tags , with 2 Comments on Creating JSON Parser Using JQuery

JQuery JSON Tutorial – Creating JSON Parser Using JQuery with Source code and live demo

JSON stands for “Javascript Object Notation” and often used to interchange the data between servers. Its use is increased in web development because of its flexibility and data support.

I have created Online JSON parser using JQuery library.

 

JSON Parser Using JQuery Tutorial
JSON Parser Using JQuery Tutorial

Live Demo – Online JSON Parser

Continue reading “Creating JSON Parser Using JQuery”

Servlet, Hibernate, jQuery and Ajax based google like chat

Servlet, Hibernate, jQuery and Ajax based google like chat with source code

Hi, In this article, my aim is to create an application which uses the concept of Hibernate in Servlet with Ajax support of Jquery.
Below figure can give you the idea of final look and feel of the complete application:

Servlet, Hibernate, jQuery and Ajax based google like chat
Servlet, Hibernate, jQuery and Ajax based google like chat

Continue reading “Servlet, Hibernate, jQuery and Ajax based google like chat”

Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net

Author posted by Jitendra on Posted on under category Categories ASP.NET and tagged as Tags , , with 9 Comments on Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net

Tutorial on creating Ajax Based Multiselect JQuery Autocomplete User Control in ASP.Net

In this article i will explain step by step creating Ajax Based Multi select JQuery Autocomplete User Control.

Here, we will use Jquery UI Tool’s Autocomplete Control. To get the Data using AJAX, here we will try Handlers of ASP. Using Handlers against simple asp.net page is that, if we will use ASPX page then it will go through all the phases of page (nearly 1o) whereas Handler is faster than ASPX page.

Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net
Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net

Step 1 : creating Handler

In step 1, we will create the handler which will provide the data in form of JSON. To know more about  creating JSON is C#, read this article written by me on codeproject.

Continue reading “Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net”

Highlight Current field using JQuery

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , , with 1 Comment on Highlight Current field using JQuery

Write below HTML code :

This will create two text boxes.

<form>
	<div>
		<label for="Name">Name:</label>
		<input name="Name" type="text"></input>
	</div>
	<div>
		<label for="Email">Email:</label>
		<input name="Email" type="text"></input>
	</div>
</form>

Using jQuery, we can watch for an event where an input form comes into focus:

Add link to JQuery file in script tag as shown in below line:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" />

Now, add below CSS in document.

div.curFocus {
background: #fdecb2;
}

Then at last write JQuery / javascript code on focus event and blur event (opposite of focus event in javascript ) .

$(document).ready(function(){

$("input").focus(function() {

$(this).parent().addClass("curFocus")

});

$("input").blur(function() {

$(this).parent().removeClass("curFocus")

});

});

We are using the advantage of jquery of adding and removing the CSS class. we cannot left blank to CSS class, as it may remove the existing other class from the tag.

$(document).ready(function(){

This line causes the execution of jquery after complete loading of page.

Output:

Selecting field using jquery
Selecting field using jquery

View Demo