MySQLテーブルによって作成されたHTML選択要素のJQueryインライン編集。 Contenteditable

Question

私は、ユーザーが提出することなく、オンザフライでMySQLテーブルのインライン編集を可能にするいくつかのJQueryコードを持っています。 JQueryとAJAXの呼び出しを使用してデータベースを更新します。要素内のデータを更新する場合、要素内のデータを更新したい場合、そのオプションを選択したときに呼び出されるように選択することはできません。 AJXAが作成しているSQLを見直すと、使用可能なオプションはすべて、送信されたSQL文に含まれます。

私は間違っていますか、別のルートを取る必要がありますか？ここに私のコードの縮小バージョンです。私が達成しようとしていることを理解するだけで十分です。あなたが提供できるヘルプや指導に感謝します。

メンバーのデータを取得するためにMySQLテーブル（members_v30）を呼び出すWebページ（members.php）と、必要に応じてメンバのデータを表示および編集するために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; ?> 

私の問題は別のオプションを選択したときです。選択された「選択された」属性を取得していないようで、JQuery/AJAXが正しいクエリをDBに渡しません。

agiainになると、これはでしか起こりません。よく働く。ここで

は私のJavaScript（edit.js）... ChromeのDevのを使用して

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

です。ツール - あなたはすべてのオプションが渡されているID = 1

を見ることができます ABAAR ABHM APRN 'ネットワークプレビューがここで私は

UPDATE members_v30セットCODE1 =得るものです'。

入力、批評、または??感謝されます。前もって感謝します。

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、選択したコード1とメンバーIDを渡しています。

私はcontenteditableを廃止し、select要素のidを使用して、JavaScriptのgetcode1関数に渡された値を表しました。

このページには多くのメンバーが掲載されているので、select IDにメンバーのIDを追加する理由は、選択IDが異なる必要があるためです。私がこれをしなかった場合、select idはJavaScriptに渡すときに最初の値を保持します。

資格情報テーブルもループしています。オプション値がメンバーコードと一致する場合、私はselected = "selected"を設定します。

そして、ここでは

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

私のJavascript

だと、ここで私は前に述べたように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); 
    ?> 

をだ、それが働いているが、それはおそらく、それを行うための最善の方法ではありません。私はそれを再訪するかもしれませんが、今は次の問題に移ります。