jQuery的HTML选择元素在线编辑由MySQL表填充.可满足的

Question

我有一些jQuery代码，可以在无需用户提交的情况下即时编辑MySQL表。它使用jQuery和Ajax调用来更新数据库。它非常适合元素中的数据，但是当我想更新元素中的某些内容时，我似乎无法选择="选择"时要调用该选项。在审查AJXA创建的SQL时，所有可用选项均在已提交的SQL语句中。

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

我有一个网页（成员.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);
?>

桌子的人口和成员的凭证效果很好。我可以在元素中编辑任何内容。我也有代码可以根据与DB表匹配的相等条件选择适当的选项。（注意：我可能会在此问题中制作代码以详细购买显示证书循环，因为我认为它与问题无关。我认为它与可满足的并选择相关。）

<?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不会将正确的查询传递给DB。

一旦Agiain，这只会发生。效果很好。

这是我的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's Dev。工具网络 - 预览这是我得到的

更新成员_v30 set code1 ='阿巴尔abhm4月'其中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>

on Change，我正在选择Code1，并且成员ID。

我已经消除了可满足的功能，现在使用Select Element的ID表示传递给JavaScript GetCode1函数的值。

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

我也通过凭据表循环，如果选项值与成员代码匹配，则我将Select select =" 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);
  ?>

正如我之前提到的，它在起作用，但这可能不是最好的方法。我可能会重新访问它，但是现在我要解决下一个问题。