Using PHP to query db, fetch results via AJAX as variable, query db again using values of initial variable

Question

It's all in the question really :)

It's clearer when I put it in bullet points what I want to do, so here it goes:

• I have two forms on a page, a search form, and an 'edit profile' form. Both are in working order, individually.
• The edit profile form paginates through the rows of my MySQL tbl, allowing my to edit the values for each column. Currently set up to include all rows (i.e. all stored profiles).
• the search form takes any of 17 different search variables and searches that same table to find a profile, or a group of profiles.
• I want to be able to enter a search term (e.g. Name: 'Bob'), query the tbl as I am doing, but use AJAX to return the unique ID's of the results as an an array stored within a variable. I then want to be able to asynchronously feed that variable to my edit profile form query (the search form would have a submit button...) so I can now page through all the rows in my table (e.g. where the Name includes 'Bob'), and only those rows.

Is the above possible with the languages in question? Can anyone help me piece them together?

I'm at an intermediate-ish stage with PHP and MySQL, but am an absolute novice with AJAX. I've only ever used it to display a text string in a defined area - as seen in demos everywhere :) Therefore, treating me like a five-year-old is greatly appreciated!

Here are my current search query, and the edit-profile form, if they help at all:

The Edit Profile form:

//pagination base
if (isset($_GET['page'])) { $page = $_GET['page']; }
else { $page = 1; }
$max_results = 1;
$from = (($page * $max_results) - $max_results);

$total_results = mysql_result(mysql_query("SELECT COUNT(*) as Num FROM profiles"),0);
$total_pages = ceil($total_results / $max_results);

echo '<span id="pagination">' . 'Record ' . $page . ' of ' . $total_results . ' Records Returned. ';

if($total_results > $max_results)
{
    if($page > 1)
    { $prev = ($page - 1);
      echo "<a href=\"".$_SERVER['PHP_SELF']."?page=$prev\"><input type='submit' value='&lt;&lt;' /></a>";
    }
    if($page == 1)
    { echo "<input type='submit' value='&lt;&lt;' />"; }
    if($page < $total_pages)
    { $next = ($page + 1);
      echo "<a href=\"".$_SERVER['PHP_SELF']."?page=$next\"><input type='submit' value='&gt;&gt;' /></a>";
    }
    if($page == $total_pages)
    { echo "<input type='submit' value='&gt;&gt;' />";
    }
}
echo '</span></p>';
?>

// the query, currently selecting all but which I would have include a WHERE clause (WHERE ProfileID = $profileid...)

<?php
$sql = ("SELECT * FROM profiles 
    ORDER BY ProfileID 
    LIMIT $from, $max_results");

$rs = mysql_query($sql);

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

$profile = $row['ProfileID'];

?>

<form id="profile-form" action="profile-engine.php" method="post">
    <input type="hidden" name="formid" value="edit-profile">
    <input type="hidden" name="thisprofile" value="<?php echo $profile; ?>">

    <table id="profile-detail" class="profile-form">
    <tr>
        <td>        
    <label for="profile-name">Name:</label>
        <?php
            $nameresult = mysql_query("SELECT ProfileName 
                            FROM profiles 
                            WHERE ProfileID = '$profile'");
            $row = mysql_fetch_array($nameresult);
        ?>
    <input type="text" class="text" name="profile-name" id="profile-name" value="<?php echo $row['ProfileName']; ?>" />
        </td>

//goes on in this vein for another 16 inputs :)

The Search Query:

//connection established        

$query = "SELECT * FROM profiles"; 

$postParameters = array("name","height","gender","class","death","appro","born","tobiano","modifier","adult","birth","sire","dam","breeder","owner","breed","location");
$whereClause = " WHERE 1 = 1";
foreach ($postParameters as $param) {
    if (isset($_POST[$param]) && !empty($_POST[$param])) {
        switch ($param) {
            case "name":
                $whereClause .= " AND ProfileName LIKE '%".$_POST[$param]."%' ";
                break;
            case "height":
                $whereClause .= " AND ProfileHeight='".$_POST[$param]."' ";
                break;
            case "gender":
                $whereClause .= " AND ProfileGenderID='".$_POST[$param]."' ";
                break;
//more cases....
        }
    }
}
$query .= $whereClause;

$result = mysql_query("$query");

$values = array();
while ($row = mysql_fetch_array($result)) {
$values[] =  $row['ProfileID'];
    }
/*  
//just me checking that it worked...
foreach( $values as $value => $id){
    echo "$id <br />";
}
*/


    mysql_close($con);

So, there you have it! Thanks in advance for any help!

Answer 1

what about: search copies search term to local variable, service returns an array of results that you hold, and then pagination uses JS to drop in the values into the appropriate fields. If you change one and save, it submits the edits, including the original search term, which is used to re-query the service, and returns the updated array...repeat as necessary

here's some sample code (here there's just two search fields, I know you need more):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var query = new Object();
var resp;
var i;
function next(on){
    i=on+1;
    if(i==resp.results.length){i--;}
    fillForm(i);
}
function prior(on){
    i=on-1;
    if(i<0){i++;}
    fillForm(i);
}

function fillForm(i){   
    document.getElementById("paginate").innerHTML='<button onclick="prior('+i+')">&lt;</button>'+(i+1)+' of '+resp.results.length+'<button onclick="next('+i+')">&gt;</button>';
    document.getElementById("name").value=resp.results[i].name;
    document.getElementById("height").value=resp.results[i].height;
    document.getElementById("gender").value=resp.results[i].gender;
    document.getElementById("class").value=resp.results[i].class;
    document.getElementById("death").value=resp.results[i].death;
    document.getElementById("appro").value=resp.results[i].appro;
    document.getElementById("born").value=resp.results[i].born;
    document.getElementById("tobiano").value=resp.results[i].tobiano;
    document.getElementById("modifier").value=resp.results[i].modifier;
    document.getElementById("adult").value=resp.results[i].adult;
    document.getElementById("birth").value=resp.results[i].birth;
    document.getElementById("sire").value=resp.results[i].sire;
    document.getElementById("dam").value=resp.results[i].dam;
    document.getElementById("breeder").value=resp.results[i].breeder;
    document.getElementById("owner").value=resp.results[i].owner;
    document.getElementById("breed").value=resp.results[i].breed;
    document.getElementById("location").value=resp.results[i].location;
    document.getElementById("id").value=resp.results[i].id;
    document.getElementById("saveButton").innerHTML='<button onclick="save()">Save</button>';
}
function getData(){
    query.name=document.getElementById('query_name').value;
    query.gender=document.getElementById('query_gender').value;
    var variables='';
    variables+='name='+query.name;
    variables+='&gender='+query.gender;
    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)
    {
    resp = JSON.parse(xmlhttp.responseText);
    fillForm(0);
    }
  }
xmlhttp.open("GET","searchNav.php?"+variables,true);
xmlhttp.send(); 
}

function save(){
    var saving="";
    saving+='?q='+query;
    saving+='&name='+document.getElementById('name').value;
    saving+='&height='+document.getElementById('height').value;
    saving+='&gender='+document.getElementById('gender').value;
    saving+='&class='+document.getElementById('class').value;
    saving+='&death='+document.getElementById('death').value;
    saving+='&appro='+document.getElementById('appro').value;
    saving+='&born='+document.getElementById('born').value;
    saving+='&tobiano='+document.getElementById('tobiano').value;
    saving+='&modifier='+document.getElementById('modifier').value;
    saving+='&adult='+document.getElementById('adult').value;
    saving+='&birth='+document.getElementById('birth').value;
    saving+='&sire='+document.getElementById('sire').value;
    saving+='&dam='+document.getElementById('dam').value;
    saving+='&owner='+document.getElementById('owner').value;
    saving+='&breed='+document.getElementById('breed').value;
    saving+='&breeder='+document.getElementById('breeder').value;
    saving+='&location='+document.getElementById('location').value;
    saving+='&id='+document.getElementById('id').value;
        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)
    {
    resp = JSON.parse(xmlhttp.responseText);
    fillForm(0);
    }
  }
xmlhttp.open("GET","saveEdits.php"+saving,true);
xmlhttp.send(); 
}
</script>
</head>
<body>
<div id="search">
    <table>
    <tr><td>Name:</td><td><input type="text" id="query_name" /></td></tr>
    <tr><td>Gender:</td><td><input type="text" id="query_gender" /></td></tr></table>
    <button onclick="getData()">Search</button>   
</div>
<div id="results">
    <div id="paginate"></div>
    <input type="hidden" id="id" />
    <table>
    <tr><td>Name:</td><td><input type="text" id="name" /></td></tr>
    <tr><td>Height:</td><td><input type="text" id="height" /></td></tr>
    <tr><td>Gender:</td><td><input type="text" id="gender" /></td></tr>
    <tr><td>Class:</td><td><input type="text" id="class" /></td></tr>
    <tr><td>Death:</td><td><input type="text" id="death" /></td></tr>
    <tr><td>Appro:</td><td><input type="text" id="appro" /></td></tr>
    <tr><td>Born:</td><td><input type="text" id="born" /></td></tr>
    <tr><td>Tobiano:</td><td><input type="text" id="tobiano" /></td></tr>
    <tr><td>Modifier:</td><td><input type="text" id="modifier" /></td></tr>
    <tr><td>Adult:</td><td><input type="text" id="adult" /></td></tr>
    <tr><td>Birth:</td><td><input type="text" id="birth" /></td></tr>
    <tr><td>Sire:</td><td><input type="text" id="sire" /></td></tr>
    <tr><td>Dam:</td><td><input type="text" id="dam" /></td></tr>
    <tr><td>Breeder:</td><td><input type="text" id="breeder" /></td></tr>
    <tr><td>Owner:</td><td><input type="text" id="owner" /></td></tr>
    <tr><td>Breed:</td><td><input type="text" id="breed" /></td></tr>
    <tr><td>Location:</td><td><input type="text" id="location" /></td></tr>
    </table>
    <div id="saveButton"></div>
</div>
</body>
</html>

and the search:

<?php
//connection established        
$query = "SELECT * FROM profiles"; 
$postParameters = array("name","height","gender","class","death","appro","born","tobiano","modifier","adult","birth","sire","dam","breeder","owner","breed","location");
$whereClause = " WHERE 1 = 1";
foreach ($postParameters as $param) {
    if (isset($_POST[$param]) && !empty($_POST[$param])) {
       $whereClause .= " AND ".$param."='".$_POST[$param]."'";
    }
}
$query .= $whereClause;
$result = mysql_query("$query");
echo "{\"results\":";
if($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo "[";
    echo "{\"name\":\"".$row["name"]."\",";
    echo "\"height\":\"".$row["height"]."\",";
    echo "\"gender\":\"".$row["gender"]."\",";
    echo "\"class\":\"".$row["class"]."\",";
    echo "\"death\":\"".$row["death"]."\",";
    echo "\"appro\":\"".$row["appro"]."\",";
    echo "\"born\":\"".$row["born"]."\"";
    echo "\"tobiano\":\"".$row["tobiano"]."\"";
    echo "\"modifier\":\"".$row["modifier"]."\"";
    echo "\"adult\":\"".$row["adult"]."\"";
    echo "\"birth\":\"".$row["birth"]."\"";
    echo "\"sire\":\"".$row["sire"]."\"";
    echo "\"dam\":\"".$row["dam"]."\"";
    echo "\"breeder\":\"".$row["breeder"]."\"";
    echo "\"owner\":\"".$row["owner"]."\"";
    echo "\"breed\":\"".$row["breed"]."\"";
    echo "\"location\":\"".$row["location"]."\"";
    //echo "\"id\":\"".$row["id"]."\"";
    echo "}";
}
else{
echo "\"no\"}";
exit;
}
while($row = mysql_fetch_array($data,MYSQL_ASSOC)){
    echo ",{\"name\":\"".$row["name"]."\",";
    echo "\"height\":\"".$row["height"]."\",";
    echo "\"gender\":\"".$row["gender"]."\",";
    echo "\"class\":\"".$row["class"]."\",";
    echo "\"death\":\"".$row["death"]."\",";
    echo "\"appro\":\"".$row["appro"]."\",";
    echo "\"born\":\"".$row["born"]."\"";
    echo "\"tobiano\":\"".$row["tobiano"]."\"";
    echo "\"modifier\":\"".$row["modifier"]."\"";
    echo "\"adult\":\"".$row["adult"]."\"";
    echo "\"birth\":\"".$row["birth"]."\"";
    echo "\"sire\":\"".$row["sire"]."\"";
    echo "\"dam\":\"".$row["dam"]."\"";
    echo "\"breeder\":\"".$row["breeder"]."\"";
    echo "\"owner\":\"".$row["owner"]."\"";
    echo "\"breed\":\"".$row["breed"]."\"";
    echo "\"location\":\"".$row["location"]."\"";
    //echo "\"id\":\"".$row["id"]."\"";
    echo "}";
}
echo "]}";
?>