JQuery 由 MySQL table 填充的 HTML select 元素的内联编辑。 Contenteditable

Question

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

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

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

    <?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);
?>

table 的人口和会员的凭据效果很好。我可以编辑元素中的任何内容。我还有一些代码可以根据与数据库 table 匹配的相等条件来选择正确的选项。（注意：我可能正在将此问题中的代码制作为详细购买以显示凭据循环，因为我认为它与该问题没有任何关系。我认为它与 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; ?>

我的问题是当我 select 另一个选项时我似乎没有得到 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");
                }        
           });
        }

还有我的savedit.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 = ' 阿巴尔 ABHM APRN ' 其中 id=1

所以你可以看到每个选项都被传递了。

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

Answer 1

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

我将 post 代码并解释我所做的事情....

带有 select 下拉菜单的主页。

         <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，我正在传递代码 1 selected 和会员 ID。

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

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

时，它会保留第一个值

我也在遍历凭证 table，如果选项值与会员代码匹配，我设置 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);
  ?>

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

JQuery 由 MySQL table 填充的 HTML select 元素的内联编辑。 Contenteditable

JQuery in-line edit of HTML select element populated by MySQL table. Contenteditable

jquery

select

edit

contenteditable