Fetch record in table format using Ajax,PHP

This is example for fetch email address group by and count them and display every result in table format. this example is apply for all type of fetching record in display in table format using ajax and php.

//************************** Server site fetchEmail.php for fetch record and return in table format******************

<?php

  header("Cache-Control: no-cache, must-revalidate" );

  header("Pragma: no-cache" );

  header("Content-Type: text/html; charset=utf-8");

$dbc=mysql_connect(HOSTNAME,USERNAME,PASSWORD) or die('There is error to connect to server:-'.mysqli_connect_error());

  $db_selected = mysql_select_db(DATABASE,$dbc);

  $groupName=$_GET['group'];

  function emailCount($emailId){

  $EmailArray=explode(",",$emailId);

  $totemail=count($EmailArray);

  return($totemail);

  }

  function format($txt){ //Function for RIght syntex for html format

  $txt=str_replace(',','<br>',$txt);

  return($txt);

  }

  $selectGroupRS="select group_name,emailId from emailgroup where group_name='$groupName'  ";

  $result1=mysql_query($selectGroupRS,$dbc) or die('error in group:-'.mysql_error());

  echo"<table width=\"90%\" cellpadding=\"0\" cellspacing=\"0\" border=\"1\">

  <tr>

  <td width=\"15%\" align=\"center\"><strong>Group Name</strong></td>

  <td align=\"center\"><strong>Email Id's</strong></td>

  <td align=\"center\"><strong>Count of Email Id's</strong></td>

  </tr>";

  while($row1=mysql_fetch_row($result1)){

  $name=$row1[0];

  $email.=','.$row1[1];

  }

  echo"

  <tr>";

  echo "<td align=\"center\">".$name."</td>";

  echo "<td ><div style=\"height:300px; overflow:scroll\">".format($email)."</div></td>";

  echo "<td align=\"center\">".emailCount($email)."</td>";

  echo"</tr>";

  echo "</table>";

  ?>

//****************************** End of fetchEmail.php***************************************************************

//************************Php file where record display****************************************

  <script language="javascript">

  function getXmlHttpRequestObject(){

  //alert('in xmlhttp');

  if(window.XMLHttpRequest){

  return new XMLHttpRequest();

  }else if(window.ActiveXObject){

  return new ActiveXObject("Microsoft.XMLHTTP");

  }else {

  alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");

  }

  }

  var searchemail = getXmlHttpRequestObject();

  function searchResult(){

  //alert('on search');

  //alert('in search');

  var groupName=escape(document.getElementById('searchgroup').value);

  //alert(groupName);

  searchemail.open("GET",'fetchEmail.php?group=' + groupName,true);

  searchemail.onreadystatechange=SearchEmailHandler;

  searchemail.send(null);

  }

  function SearchEmailHandler(){

  if(searchemail.readyState==4 || searchemail.readyState=="complete"){

  //alert('in hand');

document.getElementById('fetchId').innerHTML=searchemail.responseText;

  

  

  }

  }

  </script>

<strong> List of All group with Email Id</strong>

  <br />

  <select id="searchgroup">

  <?php

  $dbc=mysql_connect(HOSTNAME,USERNAME,PASSWORD) or die('There is error to connect to server:-'.mysqli_connect_error());

  $db_selected = mysql_select_db(DATABASE,$dbc);

  $selectGroup="select group_name from emailgroup group by group_name";

  $result=mysql_query($selectGroup,$dbc) or die('error in group:-'.mysql_error());

  while($row=mysql_fetch_row($result)){

  echo'<option>'.$row[0].'</option>';

  }

  ?>

</select>

  <input  type="button" value="search" onclick="searchResult();" />

  <br />

  <div id="fetchId"></div>

  //************************Php File End***************************************************

Edit record using ajax

If u need ajax for edit your display record. it display all record in table row column format that will save (edit) by sending data using ajax javascript function to server php file and get response from server of fail and success and intimate user about the server response.




  //****************************************   Edit ajax file ****************************************

<?php

 $dbc=mysql_connect('localhost','root','');

  mysql_select_db('databasename',$dbc);

  $do = $_REQUEST['do'];

  $cateId = $_REQUEST['cateId'];

  switch($do) {

  case 'edit':

  $newTitle=$_REQUEST['ptitle'];

  $newDesc=$_REQUEST['pDesc'];

  $photoId=$_REQUEST['Id'];

 

  if(get_magic_quotes_gpc()) {

  $photoId = $photoId;

  $newTitle=$newTitle;

  $newDesc=$newDesc;

 

  }else{

  $photoId = addslashes($photoId);

  $newTitle = addslashes($newTitle);

  $newDesc = addslashes($newDesc);

  }

  $updatPhoto="update photo_gallery set title='$newTitle',description='$newDesc' where id=$photoId";

  if(mysql_query($updatPhoto,$dbc)or die('Error in update : '.mysql_error())){

  header('Content-Type: text/xml');

  header('Pragma: no-cache');

  echo '<?xml version="1.0" encoding="UTF-8"?>';

  echo '<result>';

  echo 'true';

  echo '</result>';

  }else{

  header('Content-Type: text/xml');

  header('Pragma: no-cache');

  echo '<?xml version="1.0" encoding="UTF-8"?>';

  echo '<result>';

  echo 'false';

  echo '</result>';

  }

 

  break;

  default:

  echo 'Error, invalid action';

  break;

  }

  ?>

//***************************************AJax file end*************************************************


//*********************** Edit html File Start ***********************************************



<script type="text/javascript">

// *************************Ajax call function start***************************************

function editPhotoDetail(Id){

  if (window.XMLHttpRequest) {

  http = new XMLHttpRequest();

  }else if (window.ActiveXObject) {

  http = new ActiveXObject("Microsoft.XMLHTTP");

  }

 

  var handle = Id;

 

  var url = 'ajax.php?';

  //alert(handle);

  var newtitle=document.getElementById('title'+handle).value;

  var newDesc=document.getElementById('desc'+handle).value;

  //alert('title : ' + newtitle+'   '+photoId  );

  // alert('Desc : ' + newDesc);

  if(handle > 0) {

  //alert('call statechange');

  var fullurl = url + 'do=edit&Id=' + encodeURIComponent(handle)+'&ptitle=' + encodeURIComponent(newtitle) + '&pDesc=' + encodeURIComponent(newDesc);

  http.open("POST", fullurl, true);

  http.send(null);

  http.onreadystatechange = statechange_detailchange(handle);

 

  }

 

 

  }


function statechange_detailchange(handle) {

  //alert('in statechange');

  if (http.readyState == 4) {

  var xmlObj = http.responseXML;

  var rs = xmlObj.getElementsByTagName('result').item(0).firstChild.data;

  //    alert('RS '+rs);

  if(rs=="true"){

 

  errorField = document.getElementById('msgbox'+handle);

  errorField.innerHTML = "Photo Record Successfully Update";

  errorField.style.visibility='visible';

  errorField.style.border='#339900  solid 1px';

  errorField.style.background='#FBE3E4';

  errorField.style.color='#339900';

  errorField.style.fontSize='12px';

 

  }else{

  errorField = document.getElementById('msgbox'+handle);

  errorField.innerHTML = "Photo Record Update Fail.";

  errorField.style.visibility='visible';

  errorField.style.border='#FF3333 solid 1px';

  errorField.style.background='#C9FFCA';

  errorField.style.color='#8a1f11';

  errorField.style.fontSize='12px';

 

  }

  }

}

//*********************************Ajax call function end*********************************

  </script>


//********************************Record fetch from database and display for edit

  <table>

  <?php



  $selRec="select * from table";

  $rsRec=mysql_query($selRec,$dbc);

  while($row=mysql_fetch_array($rsRec)){

  ?>

  <tr>

  <td><input type="radio" name="coverId" value="<?php echo $newId;?>" onclick="setId(<?php echo $newId;?>)"/></td>

  <td height="170px" width="190px" valign="middle" align="center">

 

 

 

  <span id="msgbox<?php echo $row["id"];?>"></span>

  </td>

  <td valign="top"><input type="text" size="30" name="title<?php echo $row["id"];?>" id="title<?php echo $row["id"];?>" value="<?php echo $row["title"];?>"></td>

  <td valign="top"><textarea name="desc<?php echo $newId;?>" id="desc<?php echo $row["id"];?>" rows=7><?php echo $row["descs"];?></textarea>    </td>

  <td align="center"><a onclick="editDetail(<?php echo $row["id"];?>)"><span style="color:#003300; background-color:#C4FFE1; font-family:Arial, Helvetica, sans-serif; font-size:14px;">Edit</span></a></td>

  </tr>

  <?php

  }?>

  </table>

//*****************************Html file end***************************************