Category 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);
	});
});

[Solved] WordPress Visual Editor Not Working or Not Appearing

This might be due to the broken ftp upload. Well Mine was due to the broken ftp uploads due to slow internet connection. When I faced this problem I went for usual solutions like checking

  • If Visual Editor is Enable or not ( Users → Authors & Users )
  • Looking for options to enable Visual Editor ( User → Select user → uncheck mark Disable Visual Editor )

But those solutions didn’t seem to have any effect. Then I went for digging, as I was curious what might be the problem, when I compared my wordpress local folder tree for tinyMCE (Visual Editor Used for WordPress) I found that some folders and files were. I suspected if they were the problem. Then rather than using the FireFtp Addons for firefox I used the browser based FTP service, link is given below:

  • http://www.net2ftp.com to upload my files which also supports zip upload and decompression

Once I uploaded all files, I just made confirmation that everything was ok, and came back to wordpress dashboard and Created New Post Voila !!! It was there tinyMce Working as expected.

Other problem that I notice was

Add/Edit Image Pop-up was not working in Add New Post.

This problem was due to the missing javascript files, which after uploading worked well. This problem usually happens when you are upgrading wordpress from lower version to newer version. So after upgrading we have to have make sure that everything is working as expected, and before going live its always better to have check it locally i.e. test in localhost.

I wrote made a little note here so that it might be helpful for other having the same problem. If you find it helpful you can help me too by click on the link above where it says ads by google.

References : http://wordpress.org/support/topic/addedit-image-pop-up-not-working-in-post

[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.