由 MySQL 表填充的 HTML 选择元素的 JQuery 内联编辑。内容可编辑

Question

我有一些 JQuery 代码允许在线编辑 MySQL 表而无需用户提交。它使用 JQuery 和 AJAX 调用来更新数据库。它适用于元素内的数据，但是当我想更新元素内的某些内容时，我似乎无法在选择该选项时调用 selected="selected" 。在查看 AJXA 正在创建的 SQL 时，所有可用的选项都在提交的 SQL 语句中。

我做错了什么还是需要采取另一条路线？这是我的代码的简化版本。我希望这足以理解我想要完成的事情。感谢您提供的任何帮助或指导。

我有一个网页 (members.php)，它调用 MySQL 表 (members_v30) 以检索成员数据，并另一个调用从 member_credentials 表中获取选项以填充字段以显示和编辑（如果需要）成员的凭据.

    <?php
//Create DB Object
$db = new Database;
//Query
$query = "SELECT * from members_v30 ORDER BY last_name ASC";    
//Run Query
$members = $db->select($query);
?>

<?php
//Query
$query = "SELECT * from member_credentials ORDER BY credential ASC";
//Run Query
$credentials = $db->select($query);
?>

表格的人数和成员的凭据效果很好。我可以编辑元素中的任何内容。我还有代码可以根据与数据库表匹配的相等条件选择正确的选项。 （注意：我可能将这个问题中的代码制作为详细购买显示凭证循环，因为我认为这与问题没有任何关系。我认为它与 contenteditable 和 select 相关。）

<?php while($row = $members->fetch_assoc()) : ?>

              <tr class="table-row">
                <!-- edit saveToDatabase(this,'xxxxxxxx')  -->
                <td contenteditable="true" onBlur="saveToDatabase(this,'last_name','<?php echo $row['id']; ?>')" onClick="showEdit(this);"><?php echo $row['last_name']; ?></td>
                <td contenteditable="true" onBlur="saveToDatabase(this,'first_name','<?php echo $row['id']; ?>')" onClick="showEdit(this);"><?php echo $row['first_name']; ?></td>
                <td contenteditable="true" onBlur="saveToDatabase(this,'initial','<?php echo $row["id"]; ?>')" onClick="showEdit(this);"><?php echo $row["initial"]; ?></td>
                <td contenteditable="true" onBlur="saveToDatabase(this,'suffix','<?php echo $row["id"]; ?>')" onClick="showEdit(this);"><?php echo $row["suffix"]; ?></td>

                <td>
                    <select name="code1" contenteditable="true" onChange="saveToDatabase(this,'code1','<?php echo $row["id"]; ?>')" onClick="showEdit(this);">
                        <?php mysqli_data_seek($credentials,0); ?>
                        <?php while($row2 = $credentials->fetch_assoc()) : ?>
                            <option value="<?php echo $row2['credential']; ?>" <?php if ($row2['credential'] == $row['code1']) echo 'selected="selected"'; ?> ><?php echo $row2['credential']; ?></option>
                        <?php endwhile; ?>
                    </select>
                <?php //echo $row["code1"]; ?>
                </td>
    </tr>
        <?php endwhile; ?>

我的问题是当我选择另一个选项时，我似乎没有获得 selected="selected" 属性，然后我的 JQuery/AJAX 没有将正确的查询传递给数据库。

再一次，这只发生在 .效果很好。

这是我的 JavaScript (edit.js)...

function showEdit(editableObj) {
            $(editableObj).css("background","#FFF");
        } 



        function saveToDatabase(editableObj,column,id) {
            $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
            $.ajax({
                url: "saveedit.php",
                type: "POST",
                data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
                success: function(data){
                    $(editableObj).css("background","#FDFDFD");
                }        
           });
        }

还有我的 saveit.php

<?php include 'libraries/Database.php'; ?>

<?php 
//Create DB Object
$db = new Database;
//Query
$query = "UPDATE members_v30 set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"];
//Run Query
//echo $query ;  // Will be shown in Chrome Developer Tools
$update_members = $db->update_members($query);
?>

使用 Chrome 的开发者。工具网络 - 在这里预览是我得到的

更新 members_v30 设置代码 1 = ' ABAAR ABHM APRN ' 哪里 id=1

所以你可以看到每个选项都被通过了。

任何意见、批评或??将不胜感激。提前谢谢你。

Answer 1

我让它工作了。我不确定这是否是最好的方法，但它确实有效。

我会发布代码并解释我做了什么......

带有选择下拉菜单的主页。

         <td>
                <select id=code1_<?php echo $row['id']; ?> onchange="getcode1(this,'<?php echo $row['id']; ?>')">
                    <option value=""></option>
                    <?php mysqli_data_seek($credentials,0); ?>
                    <?php while($row2 = $credentials->fetch_assoc()) : ?>
                        <option value="<?php echo $row2['credential']; ?>" <?php if ($row2['credential'] == $row['code1']) echo 'selected="selected"'; ?> ><?php echo $row2['credential']; ?></option>
                    <?php endwhile; ?>
                </select>
            </td>

onchange，我正在传递所选的 code1 和成员 ID。

我已经取消了 contenteditable，现在使用 select 元素的 id 来表示传递给 JavaScript getcode1 函数的值。

请注意，此页面列出了许多成员，这就是我将成员 ID 添加到选择 ID 的原因，因为我需要每个选择 ID 都不同。如果我不这样做，当我将它传递给 JavaScript 时，select id 将保留第一个值。

我也在遍历凭证表，如果选项值与成员代码匹配，我设置 selected="selected"。

这是我的 Javascript

    function getcode1(value,member_id) {

    var value = $('#code1_'+member_id).val();

            $.ajax({
                type: "POST",
                url: "save_code1.php",
                data:'member_code1='+value+'&member_id='+member_id,
                success: function(data){
                    $('form#submit').hide(function(){$('div.success').fadeIn();});

                }
            });
     return true;
     };

这里是 save_code1.php

  <?php include 'libraries/Database.php'; ?>

  <?php 
  //Create DB Object
  $db = new Database;
  ?>

  <?php
  $id = $_POST['member_id'];
  $code1 = $_POST['member_code1'];
  $query = "UPDATE members_v30 SET code1 = '$code1' where id =".$id;
  $update_members = $db->update_members($query);
  ?>

正如我之前提到的，它有效，但它可能不是最好的方法。我可能会重新审视它，但现在我正在处理我的下一个问题。