CODEWITHSUNDEEP
phpjavascriptmysqlajaxwhile-loop
Demir Oral
Demir Oral

Reputation: 65

How can AJAX handling be incorporated into a PHP/MySQL While Loop (for asynchronous editing)?

SCROLL TO FIND WORKING CODE

I am working on a AJAX editing platform, and I am having trouble with setting up the text field for editing.

My code so far:

The Javascript below handles the initial submission:

<head>
<script type="text/javascript">
if(window.ActiveXObject) var ajax = new ActiveXObject('Microsoft.XMLHTTP');
else var ajax = new XMLHttpRequest();

function edit()
{
   var doc_id = document.getElementById("doc_id").value;
   ajax.open('GET', 'ajax.php?doc_id='+doc_id, true);
   ajax.onreadystatechange = function()
   {
      if(ajax.readyState == 4)
      {
         document.getElementById('content').innerHTML = ajax.responseText;
      }
   }
   ajax.send(null);
}
</script>
</head>

The SQL below handles the initial select query and display of that information:

$query = 'SELECT pp.`physician_id`, pp.`physician_first_name`, pp.`physician_last_name`, pp.`featured`, ';
$query.= 'FROM `primary_physicians` AS pp ';
$query.= 'ORDER BY pp.`physician_id` ';

<body>
<div id="container">
  <?php
    $result = mysql_unbuffered_query( $query );
    echo "<table border='1'>"; 
    while ($row = mysql_fetch_assoc($result))
    {   
        echo "<tr>";
        $physician_id = $row['physician_id'];
        echo "<td>" . $row['physician_id'] . "</td>";
        echo "<td><div id='content'><input id='doc_id' type='hidden' value='$physician_id' />" . $row['physician_first_name'] . "<br /><input type='button' value='Edit' onclick='edit();'></div></td>";
        echo "<td>" . $row['physician_last_name'] . "</td>";
echo "</tr>";
    }
    echo "</table>";

?>
</div>
</body>
</html>

And the 'ajax.php' file handles the request when the user clicks the 'Edit' button within the 'content' div.

    $client_id = $_GET['doc_id'];
$client_query = 'SELECT pp.`physician_id`, pp.`physician_first_name`, pp.`physician_last_name`, pp.`featured` ';
$client_query.= 'FROM `primary_physicians` AS pp WHERE pp.`physician_id`=' . $client_id . '';
$client_result = mysql_unbuffered_query( $client_query );

while ($client_row = mysql_fetch_assoc($client_result))
    {
    echo "<input type='text' value='$client_row[physician_first_name]' />";
    }

What shows is below:

Initial page load:

table display

Pressing the 'edit' button (any of the available buttons, not just the one associated with the client/ID): attempting an edit shows client ID #1

Pressing any edit button shows client ID #2 within client ID #1's table row (not in the row with client ID #2): pressing any edit button shows client ID #2 within client ID #1's table row

I'm guessing I have to set up something within the content div and somehow associate it with the 'edit()' function, however I can't figure out how to do that without setting the script within the while loop (which I really don't want to do).

WORKING CODE BELOW

Javascript (initial submission and display):

<head>
<script type="text/javascript">
if(window.ActiveXObject) var ajax = new ActiveXObject('Microsoft.XMLHTTP');
else var ajax = new XMLHttpRequest();

function hello(e)
{
   /* this was once document.getElementById("doc_id").value;*/
   var doc_id = e.currentTarget.id;
   ajax.open('GET', 'ajax.php?doc_id='+doc_id, true);
   ajax.onreadystatechange = function()
   {
      if(ajax.readyState == 4)
      {
         /*this was without the '+doc_id' document.getElementById('content').innerHTML = ajax.responseText; */
         document.getElementById('content'+doc_id).innerHTML = ajax.responseText;
      }
   }
   ajax.send(null);
}
</script>
</head>

PHP/MySQL:

<body>
<div id="container">
  <?php
    $result = mysql_unbuffered_query( $query );
    echo "<table border='1'>"; 
    while ($row = mysql_fetch_assoc($result))
    {   
        echo "<tr>";
        $physician_id = $row['physician_id'];
        echo "<td>" . $row['physician_id'] . "</td>";
            //note change to the 'content' div (addition of $physician_id to make it truly unique; this ties into the javascript above.
        echo "<td><div id='content$physician_id'>";
            //note changes to input id and button id, as well as the 'onclick' function.
            echo "<input id='doc_id_$physician_id' type='hidden' value='$physician_id' />" . $row['physician_first_name'] . "<br /><input type='button' id='$physician_id' value='Edit' onclick='hello(event);'></div></td>";
        echo "<td>" . $row['physician_last_name'] . "</td>";
echo "</tr>";
    }
    echo "</table>";

?>
</div>
</body>

No changes to or initial MySQL query or to ajax.php

Upvotes: 0

Views: 876

Answers (1)

Michal Trojanowski
Michal Trojanowski

Reputation: 12322

There is a problem with the elements' ids. Remeber that the id attribute should be unique inside a document. You are using the same id for numerous elements:

td><div id='content'><input id='doc_id' type='hidden' ...

inside a loop.

Then you use the Javascript document.getElementById('doc_id'). JS supposes there is only one element with this id on the page so it will always return the first element it finds.

EDIT:

You will have to also change your JS function to retrieve the proper value:

for the edit buttons use: onclick="edit(event)"

And then in the JS:

function edit(e) {
    buttonId = e.currentTarget.id;
    //use the button id to find the proper value
}

Of course you will have to set the id on the "edit" buttons and have it correspond with id of you inputs. E.g. use $i for the button id and doc_id_$i for the input id.

I also recommend having a look at jQuery, as it will help facilitate many of the things you're trying to achieve here.

Upvotes: 1

Related Questions