• Entries (RSS)
  • Comments (RSS)

Ajax with jQuery:A sample program

Posted by | Posted in JQuery | Posted on 30-03-2011

Lets see how to use Ajax with jQuery:

For this we are using two jsp pages. One page which contains the ajax call to the other and displays the content without refreshing the page.

Our first page is Ajax.jsp which depicts Shooping books Online applciation. In this page, the user is asked to enter the value in the image and press tab to see the list of books available for shopping online. If the user enters mismatching words , he will get an error message.

Steps:

1. Load the jquery.js file

2. Add a textbox to enter the characters and a paragraph area for the items to be displayed

3. Add the jquery function which does an ajax call to names.jsp and fetches the data. If the user enter the right credentials, fetched data will be displayed.

4. Output screens


Thus we have seen a very simple example of jquery with ajax

Share

JavaScript fading effect

Posted by | Posted in JavaScript | Posted on 25-09-2008

Tagged Under : , ,

JavaScript fading effect.

Have you come across a situation where you need to fade out some text message? Recently in one of my project I wanted to fade out the error message after few seconds.

This fading effect can be easily achieved with little JavaScript. The complete JavaScript code for fading effect is given below.

?View Code JAVASCRIPT
<html>
	<head>
		<script language="JavaScript">
			var value = 0;
 
			function fadeout(){ 
				if(value < 255) { 
					value += 10; 
					document.getElementById("msgblock").style.color="rgb(255,"+value+","+value+")";
					ID = setTimeout("fadeout()",20); 
				}
				else {
					clearTimeout(ID);
				}
 
			}
			function fade(){
				setTimeout("fadeout()",5000); 
			}
 
 
		</script>
	</head>
	<body>
		<div id="msgblock" style="color:red;">Javascript fading effect</div> 
		<br />
		<input type="button" value="Fade Effect" onclick="javascript:fade() " />
	</body>
</html>

The above code starts the fading effect after 5 seconds. The error message block was initially red in color. The trick used here is to change the color value in regular intervals using JavaScript. Once the color is white we can clear the timeout and our code will not execute again.

Share

Finding the value of a radio button

Posted by | Posted in JavaScript | Posted on 08-02-2008

Tagged Under :

In order to get the value of a radio button using JavaScript, we need to loop through all the radio buttons in that set and then find out the value of the radio button which is checked.

For eg:

<form name="frmRadio" method="post">
<input name="choice" value="1" type="radio" />1 
<input name="choice" value="2" type="radio" />2 
<input name="choice" value="3" type="radio" />3 
<input name="choice" value="4" type="radio" />4
	</form>

To get the selected choice we need to use the following code.

?View Code JAVASCRIPT
 
	<script language="JavaScript">
 
		function getRadioValue() {
			for (index=0; index < document.frmRadio.choice.length; index++) {
				if (document.frmRadio.choice[index].checked) {
					var radioValue = document.frmRadio.choice[index].value;
					break;
				}
			}
		}
 
	</script>

But the same code wouldn’t work when there is only one radio button. When there are two elements with the same name HTML would treat it as an array, but when there is only one radio button, it wouldn’t be an array and hence the above code wouldn’t work.
This problem comes when we generate the radio buttons dynamically as we don’t know the number of options present at design time. To solve this issue we can have a nice workaround. Just add one hidden element with the same name inside the form. We are done
For eg:

<form name="frmRadio">
<input name="choice" value="-1" type="hidden" />
<input name="choice" value="1" type="radio" />1
	</form>
Share