ajax not loading content in DOM

Question

instead of populating the "tempDiv" in html, the print.php is loaded showing the content. The same code is working for other files and javascript functions. :/

HTML:

 <li><a class="button black" href="#searchbox" onclick="viewall()" >View All</a></li>
 <li><button class="button black" type="submit" form="selectcol" onclick="printDiv()"></button></li>
      <div id="searchresults"  style="padding-top:30px; padding-bottom:10px; max-height:280px; ">
     The results will show up here..!!
     </div>

  <div id="tempDiv"></div>

The viewall() function :

function viewall(){

var xmlhttp;

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("searchresults").innerHTML=xmlhttp.responseText;
    }
  }*/



  xmlhttp.open("POST", "viewall.php", true);            // set the request
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");            // adds  a header to tell the PHP script to recognize the data as is sent via POST
  xmlhttp.send();       // calls the send() method with datas as parameter

  // Check request status
 // If the response is received completely, will be transferred to the HTML tag with tagID
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      document.getElementById("searchresults").innerHTML = xmlhttp.responseText;
    }
  }

}

The printDiv() function called to print the selected columns:

function printDiv()
{

var xmlhttp;

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("searchresults").innerHTML=xmlhttp.responseText;
    }
  }*/



  xmlhttp.open("POST", "print.php", true);          // set the request
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");            // adds  a header to tell the PHP script to recognize the data as is sent via POST
  xmlhttp.send();       // calls the send() method with datas as parameter

  // Check request status
 // If the response is received completely, will be transferred to the HTML tag with tagID
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      document.getElementById("tempDiv").innerHTML = xmlhttp.responseText;
    }
  }



}

PHP :

<?php

$col = $_POST['print'];

$flds = "";
foreach($col as $value){

if(isset($col)){
if($flds !="") 
$flds .= ",";
$flds .= $value;
}

}

$sql = "SELECT ". $flds." from student";



$con = mysqli_connect("localhost", "root", "","university") or die("could not connect". mysqli_error($con));
$rs = mysqli_query($con, $sql);


echo "<table border='1'";

while($r = mysql_fetch_array($rs)){

                            echo "<tr>";
                            echo "<td class='searchtabledata'>".$r[0]."</td>";
                            echo "<td class='searchtabledata'>".$r[1]."</td>";
                            echo "</tr>";

                }                           



?>

the result i get on clicking the submit button

Answer 1

Shouldn't you define the readystate function before sending the request?

part 2. It looks like your printdiv function submits a form. You should be able to remove the form tags if you are using a strictly AJAX procedure. You'll need to adjust a few other things to make that work.