JQuery在線編輯由MySQL表填充的HTML選擇元素。 Contenteditable

我有一些JQuery代碼，允許在線編輯MySQL表格，而不需要用戶提交。它使用JQuery和AJAX調用來更新數據庫。它適用於元素內的數據，但是當我想要更新元素內的某些元素時，我似乎無法在選擇該選項時調用selected =「selected」。在審查AJXA正在創建的SQL時，所有可用的選項都在提交的SQL語句中。JQuery在線編輯由MySQL表填充的HTML選擇元素。 Contenteditable

我在做什麼錯誤或我需要採取另一條路線？這是我的代碼的簡化版本。我希望足夠了解我想要完成的事情。我感謝您提供的任何幫助或方向。

我有一個網頁（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不會傳遞正確的查詢到數據庫。

一旦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的開發。工具網絡 - 在這裏預覽是我得到

UPDATE members_v30集編碼1 = ' ABAAR ABHM APRN ' WHERE ID = 1

所以，你可以看到每一個選項被傳遞。

任何投入，批評或??將不勝感激。先謝謝你。

來源

2016-06-25 Antonio D

我明白了。我不確定這是否是最好的方法，但它是有效的。

我會後的代碼，並解釋我做了什麼....

與選擇下拉菜單主頁。

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

正如我前面提到的，它的工作，但它可能無法做到這一點的最好辦法。我可能會重新訪問它，但現在我正在轉向下一個問題。

來源

2016-07-06 18:01:53

JQuery在線編輯由MySQL表填充的HTML選擇元素。 Contenteditable

回答

相關問題