a digital blog

AJAX, JQuery, MySql, PHP, Tutorial

PHP Ajax Dynamic Tab

PHP Ajax Dynamic Tab

This post explains you about how to create PHP Ajax Dynamic Tab Script.

For this you need jquery library and  jquery-ui-tab.js

 
 

Download Link   Demo Link

 

Sample database design for table name contact.

This table contains id (primary key), name and age.

CREATE TABLE IF NOT EXISTS `tab_cat` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `cat_name` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
)

CREATE TABLE IF NOT EXISTS `tab_tutorial` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `cat_id` int(11) NOT NULL,
  `tutorial` varchar(500) NOT NULL,
  `link` varchar(500) NOT NULL,
  PRIMARY KEY (`id`)
)

dbConnect.inc.php

Contains database connectivity code

$mysql_db_hostname = "Host name";
$mysql_db_user = "UserName";
$mysql_db_password = "Password";
$mysql_db_database = "Database Name";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user,
       $mysql_db_password or die("Could not connect database");
//Create a new connection
mysql_select_db($mysql_db_database, $con) or
                 die("Could not select database");
// select database

style.css
Contain css code.

.widget {width: 410px;margin: 20px;padding: 10px;background: #f3f1eb;
         border: 1px solid #dedbd1;margin-left: 35%;}
.widget a {color: #000;text-decoration: none;font-size:14px;}
.widget a:hover {text-decoration: underline;}
.tabnav li {display: inline;list-style: none;padding-right: 5px;}
.tabnav li a {text-decoration: none;text-transform: uppercase;
         font-weight: bold;padding: 4px 6px;outline: none;}
.tabnav li a:hover, .tabnav li a:active, .selected{
         background: #dedbd1;text-decoration: none;}
.tabdiv {margin-top: 2px; background: #fff;border: 1px solid #dedbd1;
         padding: 5px;}
.tabdiv li {margin-left: 20px;}
.tabdiv li a{color: #99A607;font-size:12px;}
.ui-tabs-hide {display: none;}

index.php
Contain tab display code and ajax logic

<?php
include_once('inc/dbConnect.inc.php');
$query="select * from tab_cat order by cat_name asc";
// for tab link
$res=mysql_query($query);
$count=mysql_num_rows($res);
if($count >0){
  $queryTab="select * from tab_cat order by cat_name asc limit 1";
  // for default funtion load
  $resTab=mysql_query($queryTab);
  $rowTab=mysql_fetch_array($resTab);
  $catId=$rowTab['id'];
  $catTab='cat'.$rowTab['id'];
}else{
  $catId='';
  $catTab='';
}
?>
// AJAX CODE START
// All the script work around changeTab() function
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-tab.js"></script>
<script type="text/javascript">
function changeTab(tabId,id){
  $('.tabLink').removeClass('selected');
  $('#'+tabId).addClass('selected');
  var dataString = 'id='+ id;
  $(".tabdiv").fadeIn(400).
       html('Loading.... <img src="image/ajax-loading.gif" /> ');
  $.ajax({
      type: "POST",
      url: "processed.php",
      data: dataString,
      cache: false,
      success: function(result){
             $(".tabdiv").html(result);
      }
   });
}
changeTab('<?php echo $catTab;?>','<?php echo $catId;?>');
</script>
// AJAX CODE END

<?php
if($count>0){
?>
<div id="tabvanilla" class="widget">
<ul class="tabnav">
<?php
while($row=mysql_fetch_array($res)){
echo '<li><a href="javascript:void(0)" class="tabLink" id="cat'.$row['id'].'" onclick=changeTab("cat'.$row['id'].'","'.$row['id'].'")>'.$row['cat_name'].'</a></li>';
}
?>
</ul>
<div class="tabdiv"></div>
</div>
<?php
}
else{
echo 'No Data Found';
}
?>

processed.php
Contains tab logic

<?php

if(isset($_POST['id'])){
   $id=$_POST['id'];
   $query="select * from tab_tutorial where cat_id='$id'
          order by '$id' desc";
   $res=mysql_query($query);
   $countMessage=mysql_num_rows($res);
   if($countMessage == 0){
      echo 'noData';
   }else{
      $html= '<ul>';
      while($row=mysql_fetch_array($res)){
        $html.= '<li><a href="'.$row['link'].'" target="blank">';
        $html.=$row['tutorial'].'</a></li>';
      }
      $html.= '</ul>';
   }
echo $html;
 }
}
?>

1 Comment

  1. Billy Eslava

    That’s a good post.


*

Copyright © 91 Web Lessons - a digital blog