Zend Framework Database Query

Zend Framework Database Query

Database Manipulation

• Create a controller
• Call / Create(Write) Database configuration setting
• Request data object creation
• Assign message (Success / Failure / Already exists)
• Create a view page to see the message or to redirect to the previous page to fill it up again

Controller creation

public function processAction(){
}

Database configuration creation/call from registry

$registry = Zend_Registry::getInstance();
$DB = $registry['DB'];

Or

$params = array(‘host’=>’localhost’ , ‘username’ =>’root’ , ‘password’ =>” , ‘dbname’ =>’zend’ );
$DB = new Zend_Db_Adapter_Pdo_Mysql($params);

Insert Query

$sql = "INSERT INTO `user`
(`first_name` , `last_name` ,`user_name` ,`password`)
VALUES
(‘".$request->getParam(‘first_name’)."’, ‘".$request->getParam(‘last_name’)."’, ‘".$request->getParam(‘user_name’)."’, MD5(‘".$request->getParam(‘password’)."’))";$DB->query($sql);

OR

$data = array(‘first_name’ => $request->getParam(‘first_name’),
‘last_name’ => $request->getParam(‘last_name’),
‘user_name’ => $request->getParam(‘user_name’),
‘password’ => md5($request->getParam(‘password’))
);$DB->insert(‘user’, $data);

Fetch Query

$params = array(‘host’ =>’localhost’, ‘username’ =>’root’, ‘password’ =>”, ‘dbname’ =>’zend’ );
$DB = new Zend_Db_Adapter_Pdo_Mysql($params);$DB->setFetchMode(Zend_Db::FETCH_OBJ);
$sql = "SELECT * FROM `user` ORDER BY user_name ASC";
$result = $DB->fetchAssoc($sql);
$this->view->assign(‘data’,$result); // Send the array to the view page

Access a variable in the view page

$received_data = $this->data; // received the whole data array
Var_dump($ received_data); // print the whole array
?>

Update Query

$params = array(‘host’ =>’localhost’, ‘username’ =>’root’, ‘password’ =>”, ‘dbname’ =>’zend’ );
$DB = new Zend_Db_Adapter_Pdo_Mysql($params);$request = $this->getRequest();
$data = array(‘first_name’ => $request->getParam(‘first_name’),
‘last_name’ => $request->getParam(‘last_name’),
‘user_name’ => $request->getParam(‘user_name’),
‘password’ => md5($request->getParam(‘password’))
);
$DB->update(‘user’, $data,’id = ‘.$request->getParam(‘id’));

Delete Query

$params = array(‘host’ =>’localhost’, ‘username’ =>’root’, ‘password’ =>”, ‘dbname’ =>’zend’ );
$DB = new Zend_Db_Adapter_Pdo_Mysql($params);$request = $this->getRequest();
$DB->delete(‘user’, ‘id = ‘.$request->getParam(‘id’));

Complete controller
Table name : user ( Fields : id, first_name , last_name, user_name , password)
Input textbox names are (first_name , last_name , user_name , password)

public function processAction()
{$params = array(‘host’ => ‘localhost’ , ‘username’ =>’root’ , ‘password’ =>” , ‘dbname’ =>’zend’ );
$DB = new Zend_Db_Adapter_Pdo_Mysql($params);
$request = $this->getRequest(); //create a request object
$data = array(‘first_name’ => $request->getParam(‘first_name’),
‘last_name’ => $request->getParam(‘last_name’),
‘user_name’ => $request->getParam(‘user_name’),
‘password’ => md5($request->getParam(‘password’))
);
$DB->insert(‘user’, $data); // insertion code
$this->view->assign(‘title’,'Registration Process’);
$this->view->assign(‘description’,'Registration succes’);
}

Differences between Java EE and Java SE

Differences between Java EE and Java SE

Java technology is both a programming language and a platform. The Java programming language is a high-level object-oriented language that has a particular syntax and style. A Java platform is a particular environment in which Java programming language applications run.

There are several Java platforms. Many developers, even long-time Java programming language developers, do not understand how the different platforms relate to each other.

The Java Programming Language Platforms

There are four platforms of the Java programming language:

• Java Platform, Standard Edition (Java SE)
• Java Platform, Enterprise Edition (Java EE)
• Java Platform, Micro Edition (Java ME)
• JavaFX

All Java platforms consist of a Java Virtual Machine (VM) and an application programming interface (API). The Java Virtual Machine is a program, for a particular hardware and software platform, that runs Java technology applications. An API is a collection of software components that you can use to create other software components or applications. Each Java platform provides a virtual machine and an API, and this allows applications written for that platform to run on any compatible system with all the advantages of the Java programming language: platform-independence, power, stability, ease-of-development, and security.

Java SE

When most people think of the Java programming language, they think of the Java SE API. Java SE's API provides the core functionality of the Java programming language. It defines everything from the basic types and objects of the Java programming language to high-level classes that are used for networking, security, database access, graphical user interface (GUI) development, and XML parsing.

In addition to the core API, the Java SE platform consists of a virtual machine, development tools, deployment technologies, and other class libraries and toolkits commonly used in Java technology applications.

Java EE

The Java EE platform is built on top of the Java SE platform. The Java EE platform provides an API and runtime environment for developing and running large-scale, multi-tiered, scalable, reliable, and secure network applications.

Java ME

The Java ME platform provides an API and a small-footprint virtual machine for running Java programming language applications on small devices, like mobile phones. The API is a subset of the Java SE API, along with special class libraries useful for small device application development. Java ME applications are often clients of Java EE platform services.

JavaFX

JavaFX is a platform for creating rich internet applications using a lightweight user-interface API. JavaFX applications use hardware-accelerated graphics and media engines to take advantage of higher-performance clients and a modern look-and-feel as well as high-level APIs for connecting to networked data sources. JavaFX applications may be clients of Java EE platform services.

Source: http://docs.oracle.com/javaee/6/firstcup/doc/gkhoy.html

Drop-down select from database with ajax and php

Drop-down select from database with ajax and php

 Download

//index.php
<?php
include "connection.php";
$sel_sql="select * from tb_country";
$sel_exe=mysql_query($sel_sql);
?>
<html>
<head>
<script language="javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("statediv").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("statediv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax.php?q="+str,true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<form method="POST" name="frm">
Select Country:-
<select name="country" id="country" onChange="showHint(this.value);">
<option value="0">--Select--</option>
<?php while($sel_rows=mysql_fetch_array($sel_exe))
{
?>
<option value="<?php echo $sel_rows['country_id']; ?>">
<?php echo $sel_rows['country_name']; ?>
</option>
<?php  }   ?>
</select>
<br/>
Select state:
<div id="statediv">
<select name="state" id="state">
<option>--Select State--</option>
<option></option>
</div>
</form>
</body>
</html>

//connection.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "ednalan";
$mysql_database = "test";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

//ajax.php
<?php
include "connection.php";
$country_name = $_GET["q"];
$sql="SELECT * FROM tb_state WHERE country_id='$country_name'";
$result = mysql_query($sql);
?>
<select name="state" id="state">
<?php
while($row=mysql_fetch_array($result))
{
$id=$row['state_id'];
$state=$row['state_name'];
echo '<option value="'.$id.'">'.$state.'</option>';
}
?>
</select>

JAVASCRIPT calculate date and date difference

JAVASCRIPT calculate date and date difference

<div id="someid"></div>
<script type="text/javascript">
//day/month/year
t1="02/06/2013";
t2="01/07/2013";
//Total time for one day
 var one_day=1000*60*60*24; 
//Here we need to split the inputed dates to convert them into standard format
var x=t1.split("/");     
var y=t2.split("/");
//date format(Fullyear,month,date) 
var date1=new Date(x[2],(x[1]-1),x[0]);
var date2=new Date(y[2],(y[1]-1),y[0])
var month1=x[1]-1;
var month2=y[1]-1;
//Calculate difference between the two dates, and convert to days
var Diff_result=Math.ceil((date2.getTime()-date1.getTime())/(one_day)); //results 29=Days
var somediv = document.getElementById('someid');
somediv.innerHTML = Diff_result + "=Days";
</script>

5 Tips for optimizing and cleaning up CSS

5 Tips for optimizing and cleaning up CSS 

1. Use shorthand
CSS properties like padding, margin, background, font and border allow usage of shorthand. Combining values using shorthand help in cutting down code and coding time.
For example:

padding-left:0px ;
padding-top:4px;
padding-bottom: 3px;
padding-right:0px;

can be written as:

padding:0 4px 3px 0;

*hint : top – right – bottom – left*
2. Omit units like px / em / % when value is zero
As you may have noticed in the above example, I have eliminated px from the properties that are of value 0. Zero (0) doesn’t require units. 0px is the same as 0em or 0%.
3. Color Prefixes
Typically HEX codes used to define color values are 6 characters long. However, certain color combinations can be reduced and represented in 3 chars.

For example:

color:#000000;

can be written as:

color:#000;

also

color: #aa88aa;

can be written as:

color:#a8a;

4. Group Elements
If there are multiple elements like h1, h2, h3 with common properties, instead of declaring them separately it helps optimize your CSS by combining them, like as follows:

h1, h2, h3{
padding:0 ;
margin:0;
color:#000;
}

5. Use a compressor
Once you are done with your CSS wizardry, it is a good idea to use a CSS compressor tool to shed the excess load off your CSS files. There is a bunch of such services available online, like: cleancss.com, codebeautifier.com, and cssoptimiser.com to name a few. Make sure you attempt optimizing your CSS this way at the end of your project, just before going live because it is likely that you will be served up with a human unreadable (but browser friendly) block of code.

Flash like hover effect using jQuery

Flash like hover effect using jQuery




 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('.verttabnav ul li a').hover(function() { //mouse in
  $(this).animate({ paddingRight: '+=10px' }, 300);
  $(this).parent().animate({ left:'-=7'}, 300);
 }, function() { //mouse out
  $(this).animate({ paddingRight: '-=10px' }, 100);
    $(this).parent().animate({ left:'+=7'}, 300);
 });
});
</script>
<style type="text/css">
.verttabnav {
 width:300px;
}
.verttabnav ul {
 margin: 0 4px 0 10px;
 list-style:none;
}
.verttabnav ul li {
 padding:0 0 0 0;
 border-bottom:1px solid #A38872;
 border-right:1px solid #A38872;
 border-top:1px solid #A38872;
 border-left:1px solid #A38872;
 margin:-1px 0 2px 0;
 position:relative;
 background:#FFEFD7;
}
.verttabnav ul li a {
 padding:10px 30px 10px 0;
 font-size:11px;
 color:#8c6d53;
 text-decoration:none;
 text-transform:uppercase;
 text-align:right;
 font-weight:bold;
 display:block;
}
.verttabnav ul li a:hover {
 color:#000;
}
</style>
<div class="verttabnav">
  <ul >
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
    <li><a href="#">Menu Item 6</a></li>
    <li><a href="#">Menu Item 7</a></li>
    <li><a href="#">Menu Item 8</a></li>
  </ul>
</div>

What is the fastest php framework?

Benchmarked frameworks:

• Cake PHP
• Code Igniter
• Fuel PHP
• Hazaar MVC
• Kohana
• Laravel
• Netter
• Phalcon
• Silex
• Slim Framework
• Symfony 2
• YII
• Zend Framework 1
• Zend Framework 2 
•  

• Framework	Req/Sec
  Phalcon	822.96
  Slim	399.83
  Kohana	217.34
  Code Igniter	187.78
  Silex	179.01
  Laravel	135.9
  YII	123.5
  Fuel PHP	116.34
  Hazaar MVC	103.53
  Zend 1	103.02
  Cake PHP	54.97
  Nette	53.48
  Symfony2	39.22
  Zend 2	36.1

   Source http://systemsarchitect.net/performance-benchmark-of-popular-php-frameworks/

Simple jquery css tab

Simple jquery css tab




 

<style>
 * { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}
  .tabrow {
      text-align: center;
      list-style: none;
      margin: 200px 0 20px;
      padding: 0;
      line-height: 24px;
      height: 26px;
      overflow: hidden;
      font-size: 12px;
      font-family: verdana;
      position: relative;
  }
  .tabrow li {
      border: 1px solid #AAA;
      background: #D1D1D1;
      background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
      background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
      background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
      background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
      background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
      display: inline-block;
      position: relative;
      z-index: 0;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
      text-shadow: 0 1px #FFF;
      margin: 0 -5px;
      padding: 0 20px;
  }
  .tabrow a {
     color: #555;
     text-decoration: none;
  }
  .tabrow li.selected {
      background: #FFF;
      color: #333;
      z-index: 2;
      border-bottom-color: #FFF;
  }
  .tabrow:before {
      position: absolute;
      content: " ";
      width: 100%;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #AAA;
      z-index: 1;
  }
  .tabrow li:before,
  .tabrow li:after {
      border: 1px solid #AAA;
      position: absolute;
      bottom: -1px;
      width: 5px;
      height: 5px;
      content: " ";
  }
  .tabrow li:before {
      left: -6px;
      border-bottom-right-radius: 6px;
      border-width: 0 1px 1px 0;
      box-shadow: 2px 2px 0 #D1D1D1;
  }
  .tabrow li:after {
      right: -6px;
      border-bottom-left-radius: 6px;
      border-width: 0 0 1px 1px;
      box-shadow: -2px 2px 0 #D1D1D1;
  }
  .tabrow li.selected:before {
      box-shadow: 2px 2px 0 #FFF;
  }
  .tabrow li.selected:after {
      box-shadow: -2px 2px 0 #FFF;
  }
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script>
  $(function() {
   $("li").click(function(e) {
     e.preventDefault();
     $("li").removeClass("selected");
     $(this).addClass("selected");
   });
  });
 </script>
CSS jquery Round Tab
<ul class="tabrow">
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li class="selected"><a href="#">Contact</a></li>
     <li><a href="#">Blog</a></li>
 </ul>

Javascript allow only numbers to be entered in a textbox

Javascript allow only numbers to be entered in a textbox

<HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
   </BODY>
</HTML>

Simple jquery Select All Checkbox

Simple jquery Select All Checkbox

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.item').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox and viceversa
$(".item").click(function(){
if($(".item").length == $(".item:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}

});
});
</SCRIPT>
Select All Checkbox <input type="checkbox" id="selectall"/><br/>
<input type="checkbox" class="item" value="1"/>
Jquery<br/>
<input type="checkbox" class="item" value="2"/>
php mysql<br/>
<input type="checkbox" class="item" value="3"/>
Java<br/>

Sanitize Data to Prevent SQL Injection Attacks

Sanitize Data to Prevent SQL Injection Attacks
simple function that sanitizes the data before sending it to MySQL




 

function sanitize($data)
{
// remove whitespaces (not a must though)
$data = trim($data); 

// apply stripslashes if magic_quotes_gpc is enabled
if(get_magic_quotes_gpc()) 
{
$data = stripslashes($data); 
}
// a mySQL connection is required before using this function
$data = mysql_real_escape_string($data);
return $data;
}

session_start();
$username = sanitize($_POST['username']);
$password = md5(sanitize($_POST['password']));
$query = sprintf("SELECT * FROM `members` WHERE username='%s' AND password='%s'",$username, $password);
$sql = mysql_query($query);
if(mysql_num_rows($sql))
{
// login OK
$_SESSION['username'] = $username;
}
else
{
$login_error = true;
}

Tooltips CSS and jQuery

Tooltips CSS and jQuery 





 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<style type="text/css">
body {
 margin: 0; padding: 0;
 font: normal 12px Verdana, Geneva, sans-serif;
 line-height: 1.8em;
 color: #333;
}
* {outline: none;}
a {color: #d60000; text-decoration: none;}
.tip {
 color: #fff;
 background:#1d1d1d;
 display:none; 
 padding:10px;
 position:absolute; z-index:1000;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}
</style>
<script type="text/javascript">
$(document).ready(function() {
 //Tooltips
 $(".tip_trigger").hover(function(){
  tip = $(this).find('.tip');
  tip.show(); //Show tooltip
 }, function() {
  tip.hide(); //Hide tooltip    
 }).mousemove(function(e) {
  var mousex = e.pageX + 20; //Get X coodrinates
  var mousey = e.pageY + 20; //Get Y coordinates
  var tipWidth = tip.width(); //Find width of tooltip
  var tipHeight = tip.height(); //Find height of tooltip
  
  //Distance of element from the right edge of viewport
  var tipVisX = $(window).width() - (mousex + tipWidth);
  //Distance of element from the bottom of viewport
  var tipVisY = $(window).height() - (mousey + tipHeight);
    
  if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
   mousex = e.pageX - tipWidth - 20;
  } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
   mousey = e.pageY - tipHeight - 20;
  } 
  tip.css({  top: mousey, left: mousex });
 });
});
</script>
<div class="container">
    <p>
  <a class="tip_trigger" href="#">Tooltiptext 
   <span class="tip" style="width: 400px;">
    <img src="naruto.jpg" style="float: left; margin-right: 20px;"/>
     http://r-ednalan.blogspot.com/ alis augue accumsan vulputate aptent vel aptent iusto ullamcorper vero. delenit hos dolore occuro tation euismod eum quadrum si nulla sa
   </span>
  </a>
 </p>
</div>

php pagination

php pagination



 

<style>
.paginate {
font-family:Arial, Helvetica, sans-serif;
 padding: 3px;
 margin: 3px;
}
.paginate a {
 padding:2px 5px 2px 5px;
 margin:2px;
 border:1px solid #999;
 text-decoration:none;
 color: #666;
}
.paginate a:hover, .paginate a:active {
 border: 1px solid #999;
 color: #000;
}
.paginate span.current {
    margin: 2px;
 padding: 2px 5px 2px 5px;
  border: 1px solid #999;
  
  font-weight: bold;
  background-color: #999;
  color: #FFF;
 }
 .paginate span.disabled {
  padding:2px 5px 2px 5px;
  margin:2px;
  border:1px solid #eee;
  color:#DDD;
 }
 li{
  padding:4px;
  margin-bottom:3px;
  background-color:#FCC;
  list-style:none;}
 ul{margin:6px;
 padding:0px;} 
</style>
<?php
 include('connect.php'); 
 $tableName="country";  
 $targetpage = "index.php";  
 $limit = 10; 
 $query = "SELECT COUNT(*) as num FROM $tableName";
 $total_pages = mysql_fetch_array(mysql_query($query));
 $total_pages = $total_pages['num'];
 $stages = 3;
 $page = mysql_escape_string($_GET['page']);
 if($page){
  $start = ($page - 1) * $limit; 
 }else{
  $start = 0; 
  } 
    // Get page data
 $query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
 $result = mysql_query($query1);
 // Initial page num setup
 if ($page == 0){$page = 1;}
 $prev = $page - 1; 
 $next = $page + 1;       
 $lastpage = ceil($total_pages/$limit);  
 $LastPagem1 = $lastpage - 1;     
 $paginate = '';
 if($lastpage > 1)
 { 
  $paginate .= "<div class='paginate'>";
  // Previous
  if ($page > 1){
   $paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
  }else{
   $paginate.= "<span class='disabled'>previous</span>"; }
  // Pages 
  if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
  { 
   for ($counter = 1; $counter <= $lastpage; $counter++)
   {
    if ($counter == $page){
     $paginate.= "<span class='current'>$counter</span>";
    }else{
     $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}     
   }
  }
  elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
  {
   // Beginning only hide later pages
   if($page < 1 + ($stages * 2))  
   {
    for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
    {
     if ($counter == $page){
      $paginate.= "<span class='current'>$counter</span>";
     }else{
      $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}     
    }
    $paginate.= "...";
    $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
    $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";  
   }
   // Middle hide some front and some back
   elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
   {
    $paginate.= "<a href='$targetpage?page=1'>1</a>";
    $paginate.= "<a href='$targetpage?page=2'>2</a>";
    $paginate.= "...";
    for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
    {
     if ($counter == $page){
      $paginate.= "<span class='current'>$counter</span>";
     }else{
      $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}     
    }
    $paginate.= "...";
    $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
    $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";  
   }
   // End only hide early pages
   else
   {
    $paginate.= "<a href='$targetpage?page=1'>1</a>";
    $paginate.= "<a href='$targetpage?page=2'>2</a>";
    $paginate.= "...";
    for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
    {
     if ($counter == $page){
      $paginate.= "<span class='current'>$counter</span>";
     }else{
      $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}     
    }
   }
  }
  // Next
  if ($page < $counter - 1){ 
   $paginate.= "<a href='$targetpage?page=$next'>next</a>";
  }else{
   $paginate.= "<span class='disabled'>next</span>";
   }
  $paginate.= "</div>";  
}
 echo $total_pages.' Results';
 // pagination
 echo $paginate;
?>
<ul>
<?php 
 while($row = mysql_fetch_array($result))
  {
  echo '<li>'.$row['country'].'</li>';
  }
 ?>
</ul>

<?php
$dbhost       = "localhost";
$dbuser       = "root";
$dbpass       = "ednalan";
$dbname       = "dbname";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);
?>

Pagination with jquery, Ajax and PHP

Pagination with jquery, Ajax and PHP

Download
 

//index.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "load_data.php",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#container").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#container").html(msg);
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#container .pagination li.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
                });           
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                    
                });
            });
</script>
<style type="text/css">
            body{
                width: 800px;
                margin: 0 auto;
                padding: 0;
            }
            #loading{
                width: 100%;
                position: absolute;
                top: 100px;
                left: 100px;
    margin-top:200px;
            }
            #container .pagination ul li.inactive,
            #container .pagination ul li.inactive:hover{
                background-color:#ededed;
                color:#bababa;
                border:1px solid #bababa;
                cursor: default;
            }
            #container .data ul li{
                list-style: none;
                font-family: verdana;
                margin: 5px 0 5px 0;
                color: #000;
                font-size: 13px;
            }
            #container .pagination{
                width: 800px;
                height: 25px;
            }
            #container .pagination ul li{
                list-style: none;
                float: left;
                border: 1px solid #006699;
                padding: 2px 6px 2px 6px;
                margin: 0 3px 0 3px;
                font-family: arial;
                font-size: 14px;
                color: #006699;
                font-weight: bold;
                background-color: #f2f2f2;
            }
            #container .pagination ul li:hover{
                color: #fff;
                background-color: #006699;
                cursor: pointer;
            }
   .go_button
   {
   background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;margin-left:3px;
   }
   .total
   {
   float:right;font-family:arial;color:#999;
   }
        </style>
<div align="center" style="font-size:24px;color:#cc0000;font-weight:bold">Pagination with jquery, Ajax and PHP</div>
        <div id="loading"></div>
        <div id="container">
            <div class="data"></div>
            <div class="pagination"></div>
        </div>

//load_data.php
<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";

$query_pag_data = "SELECT mes_id,message from messages LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['message']);
    $msg .= "<li><b>" . $row['mes_id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM messages";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
    $msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else
        $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
    $msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;padding:2px;text-align:center;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
echo $msg;
}

//db.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "ednalan";
$mysql_database = "dbname";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

Multiple Checkbox Select/Deselect jquery

Multiple Checkbox Select/Deselect jquery




 

<STYLE>
body, input{
 font-family: Calibri, Arial;
 margin:0px;
}
h1 {
 margin: 0 0 0 20px;
}
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

#header {
 height:50px;
 background-color:#ddd;
 border-bottom:1px solid #aaa;
 width:100%;
}
#footer {
 font-size: 12px;
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
 text-align:center;
}

table {
 width: 300px;
 border: 1px solid;
 border-collapse:collapse;
 margin: 0 0 0 20px;
}
th {
 background-color:#3E6DB0;
 color: white;
 padding: 5px;
}
</STYLE>
<H1>Multiple Checkbox Select/Deselect</H1>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table border="1">
<tr>
 <th><input type="checkbox" id="selectall"/></th>
 <th>Programming Language</th>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
 <td>PHP Programming</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
 <td>Java Script</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
 <td>Jquery</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
 <td>Java</td>
</tr>
</table>
<SCRIPT>
$(function(){
 // add multiple select / deselect functionality
 $("#selectall").click(function () {
    $('.case').attr('checked', this.checked);
 });
 // if all checkbox are selected, check the selectall checkbox
 // and viceversa
 $(".case").click(function(){

  if($(".case").length == $(".case:checked").length) {
   $("#selectall").attr("checked", "checked");
  } else {
   $("#selectall").removeAttr("checked");
  }

 });
});
</SCRIPT>

Login Register jquery ajax

Login Register jquery ajax

 Download

//Index.php
<?php
include 'conf.php';
function secure()
{
 $username = sql_secure($_COOKIE['login_u']);
 $password = sql_secure($_COOKIE['login_p']);
 $sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
 $query = mysql_query($sql);
 $num_rows = mysql_num_rows($query);
 if ($num_rows == '0')
 {
   $url = $_SERVER['REQUEST_URI'];
   header("location:login.php?url=$url");  
   exit();     
 }
}
secure();
?>
If you see this text you have logged in

conf.php

<?php
$mysql_host     = 'localhost';
$mysql_username = 'root';
$mysql_password = 'ednalan';
mysql_connect("$mysql_host","$mysql_username","$mysql_password");
mysql_select_db("dbname");
#A function to secure SQL queries in the script.
function sql_secure($string) {
  if (get_magic_quotes_gpc()) {
   $string = stripslashes($string);
  }
  $string = mysql_real_escape_string($string);
 return $string;
}
?>

login.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
html,body {
 margin :0px;
 padding:0px;
}
.login_wrap {
 position: absolute;
 top: 0px;
 left: 40px;
 font-family: Arial, Helvetica, sans-serif;
 color: #95B841;
}
.login_button {
 background-color: #E5E5E5;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-left-width: 3px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #95B841;
 border-bottom-color: #95B841;
 border-left-color: #95B841;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 10px;
 float: left;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 cursor:pointer;
 color:#0099FF;
 font-weight:bold;
}
input {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background-color: #FFF;
 font-weight: bold;
 padding: 3px;
 margin: 2px;
 color: #0099FF;
 font-family: Arial, Helvetica, sans-serif;
 border: 3px solid #95B841;
}
.login_error {
 color: #0099FF;
 padding: 20px;
 width: 200px;
 margin-top: 100px;
 margin-right: auto;
 margin-left: auto;
 background-color: #E5E5E5;
 border: 2px solid #95B841;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 font-weight: bold;
}
.register, .cancel {
 color: #0099FF;
 font-size: 10px;
 text-decoration: none;
 padding-top: 3px;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #95B841;
}
.registration_box_wrap {
 z-index: 888;
 height: 100%;
 width: 100%;
 background-color: #E5E5E5;
 position: absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
 top: 0px;
}
.registration_box {
 background-color: #E5E5E5;
 height: auto;
 width: 200px;
 margin-top: 70px;
 margin-right: auto;
 margin-left: auto;
 border: 5px solid #95B841;
 z-index: 999;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 -khtml-opacity: 1;
 opacity: 1;
 position: relative;
 padding: 20px;
 color: #95B841;
 font-family: Arial, Helvetica, sans-serif;
 color: #0099FF;
}
.registration_box h2 {
 color: #0099FF;
 font-family: Arial, Helvetica, sans-serif;
}
.registration_error {
 font-size: 14px;
 padding: 5px;
 border: thin solid #95B841;
 margin: 5px;
 text-align: center;
}
.login_box {
 background-color: #E5E5E5;
 padding: 5px;
 margin-bottom: -3px;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-left-width: 3px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #95B841;
 border-bottom-color: #95B841;
 border-left-color: #95B841;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 border-bottom-right-radius: 5px;
}
.right_box {
 float: right;
 top: 0px;
 right: 20px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 24px;
 position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
 $('.login_box').hide();
    $('.login_button').click(function () {
        $('.login_box').toggle();
        this.hide();
    });
    $('input[type="text"]').focus(function () {
        if (this.value == this.defaultValue) {
            this.value = '';
        }
        if (this.value != this.defaultValue) {
            this.select();
        }
    });
    $('input[type="text"]').blur( function () {
  if (this.value == "") {
   this.value = this.defaultValue;
  }
 });
    $('#password_1').focus(function () {
        $('#password_1').remove();
        $('#password').show();
  $('#password').val() = "";
        $('#password').focus();
    });
    $('#submit').click(function () {
        var str = $('#login_form').serialize();
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: str,
            success: function (msg) {
                if (msg.length == "") {
            $('.login_error').html("Success, redirecting...").fadeIn().delay(3000).fadeOut(
      function() { window.location.replace('<?php echo $_GET['url'];?>'); }
      );
                     
                } else {
                    $('.login_error').html(msg).fadeIn().delay(3000).fadeOut();
                }
            }
        });
  return false;
    });
 $('#Register').click(function () {
        var str = $('#register_form').serialize();
        $.ajax({
            type: "POST",
            url: "register.php",
            data: str,
            success: function (msg) {
                if (msg.length == "") {
    $('.registration_error').html("You Have Successfully Registered.")
    .fadeIn()
    .delay(3000)
    .slideUp();
    $('.registration_box_wrap,.registration_box').delay(1500).fadeOut();
                } else {
                    $('.registration_error').html(msg)
     .fadeIn()
     .delay(3000)
     .slideUp();
                }
            }
        });
  return false;
    });
    $('.register').click(function () {
        $('.registration_box_wrap').fadeIn(500);
        $('.registration_box').fadeIn(200);
    });
    $('.cancel').click(function () {
        $('.registration_box_wrap').fadeOut(500);
        $('.registration_box').fadeOut(200);
    });
});
</script>
<div class="login_error" style="display:none;"></div>
<div class="login_wrap">
 <div class="login_box" style="display:;">
    <br />
    <form id="login_form" name="login_form" method="post" action="">
  <input name="username" type="text" id="username" value="Username" />
  <br />
  <input name="password_1" type="text" id="password_1" value="Password" />
  <input name="password" type="password" id="password" style="display:none;" /><br />
  <input name="Button" type="button" value="Login!" id="submit" />
    </form>
    <a class="register" href="#">Not Registered? Click Here!</a><br />
 </div>
    <div class="login_button">Login</div>
</div>
<div class="registration_box" style="display:none;">
  <h2>Register</h2>
  <div class="registration_error" style="display:none;"></div>
  <form id="register_form" name="form1" method="post" action="">
    Username<br />
    <input type="text" name="username" id="username" />
    <br />
    Password<br />
    <input type="password" name="password" id="textfield2" />
    <br />
    Email<br />
    <input type="text" name="email" id="email" />
    <br />
    <br />
    <input type="submit" name="Register" id="Register" value="Register" />
 or <a class="cancel" href="#">cancel</a>
  </form>
</div>
<div class="registration_box_wrap"  style="display:none;"></div>

Register.php

<?php
include 'conf.php';
$username = sql_secure($_POST['username']);
$password = sql_secure($_POST['password']);
$email    = sql_secure($_POST['email']);
#Create a unique code which will be used to confirm user accounts.
$confirm_code = md5(rand(0,99999).rand(0,999999));
#Check if data is of required lenght.
if (strlen($username) < 3 || strlen($password) < 3 || strlen($email) < 3)
{
 die("All Fields Must Be At Least 3 Characters");
}
if (!preg_match('/^[a-zA-Z0-9&\'\.\-_\+]+\@[a-zA-Z0-9.-]+\.+[a-zA-Z]{2,6}$/', $email)) { 
 die("Email Address Not Vaild.");
}
#Check if username or email is already in use.
$password = md5($password);
$query = mysql_query("SELECT * FROM users WHERE username = '$username' OR email = '$email'");
if (mysql_num_rows($query) >= '1')
{
 die("Username Or Email Already In Use"); 
}
#Insert the user's information into the database.
$sql = mysql_query("INSERT INTO users (
username,
password,
email,
confirm_code,
reg_date) VALUES
('$username', '$password', '$email', '$confirm_code', now())");
if (!$sql) {
 die("Something Has Gone Wrong");
}
?>

Loading Pages Using jquery

Loading Pages Using jquery





 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript">
$(document).ready(function()
{
content();
topbanner();
sidebanner();
function content() {
 $.ajax({
 type: "POST",
 url: "content.php",
 data: "" , 
 beforeSend: function() { $("div#content").html('<span class="loading">Loading...</span>'); },
 cache: false,
 success: function(data){ 
 $("#content").html(data);
 }
 });
}
function topbanner() {
 $.ajax({
 type: "POST",
 url: "topbanner.php",
 data: "" , 
 beforeSend: function() { $("div#topbanner").html('<span class="loading">Loading...</span>'); },
 cache: false,
 success: function(data){ 
 $("#topbanner").html(data);
 }
 });
}
function sidebanner() {
 $.ajax({
 type: "POST",
 url: "sidebanner.php",
 data: "" , 
 beforeSend: function() { $("div#sidebanner").html('<span class="loading">Loading...</span>'); },
 cache: false,
 success: function(data){ 
 $("#sidebanner").html(data);
 }
 });
}
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
}
#main
{
width:400px; border:solid 2px #dedede; margin-top:30px; height:400px
}
#topbanner
{
height:100px; border-bottom:solid 2px #dedede
}
#content
{
float:left;width:260px; height:400px
}
#sidebanner
{
float:left;width:130px; height:300px;border-left:solid 2px #dedede
}
.loading
{
color:#cc0000;
}
</style>

<div id="main">
<div id="topbanner"></div>
<div id="content"></div>
<div id="sidebanner"></div>
</div>

<?php
//content.php
echo '<h2>Content.</h2> ';
?>

<?php
//topbanner.php
echo 'Top Banner';
?>

<?php
//sidebanner.php
echo 'Side Bar';
?>

Set Modal box cookie using colorbox jquery plugins

Set Modal box cookie using colorbox jquery plugins

Download

 

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/colorbox.js"></script>
<link media="screen" rel="stylesheet" href="css/colorbox.css" /> 
<style>
 #subscribe_popup,.overlays {
 font:12px/1.2 Arial,Helvetica,san-serif;
 background:#fff !important;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 border-bottom:1px solid #000;
 }

 #subscribe_popup,.overlays a,#subscribe_popup,.overlays a:hover,#subscribe_popup,.overlays a:visited {
 text-decoration:none;
 }
 .box-title {
 color:#2C2D31;
 font-size:25px;
 font-weight:700;
 text-align:left;
 margin:20px 0 5px;
 } 
 #subs-container {
 position:relative;
 padding:15px 0 10px;
 }
</style>   
<script>
$("document").ready(function (){ 
       // load the overlay
        if (document.cookie.indexOf('visited=true') == -1) {
   var fifteenDays = 1000*60*60*24*15;
   var expires = new Date((new Date()).valueOf() + fifteenDays);
   document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
  }
  $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
 });
</script>
<a href="#" class="open_popup">Click here to open the popup</a>
<div style='display:none'>
  <div id='subscribe_popup' style='padding:10px;'>
    <h2 class="box-title">Title</h2>
    <div id="subs-container" class="clearfix">
      <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus</p>
    </div>
  </div>
</div>

Dyanamic Drop down combo box using Ajax Post jquery

Dyanamic Drop down combo box using Ajax Post jquery


 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 jQuery(document).ready(function(){    
  jQuery("select[name='country']").change(function(){    
   var optionValue = jQuery("select[name='country']").val();    
   jQuery.ajax({
    type: "POST",
    url: "data.php",
    data: ({country: optionValue, status: 1}),
    beforeSend: function(){ jQuery("#ajaxLoader").show(); },
    complete: function(){ jQuery("#ajaxLoader").hide(); },
    success: function(response){
     jQuery("#cityAjax").html(response);
     jQuery("#cityAjax").show();
    }
   });   
  });
 });
</script>
Countries: 
<select name="country">
 <option value="">Please Select</option>
 <option value="1">Nepal</option>
 <option value="2">India</option>
 <option value="3">China</option>
 <option value="4">USA</option>
 <option value="5">UK</option>
</select>
<div id="ajaxLoader" style="display:none"><img src="../ajax-loader.gif" alt="loading..."></div>
<div id="cityAjax" style="display:none"> 
 <select name="city">
  <option value="">Please Select</option>
 </select>
</div>

<?php
$country = $_POST['country'];
if(!$country) {
 return false;
}
$cities = array(
   1 => array('Kathmandu','Bhaktapur','Patan','Pokhara','Lumbini'),
   2 => array('Delhi','Mumbai','Kolkata','Bangalore','Hyderabad','Pune','Chennai','Jaipur','Goa'),
   3 => array('Beijing','Chengdu','Lhasa','Macau','Shanghai'),
   4 => array('Los Angeles','New York','Dallas','Boston','Seattle','Washington','Las Vegas'),
   5 => array('Birmingham','Bradford','Cambridge','Derby','Lincoln','Liverpool','Manchester')
  );
$currentCities = $cities[$country];
?>
City: 
<select name="city">
 <option value="">Please Select</option>
 <?php
 foreach($currentCities as $city) {
  ?>
  <option value="<?php echo $city; ?>"><?php echo $city; ?></option>
  <?php 
 }
 ?>
</select>

jQuery Tooltip text

jQuery Tooltip text

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
$('[rel=tooltip]').bind('mouseover', function(){
 var theMessage = $(this).attr('content');
 $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
 $(this).bind('mousemove', function(e){
  $('div.tooltip').css({
   'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
   'left': e.pageX + 15
  });
 });
}).bind('mouseout', function(){
  $('div.tooltip').fadeOut('fast', function(){
   $(this).remove();
  });
 });
});
</script>
<style>
.tooltip{
 position:absolute;
 width:250px;
 background-image:url(tip-bg.png);
 background-position:left center;
 color:#FFF;
 padding:5px 5px 5px 18px;
 font-size:12px;
 font-family:Verdana, Geneva, sans-serif;
}
.tooltip span{font-weight:700;
color:#ffea00;
}
</style>
<a href="#" alt="Text Tooltip" rel="tooltip" content="<span>Text Title</span><br/> This is an example of a text tooltip">Text Tooltip</a>