0

滚动查找工作代码

我在 AJAX 编辑平台上工作，在设置文本字段进行编辑时遇到问题。

到目前为止我的代码：

下面的 Javascript 处理初始提交：

<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>

下面的 SQL 处理该信息的初始选择查询和显示：

$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>

当用户单击“内容”div 中的“编辑”按钮时，“ajax.php”文件会处理请求。

    $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]' />";
    }

如下所示：

初始页面加载：

表格展示

按下“编辑”按钮（任何可用按钮，而不仅仅是与客户端/ID 关联的按钮）： 尝试编辑显示客户端 ID #1

按下任何编辑按钮会在客户端 ID #1 的表行中显示客户端 ID #2（不在客户端 ID #2 的行中）： 按下任何编辑按钮会在客户端 ID #1 的表格行中显示客户端 ID #2

我猜我必须在内容 div 中设置一些东西，并以某种方式将它与“edit（）”函数相关联，但是如果不在 while 循环中设置脚本（我真的不想做）。

下面的工作代码

Javascript（初始提交和显示）：

<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>

没有更改或初始 MySQL 查询或 ajax.php

4

1 回答 1

1

元素有问题id。请记住，id 属性在文档中应该是唯一的。您对许多元素使用相同的 id：

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

在一个循环内。

然后你使用 Javascript document.getElementById('doc_id')。JS 假设页面上只有一个带有 thisid的元素，所以它总是会返回它找到的第一个元素。

编辑：

您还必须更改 JS 函数以检索正确的值：

对于编辑按钮使用：onclick="edit(event)"

然后在 JS 中：

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

当然，您必须在“编辑”按钮上设置 id 并使其与您输入的 id 相对应。例如$i，用于按钮 ID 和doc_id_$i输入 ID。

我还建议您查看 jQuery，因为它有助于促进您在这里尝试实现的许多事情。

于 2013-02-22T12:18:23.783 回答