Creater Site: Using Ajax Categories and their Sub Categories and Sub Sub Categories display

Index.php:

 <html>
<body>
 <form id="custom" method="post" name="form" enctype="multipart/form-data">
   <fieldset title="Location Information" >
   <legend></legend>
    <label>catgories</label>
    <select name="main_id" onchange="showCustomer(this.value)">
   <option value="" class="search"><---Select the catagoeris--> 
   </option>                               
      <?php 
 $sel1=mysql_query("select * from categories order by cat_name asc");
  while($cat=mysql_fetch_array($sel1))
   {         
 $cat_id=$cat['cat_id']; 
 $cat_name=$cat['cat_name'];                                           
 <option value="<?php echo $cat_id; ?>"><?php echo $cat_name; ?></option>
<?php } ?>
 </select>
 <label>Sub Catgories</label>
  <p id="txtHint">
  <select name="sub"  onchange="show(this.value)">
    <option value=""><---Select sub catagoeris--></option>
   </select>
     </p>
    <p id="sub_sub"> 
  <select  name="sub_sub">
   <option value=""><--Select name--></option>
   </p>
 </body>
</html>

ajax.php:

<?php
include("conn.php");
?>
<?php if(isset($_GET['q'])) 

{

$id1=$_GET['q'];

?><p>
      <select  onchange="show(this.value)" name="sub">
      <option value=""><--Select--></option>
      <?php
      $select1=mysql_query("select * from sub_categories where cat_id='$id1'");
      while($menu2=mysql_fetch_array($select1))
      {
      ?>
      <option value="<?php echo $menu2['sub_cat_id'];?>"> <?php echo $menu2['sub_cat_name'];?></option>
      <?php
      }

      ?>
      
      </select> 
       
      </p>
     <?php
     }
     if(isset($_GET['s'])) 

{

$id3=$_GET['s'];

              $sub_sub_cat=mysql_query("select * from sub_sub_categories where sub_cat_id='$id3'") or die(mysql_error());
             if(mysql_num_rows($sub_sub_cat)=="")
             {
                 
             }
    
       else
      {
          ?>
     <p> 
     
   
      <select  name="sub_sub">
      <option value=""><--Select name--></option>
      <?php
      $select2=mysql_query("select * from sub_sub_categories where sub_cat_id='$id3'");
      while($menu3=mysql_fetch_array($select2))
      {
      ?>
      <option value="<?php echo $menu3['id'];?>"> <?php echo $menu3['sub_sub_cat_name'];?></option>
      <?php
      }
      
      ?>
      
      </select>
      </p>
      
     <?php  }} ?>

ajax script:(script1)

<script>
        function showCustomer(str)
        {
        var xmlhttp;    
        if (str=="")
          {
          document.getElementById("txtHint").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","ajax.php?q="+str,true);
        xmlhttp.send();
        }
        </script>

ajax script:(script2)

<script>

        function show(str)
        {
        var xmlhttp;    
        if (str=="")
          {
          document.getElementById("sub_sub").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("sub_sub").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","ajax.php?s="+str,true);
        xmlhttp.send();
        }
        </script>

This Coding is used for categories and their sub categories and sub sub categories.If we click on category and it display their that particular categories types and also that sub category you click that particular sub sub categories types also displayed.The script1 is used for to display the sub category and script2 is used for to display the sub sub categories.I hope this very useful for you.

db screenshot:category

sub category:

Creater Site

Pages

Translate

Thursday 17 July 2014

Using Ajax Categories and their Sub Categories and Sub Sub Categories display

Index.php:

No comments:

Post a Comment