Creating JSON Parser Using JQuery

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.

Live Demo – Online JSON Parser

Servlet, Hibernate, jQuery and Ajax based google like chat

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:

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

JavaScript Error “˜expected identifier, string or number’ in Internet Explorer (IE)

Yesterday my friend come across a javascript error “expected identifier, string or number” in internet explorer (IE). The same code was running great in Mozilla and chrome. here the snap of code causing an error:

Difference between $find and $get Methods

$get is used to get a reference to a DOM element. It is an alias for Sys.UI.DomElement.getElementById:

var myLabel = $get(‘myLabel’);

$find is an alias for Sys.Application.findComponent() and it’s used to get a reference to a particular component, given its id.

How to get DOM element using $find

var lnkAddNew = $find("CntrlID");
if(lnkAddNew)
{
    lnkAddNew.get_element().style.display = '';
}

Get Mouse Position in JavaScript for all browsers

function mouseXPos(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else return null;
}

function mouseYPos(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
else return null;
}

To use above function, just pass the mouse event.

Live Demo

Why Style.left does not work in Firefox, chrome and safari ?

During working on one of my project, i found that style.left does not work with Mozilla, chrome and safari but nicely works on internet explorer.

The code was :

var docStyle = document.getElementById("divAddPartnerAndProjectEntities").style;
docStyle.top = e.clientY;
docStyle.left = e.clientX-5;
docStyle .style.display = "";

And the simple solution is, append “px” at the end to work with other browsers.

and final code is:

var docStyle = document.getElementById("divAddPartnerAndProjectEntities").style;
docStyle.top = e.clientY+"px";
docStyle.left = e.clientX-5+"px";
docStyle .style.display = "";

Very Simple right ? 🙂

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:

Tag: Javascript