AJAX - Pull back MYSQL table

Question

mikecronauer 0 Newbie Poster

13 Years Ago

Hi, I am trying to use AJAX to pull back mysql table information. I tried to alter an example I found (w3 schools) where they showed how use a selection table to pull a specific line out of a mysql table, using the "q" (not really sure if the "q" character is important or not) .... (xmlhttp.open("GET","xxxxxxx.php?q="+str,true);) I follow what they were doing there, but I want to pull the entire table back not just specific lines. (So I got rid of the Q)

Here is a snipit of HTML. The showdata function is part of the testpull.js code. You click the button and it should run the javascript to pull back the entire table and place it in the "placedata" div section.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>xxxxxxxxx</title>
<link type="text/css" rel="stylesheet" href="sig.css" />
<script type="text/javascript" src="testpull.js"></script>
</head>
<body>
...................
<div id="getdata">
</div><br />
<button type="button" onclick="showdata()">showdata</button>
<div id="placedata">
</div>
</div>

Here is my javascript file ..........

function showdata()
{
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("placedata").innerHTML=xmlhttp.responseText;
    }
xmlhttp.open("GET","getalldata.php",true);
xmlhttp.send();
  }
}

Here is my PHP "getalldata.php" file........ let assume there are three fields in each row of the table but I only want column 2 & 3...

<?php

$con = mysql_connect('xxxxx', 'xxxxxx', 'xxxxxx');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("xxxxxxxxx", $con);

$sql="SELECT * FROM table_list 

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>field2</th>
<th>field3</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['field2'] . "</td>";
  echo "<td>" . $row['field3'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

If anyone could help me with this I would greatly appreciate it.

javascript

2 Contributors
3 Replies
155 Views
7 Months Discussion Span
Latest Post 13 Years Ago Latest Post by mikecronauer

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mikecronauer 0 Newbie Poster · Answer 1 · 2010-08-18T23:14:10+00:00

OK- After some study I am able to answer my own question ... here is the code ...

HTML CODE ----- Will show data in place data area

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>xxxxxxxxx</title>
<link type="text/css" rel="stylesheet" href="sig.css" />
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="testpull.js"></script>
</head>
<body>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<button type="button" onclick="showdata()">showdata</button>
<div id="placedata">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
</div>
</div>
</body>
</html>

Here is Utils.js Javascript code

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }	
  return request;
}

HERE IS THE TESTPULL.JS JAVASCRIPT FILE

function showdata()
{
request = createRequest();
if (request==null){
	return;
	}
var url = "getalldata.php";

request.open("GET",url,true);

request.onreadystatechange = displayDetails;

request.send(null);

}

function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
    
      placedata.innerHTML = request.responseText;
    }
  }
}

AND FINALLY THE getalldata.php PHP CODE

<?php
$con = mysql_connect('localhost', 'XXXX', 'XXXX');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("XXXX", $con);

$result = mysql_query("SELECT * FROM email_list");

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
    echo "<td>" . $row['user_name'] . "</td>";
    echo " ---- ";
    echo "<td>" . $row['email'] . "</td>";
    echo "<br />";
  echo "</tr>";
  }

mysql_close($con);
?>

I have a strange sort of satisfaction having figured this out. Hope this helps someone out there.

dschuett -1 Junior Poster · Answer 2 · 2011-03-31T01:43:10+00:00

Hi, Thanks for this code! It is exactly what i have been looking for. However, I have copied your code LINE-BY-LINE and FILE-BY-FILE. (except for my own php query). And every time i click on showdata, firebug shows an error: "placedata is not defined placedata.innerHTML = request.responseText;" I am DYING to get this working, and any help is appreciated. And nothing is returned.

mikecronauer 0 Newbie Poster · Answer 3 · 2011-03-31T02:43:59+00:00

maybe the x's on line 10 and 13 in the html area are messing up your code? I am not sure, you also have to have all your connections updated pulling from your own sql database. anywhere you see xxxxx you have to put your own information.