0
動的に作成されたドロップダウンリストの最後からデータを追加し直しています。作成した行の末尾に新しい項目を追加し続けます
これはシナリオです。jQuery関数を使用して作成されたドロップダウンを使用して複数行のエラーを追加するにはfromを使用します。これらのエラーは、テーブルの1列のエラーIDを使用して1,2,3,4 ...のように表示されます。
データを追加する機能は完全に機能しています。しかし、問題は私がデータを編集しようとするときです。
データを編集する私はJavaScriptを使用して、データテーブルからデータを取得するために使用しているコードを下の表からデータを取得するポストリクエストを発生させます。
HTML：私はリスト
<div id="jType-container" <?php if ($getTimeDataRow["jType"] == "QC"){?> style="display: block;" <?php } ?>>
<div id="error-Add-Container">
<div id="error-Column-Headings">
Error Number<span>Error Name</span>
</div>
<div class="error-Column" id="errorArea">
<!-- Code is inserted by using the JavaScript which retrieves the data -->
<!-- from the database-->
</div>
</div>
</div>
JavaScriptを作成します。このスクリプトは、テーブルからデータを取得し、選択した項目としてそれらを設定するために、ファイルのロード時に呼び出されました。
function getError2(){
if (document.getElementById("utid").innerHTML !== "") {
var utid = document.getElementById("utid").innerHTML;
}else{
utid = null;
}
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("errorArea").innerHTML = xmlhttp.responseText;
}
};
if(utid === null){
alert("User time ID is not set, Are you sure you're in the right place.");
}else{
xmlhttp.open("POST","../functions/getQcErrors.php?utid="+utid,true);
xmlhttp.send();
}
}
PHP：PHPで
$getQcErrors = "SELECT qcErrorId FROM usertimetrack WHERE utId = :utid";
$queryQcErrors = $dbConnect -> prepare($getQcErrors);
$queryQcErrors -> bindParam(':utid', $_REQUEST["utid"]);
$queryQcErrors -> execute();
$rowQcError = $queryQcErrors -> fetch(PDO::FETCH_ASSOC);
$errorNo = 1;
if (!empty($rowQcError["qcErrorId"])){
foreach (explode(',',$rowQcError["qcErrorId"])as $id){
$getQcErrors = "SELECT qcId,qcError FROM qcErrors WHERE qcId = :id ORDER BY qcId ASC";
$queryQcErrors = $dbConnect -> prepare($getQcErrors);
$queryQcErrors -> bindParam(':id', $id);
$queryQcErrors -> execute();
while ($rowErrors = $queryQcErrors -> fetch(PDO::FETCH_ASSOC)){
echo "<div class='error-container'>";
echo "<input class='errorCount' size='1' value='".$errorNo."' style='margin-left: 2%' />";
echo "<select id='errorName' class='errorName'>";
echo "<option id=".$rowErrors["qcId"].">".$rowErrors["qcError"]."</option>";
echo "</select>";
echo "<input class='errorId' size='1' name='errorId' value='".$rowErrors["qcId"]."' hidden readonly>";
echo "<input type='button' class='addRow' value='Add'/>";
echo "<input type='button' class='delRow' value='Delete' />";
echo "</div>";
$errorNo++;
}
}
}else{
echo "No data";
}
私は、ユーザーのタイムエントリIDを取得し、その後、列が空でない場合は、その後でデータをexplodeするためのコードを実行し、テーブルから正しいErrorId列を選択,foreachループ内の変数$idにバインドしてから、qcErrorsテーブルから正しいエラー名を取得します。
上記のPHPとJavaScriptが動作しています。ドロップダウンは意図どおりに作成されていますが、[追加]ボタンをクリックして新しいアイテムを追加しようとすると、リストの上部に新しいドロップダウンが作成され、既存のドロップダウンが下に移動します。いくつのデータがあっても、「追加」ボタンは新しい項目を上に作成します。
jQuery：私は新しいアイテムを作成するために使用する関数です。
// Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var selectedIndex = $('.errorId').filter(':last').val();
if(selectedIndex !== ""){
// $('.error-Column .error-container:last').clone().appendTo('.error-Column');//Clones the row
// --- Disabled due to is clones and resets the value of the drop down box
var $clone = $('.error-Column .error-container:first').clone().appendTo('.error-Column');
$clone.find('.errorId').val('');//Find the errorId text box and makes value = ""
$clone.find('select.errorName').focus();//When cloned set the focus to the error selector
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);//Add a row and disables add buttons above
//resetErrorNo();//Reset the values
getError();//Pulls the errors from the DB
}else{
alert("Select an error name");
}
}).on('click', '.delRow', function() {
var $btn = $(this);
if (confirm('Your sure you want to remove this?')) {
$btn.closest('.error-container').remove();//Removes the row
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);//Enables the last add button
resetErrorNo();//Reset the values
}
}).on('mouseover','.error-container',function() {
if($('#startTime').val()===""){
alert("Set job start time");
}
});
});
私はそこにも削除を残しました。 getError()関数は、新しいドロップダウンリストの作成に使用されます。
「追加」部分を変更して最後の項目を確認しようとしましたが、それでもリストの先頭に追加されました。
リストの最後からデータを追加するには、変更が必要なものを表示してください。
で、これはいくつかのいずれかを役に立てば幸い新しい行を追加しようとしているスクリプト内を除いて、クラス名 'error-Column'。 DOMにそのような要素がありますか？最初にセレクタを修正しない場合。 次に、次のように試してください。 var $ clone = $（ 'error-Column .error-container：first'）。clone（）; $（ '。error-Column'）。append（$ clone）; うまくいくと思います！ –
申し訳ありませんHTML部分を追加するのを忘れました – Sand
私は以前のコメントで言ったようにしてみましたか？すなわち、 var $ clone = $（ 'error-column .error-container：first'）。クローン（）; $（ '。error-Column'）。append（$クローン）;それが動作することを願って！ –