Tag Archives: jQuery

Automatic ajax call using jQuery

Total used files :

  • index.php
  • jquery.js
  • random.php

I am using jQuery’s setInterval() method to automatically make the ajax call in every 2 seconds.

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Refresh Page itself</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var callAjax = function(){
          $.ajax({
            method:'get',
            url:'random.php',
            success:function(data){
              $("#sample").html(data);
            }
          });
        }
        setInterval(callAjax,2000);
      });
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <?php
    print "Below number changes in 2 seconds interval, View-Source of this page to see the usuage of jquery for content refresh.<div id='sample'>100 </div>";
    ?>
  </body>
</html>

In above code, the interesting code is in line 17,

setInterval(callAjax,2000);

which calls the callAjax function in every 2 seconds. Here 2000 is supplied in milliseconds.

line 11 – sets the url to “random.php”

line 13 – replaces the #sample div with the response from the “random.php” file that is the output of

print 5*rand(1,100);

And this is the code for “random.php” that is called by ajax call in every 2 seconds.
random.php

<?php
print 5*rand(1,100);

You can test the demo online at http://www.samundra.com.np/refresh/

[jQuery] Retrieve the Value of Selection Box

Here is a simple jQuery tutorial to retrieve the content of the value of Selection Box.

Screenshot of Selection Box Layout

Screenshot of the Selection Box Layout

Screenshot of the Selection Box Layout

Here is the code snippet for the above screenshot.

Create this folder structure, these all are placed in a same folder

CSS [directory]
→  style.css
►  JS [directory]
jquery.js
remote.js
index.html

Jquery
Download jQuery from the jQuery official site http://code.jquery.com/jquery-1.5.1.min.js

Index.html

<!-- Filename : index.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/remote.js"></script>
<title>Remote Fetch (Ajax)</title>
</head>
<body>
<div id="wrapper">
<form method='post' action='' name='ajaxForm'>
<fieldset>
<legend> Remote Fetch Request</legend>
<p class='clearfix'>
<label for ='Fruits'>Your Favourite Fruit :</label>
<select name='cmbFruits' id="cmb_fruits">
 <option value='1'>Apple</option>
 <option value='2'>Banana</option>
 <option value='3'>Orange</option>
 <option value='4'>Pineapple</option>
</select>
</p>
<p  class='clearfix'>
<label for ='Colors'>Your Favourite Color:</label>
<select name='cmbColors' id="cmb_colors">
 <option value='1'>Blue</option>
 <option value='1'>Green</option>
 <option value='3'>Pink</option>
 <option value='2'>Red</option>
 <option value='4'>Yellow</option>
</select>
</p>
<p><span class='right'>
 <label for="submit"><input type='submit' value="Order Items" name='btnOrder' id="btn_order"></label>
</span>
</p>
</fieldset>

</form>
</div>
</body>
</html>

Here is the stylesheet for the above layout.
Style.css

/* Filename : style.css */
@CHARSET "ISO-8859-1";
body {
	background:#444;
	color:#fff;
	margin:0 auto;
	padding:0;
	font-family:verdana,sans-serif;
	font-size:14px;
}
fieldset {
	margin:0 auto;
	padding:10px;
}
legend {
	padding:4px;
	display:block;
	border:1px solid #ccc;
}

input,select {
	line-height:2;
	width:120px;
	border:1px solid #ccc;
}
p {
	border:0px solid #000;
}
label {
	float:left;
	display:block;
}
select {
	display:block;
	float:right;
}
#wrapper {
	position:relative;
	margin:0 auto;
	padding:0;
	padding-top:15%;
	width:320px;
}
.right {
float:right;

}
input[type=submit] {
	height:30px;
	width:90px;
	text-align:center;
	border:3px solid #fff;
}

/** Clearfix hack */

/* drop the dot, replace with space */
.clearfix:after {
     content: " ";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
     }
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 0.5%;}
.clearfix {display: block;}
/* End hide from IE-mac */

jQuery Remote Selection Code

// Wait until DOM is ready
$(document).ready(function(){

	// Wait for change in Fruits
	$("#cmb_fruits").change(function(e){
		value = $(this).val();
		alert(value);
	});
});

[How To] Custom Checkbox using jQuery

Here is how I managed to get the custom checkbox using jQuery. See the screenshot below

JQuery Custom CheckBox

JQuery Custom CheckBox

The simple idea is to put class where we want to display checkbox. Here I have used two classes .clear and .checked. The name are very obvious.

.clear holds the unchecked state of checkbox.

.checked holds the checked state of checkbox.

Whenever the click on the class .clear and .checked class is triggered, we change the background accordingly by adding and removing the corresponding CSS by jQuery, this is where we use jQuery in fact.

We have three files:

1. checkbox.html
2. checkbox.js
3. checkbox.css

Source code for checkbox.html

<html>
<head>
<title>JQuery Custom gnu CheckBox Demo</title>
<link rel="stylesheet" href="checkbox.css">
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="custom_checkbox.js"></script>
</head>
<body>
<h3>Show More Tutorials on :</h3>
		<ul id='langauges'>
			<li><p><span class='clear' rel='java'></span>Java</p></li>

			<li><p><span class='clear' rel='visual basic'></span>Visual Basic</p></li>
			<li><p><span class='clear' rel='python'></span>Python</p></li>
			<li><p><span class='clear' rel='ruby'></span>Ruby</p></li>
			<li><p><span class='clear' rel='c/c++'></span>C/C++</p></li>
		</ul>

	<p class='show_value'></p>

</body>
</html>

Sourcecode for custom_checkbox.js

$(document).ready(function() {
	var opt = $('p &gt; span');
	$(opt).click(function() {
		var value = $(this).attr('rel');

		if ($(this).hasClass('clear')) {
			$(this).removeClass('clear');
			$(this).addClass('checked');
			$('.show_value').text("Checked : "+value);
		} else {
			$(this).removeClass('checked');
			$(this).addClass('clear');
			$('.show_value').text("Unchecked : "+value);
		}
	});
});

Sourcecode for checkbox.css

body {
	background:#000;
	color:#fff;
}
ul#langauges {
	list-style:none;
	width:80%;
}
ul#langauges li {
	width:70%;
}

span.checked {
	background-image:url('checked.png');
	background-repeat:no-repeat;
	background-position:50% 50%;
}

span.clear {
	background-image:url('clear.png');
	background-repeat:no-repeat;
	background-position:50% 50%;
	}

.clear,.checked {
	float:left;
	margin-right:5px;
	display:block;
	background-image:url('clear.png');
	background-repeat:no-repeat;
	background-position:50% 50%;
	width:22px;
	height:22px;
}

That’s all, try and enjoy it.

[Tutorial] Create Collapsable and Expandable Fixed jQuery Modal Box

Today I am going to write a tutorial on how to write a Jquery enabled Collapsable and Expandable Fixed jQuery Modal Box.

Q. What is jQuery ?

A. jQuery is a new type of Javascript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

reference : http://jquery.com (Official jQuery Homepage)

Here is the quick demo page for you to see our final product, that we are going to create from this tutorial.

First of all download the latest jquery pack from site Downlink Jquery Pack.

I have used the modal box from Simple jQuery Modal Window Tutorial and customized it, so that it becomes collapsable and Expandable Fixed jQuery Modal Box.

Therefore, before completing this tutorial, you might think on completing Simple jQuery Modal Window Tutorial first.

Lets get to the topic again,

Strategy used in this jQuery Modal Box

  1. Search for tag with name=”modal”
  2. Set the mask to fill entire browser
  3. Finally display the dialog box that will lay over this mask.

See the screenshot below for complete reference.

JQuery Fixed Modal Box

JQuery Fixed Modal Box

At first our window is in state 2 i.e. Before Click, when an anchor inside dialog box 1 is clicked then the state changes to state 4, by Sliding Down. Then when again the link is clicked the state changes back to normal state by Sliding UP.

Dialog-Box is fixed at top by the use of CSS. CSS is controlled by the use of jQuery and jQuery click event is handled accordingly.

Save the below code in modalcss.css file. (Same as Simple jQuery Modal Window Tutorial with minor Changes)

Modalcss.css

@CHARSET "UTF-8";

/* Z-index of #mask must lower than #boxes .window */
#mask {
	left: 0;
	top: 0;
	position: absolute;
	z-index: 9000; /**Must be less than z-index of #boxes .window**/
	background: #000;
	display: none;
}
#boxes .window, #boxes #dialog {
	/**-moz-border-radius:10%;**/
	border:3px solid yellow;
	color:#fff;
	background:blue;
	/**background-image:url('../images/background.gif');**/
	background-repeat: no-repeat;

}
#boxes .window {
	left: 0;
	top: 0;
	position: absolute;
	width: 594px;
	height: 384px;
	display: none;
	z-index: 9999;/**Must be greater than z-index of #mask**/
	padding: 20px;
}

/* Customize your modal window here, you can add background image too*/
#boxes #dialog {
	width : 234px;
	height:138px;
	padding: 10px;
}
/** End **/

Continue Next Part