A K Chauhan's Blog

Change text box value in uppercase using jQuery

admin — Tue, 27 Sep 2011 00:15:27 +0000

We can bind this functionality with text box KeyUp event. So, when type anything this code will change the text box value in uppercase with each keystroke.

Code Snippet:-

<script type="text/javascript">
$(document).ready(function() {
	$('#variable').keyup(function() {
		$(this).val($(this).val().toUpperCase());
	});
});
script>

jQuery get selected text from SELECT (or DROPDOWN) list box

admin — Thu, 08 Sep 2011 14:49:22 +0000

Most of the time in JavaScript we want to do following things with Select (or dropdown) list box.

- Get the value of selected option
- Get the text of selected option
- Get the text of option using its value

We can use jQuery for all of the above tasks. jQuery provide very simple one line solution for all of them. Find below code snippet of all three one by one.

Code Snippet:

// Select list box
<select id="dropdown">
    <option value="0">Sundayoption>
    <option value="1">Mondayoption>
    <option value="2">Tuesdayoption>
    <option value="3" selected="selected">Wednesdayoption>
    <option value="4">Thursdayoption>
    <option value="5">Fridayoption>
    <option value="6">Saturdayoption>
select>
 
// Get the value of selected option
var selectedvalue = $('#dropdown').val();
alert(selectedvalue); // 3
 
 
// Get the text of selected option
var selectedText = $('#dropdown option:selected').text();
alert(selectedText); // Wednesday
 
// Get the text of option using its option value (eg: 5)
var textThroughValue = $("#dropdown option[value='5']").text();
alert(textThroughValue); // Friday

Extract/Import Object properties into Currect Symbol Table in PHP

admin — Thu, 01 Sep 2011 23:17:23 +0000

If we want to import an associative array into current symbol table then we can use extract function. This function treats associative array keys as variable name and values as variable values.

But we can not use extract function directly if we want to import class object properties into current symbol table in similar way. So, for this first we need to get the properties of object as an associated array. We can use get_object_vars function for this purpose. get_object_vars function take object as parameter and return associative array of all non-static properties of passed object. For any unassigned property it will return NULL value.

Now we can pass this returned associative array into extract function to import objects non-static properties into current symbol table.

Code Snippet:-


// For associative array
 
$sampleArray = array('name' => 'John', 'age' => 25);
 
extract($sampleArray);
 
echo $name; // Output is "John"
echo $age; // Output is "25"
 
// For object
$sampleObject = new stdClass;
 
$sampleObject->name = 'Peter';
$sampleObject->age = 27;
 
$returnArray = get_object_vars($sampleObject);
 
extract($returnArray);
 
echo $name; // Output is "Peter"
echo $age; // Output is "27"
?>

Generate Random Alphanumeric Password in PHP

admin — Sun, 28 Aug 2011 05:59:04 +0000

This is a very simple and one of the way to generate random alphanumeric password in PHP.

Code Snippet:-


function generateCharacter() {
	$possible = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
	$char = substr($possible, mt_rand(0, strlen($possible) - 1), 1);
	return $char;
}
 
function generatePassword($length) {
	static $password;
 
	if ($length) {
		$password .= generateCharacter();
 
		generatePassword(--$length);
	}
 
	return $password;
}
 
// Use of this function
 
echo generatePassword(10); // Qz1GUfkWFT
echo generatePassword(15); // GPB1hA8pVVWsgLZ
echo generatePassword(8);  // 20e3Bvec
?>

PHP Class for converting XML to Object and Object to XML

admin — Thu, 28 Jul 2011 18:53:00 +0000

Sometimes in PHP we need to convert PHP object into XML string and vice versa. Conversion of XML string to PHP object is pretty simple. You just need to call simplexml_load_string() function (available in PHP 5+) and need to pass your XML string. This will return the object which you can use. The only requirement is your XML string need to be well-formed XML string otherwise PHP will through E_WARNING error message.

Conversion of Object into XML string is little bit tricky. We need to recursively parse the Object and need to create XML tags for object attributes (keys). I’m using XmlWriter class for that purpose. Three important methods of this class which I’m using is startElement(), endElement(), and writeElement(). We need to check the passed mixed variable in getObject2XML() method and add the XML tags with values one by one.


class ObjectAndXML {
	private static $xml;
 
	// Constructor
	public function __construct() {
		$this->xml = new XmlWriter();
		$this->xml->openMemory();
		$this->xml->startDocument('1.0');
		$this->xml->setIndent(true);
	}
 
	// Method to convert Object into XML string
	public function objToXML($obj) {
		$this->getObject2XML($this->xml, $obj);
 
		$this->xml->endElement();
 
		return $this->xml->outputMemory(true);
	}
 
	// Method to convert XML string into Object
	public function xmlToObj($xmlString) {
		return simplexml_load_string($xmlString);
	}
 
	private function getObject2XML(XMLWriter $xml, $data) {
		foreach($data as $key => $value) {
			if(is_object($value)) {
				$xml->startElement($key);
				$this->getObject2XML($xml, $value);
				$xml->endElement();
				continue;
			}
			else if(is_array($value)) {
				$this->getArray2XML($xml, $key, $value);
			}
 
			if (is_string($value)) {
				$xml->writeElement($key, $value);
			}
		}
	}
 
	private function getArray2XML(XMLWriter $xml, $keyParent, $data) {
		foreach($data as $key => $value) {
			if (is_string($value)) {
				$xml->writeElement($keyParent, $value);
				continue;
			}
 
			if (is_numeric($key)) {
				$xml->startElement($keyParent);
			}
 
			if(is_object($value)) {
				$this->getObject2XML($xml, $value);
			}
			else if(is_array($value)) {
				$this->getArray2XML($xml, $key, $value);
				continue;
			}
 
			if (is_numeric($key)) {
				$xml->endElement();
			}
		}
	}
}
?>

How to use it.
1. If you want to convert XML string into PHP object.


$obj = new ObjectAndXML();
 
$str = <<

    
    	XYZ
        28
        Male
    
    
    	ABC
        25
        Male
    

STR;
 
$recordsObj = $obj->xmlToObj($str);
echo '';
var_dump($recordsObj);
 
// Above code will give you this output on browser
/*
object(SimpleXMLElement)#3 (1) {
  ["person"]=>
  array(2) {
    [0]=>
    object(SimpleXMLElement)#4 (3) {
      ["name"]=>
      string(3) "XYZ"
      ["age"]=>
      string(2) "28"
      ["gender"]=>
      string(4) "Male"
    }
    [1]=>
    object(SimpleXMLElement)#5 (3) {
      ["name"]=>
      string(3) "ABC"
      ["age"]=>
      string(2) "25"
      ["gender"]=>
      string(4) "Male"
    }
  }
}
*/
 
// If you want to access value of "name" tag under second "person" tag then you can use 
echo $recordsObj->person[1]->name;
?>

2. If you want to convert PHP object into XML string.


$obj = new ObjectAndXML();
 
$objData1 = new stdClass;
 
$objData1->records->person[0]->name = 'XYZ';
$objData1->records->person[0]->age = '28';
$objData1->records->person[0]->gender = 'Male';
 
$objData1->records->person[1]->name = 'ABC';
$objData1->records->person[1]->age = '25';
$objData1->records->person[1]->gender = 'Male';
 
echo $recordsXML = $obj->objToXML($objData1);
 
// Output will be
/*


 
  XYZ
  28
  Male
 
 
  ABC
  25
  Male
 

*/
 
$objData2 = new stdClass;
 
$objData2->records->person[0]->name[] = 'XYZ';
$objData2->records->person[0]->name[] = 'ABC';
$objData2->records->person[0]->name[] = 'PQR';
 
$objData2->records->person[1]->name[] = 'XYZ1';
$objData2->records->person[1]->name[] = 'ABC1';
$objData2->records->person[1]->name[] = 'PQR1';
 
echo $recordsXML = $obj->objToXML($objData2);
 
// Output will be
/*


 
  XYZ
  ABC
  PQR
 
 
  XYZ1
  ABC1
  PQR1
 

*/
 
$objData3 = new stdClass;
 
$objData3->records->person->name = 'XYZ';
$objData3->records->person->age = '28';
$objData3->records->person->gender = 'Male';
 
echo $recordsXML = $obj->objToXML($objData3);
 
// Output will be
/*


 
  XYZ
  28
  Male
 

*/
?>

Generate Crontab (Cron jobs) syntax/command using this simple tool

admin — Sun, 26 Dec 2010 14:34:11 +0000

Create Crontab command using this simple tool

Click here to Check it!

Cron is a daemon used for scheduling tasks to be executed at a certain time. You can easily find great articles on Crontab or Cron daemon on the Internet. I found these articles very useful and easy to understand.

1. https://help.ubuntu.com/community/CronHowto
2. http://en.wikipedia.org/wiki/Cron

Actually, here I don’t want to explain how crontab work and how you can schedule tasks using crontab. I just want to discuss this tool I’ve created for generating crontab entries/syntax which you can copy and directly put in your crontab file.

In this tool there are five sections; minute, hour, day, month and weekday. You can select single or multiple values for each section from the list which you want to use in your crontab file.

You may want to run a script some number of times per time section. For example if you want to run crontab job in every 10 minutes (runs on minutes divisible by 10: 0, 10, 20, 30, etc.). In this case you can use “Every (x) minute” option and select 10 from drop down list. You can also get the correct output from “Minutes(s)” list but this option will generate less cumbersome output.

In “Command” text box you need to enter full command you want to execute in crontab. When you click Submit you will see this command with values for different section.

There should be single space between each section with the final section (command) can having one or more spaces in it.

Verify the iTunes Account access information with the help of cURL

admin — Sun, 04 Jul 2010 20:19:23 +0000


// URLs of iTunesconnect.
$urlBase = 'https://itts.apple.com';
$urlWebsite = $urlBase . '/cgi-bin/WebObjects/Piano.woa';
 
// function to check finance role acounts validity. This function return true is the detail is still valid.
function isAccountValid($username, $password) {
	global $urlBase, $urlWebsite;
 
	$html = curlRequest($urlWebsite, null); // First cURL request to get the login form
 
	preg_match('/" action=".*"/', $html, $matches); // Search the form action URL because all URLs are dynamic
 
	$urlActionLogin = $urlBase . substr($matches[0], 10, -1);
 
	$postData = array('theAccountName' => $username, 'theAccountPW' => $password, '1.Continue.x' => '1', '1.Continue.y' => '1'); // Creating the form POST data
 
	$html = curlRequest($urlActionLogin, $postData); // Second cURL request with form data for login
 
	if (strpos($html, 'Report Options') === false) { // If the return HTML contain 'Report Options' text then its successful login
		return false;
	}
 
	return true;
}
 
// function send the curl request on given URL with post variables and return the html output
function curlRequest($url, $postVars) {
	$ch = curl_init();
 
	curl_setopt($ch, CURLOPT_URL, $url);
 
	if (!is_null($postVars)){ 
		curl_setopt($ch, CURLOPT_POST, count($postVars));
 		curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postVars));
	}
 
 	curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);
 	curl_setopt($ch, CURLOPT_HEADER, FALSE);  
 	curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);  
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
 
 	$html = curl_exec($ch);
 
	if (curl_errno($ch)) {
		die(curl_error($ch));
	}
 
	curl_close($ch);
 
	return $html;
}
 
// Examples 01
if (isAccountValid('anil@test.com', 'test@anil')) {
	echo "anil@test.com account is valid.
";
}
else {
	echo "anil@test.com account is not valid.
";
}
 
// Examples 02
if (isAccountValid('invalid_address@test.com', 'wrong_password')) {
	echo "invalid_address@test.com account is valid.
";
}
else {
	echo "invalid_address@test.com account is not valid.
";
}
 
?>

How know Base Path of Drupal in JavaScript

admin — Mon, 17 May 2010 10:45:54 +0000

Sometimes you want to know about the Base Path of your Drupal installation in JavaScript. You may want to know about this path for sending the AJAX request at correct URL relatively, load the image or some other type of file on client side through JavaScript etc.

Drupal provide a variable called Drupal.settings.basePath for this purpose in JavaScript. But this variable is only available if you include any custom JavaScript file or JavaScript block in your module. By default Drupal doesn’t include the ‘jquery.js‘ and ‘drupal.js‘ file in generated output. It only add these files if you add your custom JavaScript file or JavaScript block. We can include our custom JavaScript file in Drupal like this:-

drupal_add_js(drupal_get_path('module','my_module'). '/my_module.js');

The my_module.js file should reside in same directory where my_module module exist. This will force Drupal to add jquery.js and drupal.js files in output.

These two files initialize the Base Path variable. In drupal.js file, on top you can see the initialization of setting object in Drupal object. Like this:-

var Drupal = Drupal || { 'settings': {}, 'behaviors': {}, 'themes': {}, 'locale': {} };

Drupal generate some JavaScript code in Script block inside head tag of each page for extending the settings object with the help of jQuery. Like this:-

jQuery.extend(Drupal.settings, { "basePath": "/" });

You can test the Base Path by adding following code in my_module.js file.

$(document).ready(function() {
	alert(Drupal.settings.basePath);
});

This will alert the Base Path for Drupal installation after loading of the page.

Create Simple Carousel using jQuery

admin — Mon, 15 Feb 2010 03:42:15 +0000

Carousel

You can see the working demo here.

Carousel is a way to present content in the form of slideshow on web page. Here I’m showing how easily you can create a horizontal carousel using jQuery. You can play with the given code and easily create vertical carousel, circular carousel, auto-scrolling carousel etc.

I’m using jQuery for animation. So, you need jQuery JavaScript library for it. You can download latest jQuery JavaScript library from jquery.com.

So, how it work.

Your basic structure of HTML for Carousel should be like this:-


   
    	some content...
        some content...
        some content...
        some content...
        some content...
        some content...
        .....

What you need to do before applying “my_carousel” ID to your Carousel DIV.

1. Put any HTML content which you want to display in your LI’s.
2. Create CSS for your Carousel DIV.
3. You also need two images, or button to scroll your content in left and right direction.
4. Assign “btnprev” class to your left button or image.
5. Assign “btnnext” class to your right button or image.
6. Assign “my_carousel” ID to you Carousel DIV.

How JavaScript Code work:-

So, when browser load the page JavaScript look for “my_carousel” ID in HTML and apply all the require attributes and events to your DIV, UL, and LI.

Important JavaScript variables and their purpose:-

step – How many LI’s you want to scroll on click of left and right button.
current – Index or Number of left most visible LI in carousel.
maximum – Total number of LI in carousel.
visible – Number of visible LI’s.
speed – Animation speed.
liSize – Width of one LI in pixels.
carousel_height – Carousel DIV height.
ulSize – Width of UL. You can calculate it like this liSize * maximum.
divSize – Width of CArousel DIV. You can calculate it like this liSize * visible.

Assign require attributes to DIV, UL, and LI.

$('#my_carousel').css("width", divSize+"px").css("height", carousel_height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
 
$('#my_carousel ul').css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute");

Here we changed the width, height, visibility, overflow, and position of Carousel DIV. The Carousel DIV overflow = hidden property is very important here, through it we are just showing the require(visible) LI’s which we want to show at a time. We just hide the remaining LI’s.

We also changes the width, left and position of UL.

Assign Click event to left and right buttons/images

Left button/image

$('.btnprev').click(function() { 
	if(current - step < 0 || current - step > maximum - visible) {return; }
	else {
		current = current - step;
		$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
	}
	return false;
});

So, we have assigned a click event on previous button. So, we are first checking the index of current LI. If the current LI is the first LI we will not do anything. We will simply return from the function. If the current LI is not the first LI then scroll the content of UL to left hand side by using the jQuery “animate” function. For more information about animate function click here. And we also changed the current to current left most most visible LI.

Right button/image

$('.btnnext').click(function() { 
	if(current + step < 0 || current + step > maximum - visible) {return; }
	else {
		current = current + step;
		$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
	}
	return false;
});

Similarly we assigned the clicked event on next button and followed the same logic what we used for previous click. We just changed it slightly to check last LI when we click on next button. If the current is last LI we will do nothing.

Complete JavaScript Code:-

<script language="javascript">
	$(function() {
		var step = 2; 
		var current = 0; 
		var maximum = $('#my_carousel ul li').size(); 
		var visible = 2; 
		var speed = 200; 
		var liSize = 331;
		var carousel_height = 161;
 
 
		var ulSize = liSize * maximum;   
		var divSize = liSize * visible;  
 
		$('#my_carousel ul').css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute");
 
		$('#my_carousel').css("width", divSize+"px").css("height", carousel_height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
 
		$('.btnnext').click(function() { 
			if(current + step < 0 || current + step > maximum - visible) {return; }
			else {
				current = current + step;
				$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
			}
			return false;
		});
 
		$('.btnprev').click(function() { 
			if(current - step < 0 || current - step > maximum - visible) {return; }
			else {
				current = current - step;
				$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
			}
			return false;
		});
	});
script>

Round Number upto 2 decimal places in JavaScript

admin — Sat, 16 Jan 2010 22:41:33 +0000

JavaScript’s Math.round() function doesn’t provide facility to round off a number up to 2 or more decimal places. So, here I’m showing a simple JavaScript code using which you can round off numbers up to 2 decimal places. You can change this for more decimal places.

var retailPrice = 9.99;
var percentage = 0.2525; /* 25.25% */
var decimalPlace = 100; /* 100 for 2 decimal place. 1000 for 3 decimal place.*/
 
var wholeSalePrice = Math.round(percentage * retailPrice * decimalPlace) / decimalPlace;
 
alert(wholeSalePrice); /* This will show 2.52 */