繼續從創建的行的末尾添加新項目

Question

我試圖重新從動態創建的下拉列表的末尾添加數據。

情景是這樣的我用的是從添加使用被使用jQuery函數創建下拉菜單多行的錯誤。這些錯誤是使用在表中，看起來像這樣1,2,3,4字符串中的一列到自己的錯誤ID ...等

的功能添加數據的工作完美地保存。但是，當我嘗試編輯數據時，問題就在此。

編輯我使用JavaScript來觸發一個POST請求從下表中提取數據，該數據是我使用來從數據表中數據的代碼。

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：

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

在PHP中，我得到了用戶的時間條目ID，然後從表中選擇正確的ErrorId列那麼如果列不爲空，則代碼運行explode在數據,結合，爲變量$id在foreach環路，則您可以通過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()函數用於填充新的下拉列表。

我也嘗試改變「添加」部分發現的最後一個項目，但仍把它添加到列表的頂部。

有人可以告訴我什麼我需要改變，以便從列表的末尾添加數據。

Answer 1

我自己解決了這個問題，所以我將其作爲答案。

問題是與我用來拉數據新下拉的JavaScript。我申請了一個條件來跳過0索引，我在創建新函數時刪除了這一行。這是造成這個問題的原因之一。

所以我改變了JavaScript的背部現在這個樣子，

function getError(){ 
    //Set the drop down as a variable 
    var errorSelect = document.getElementById("errorName"); 

    if(window.XMLHttpRequest){ 

     xmlhttp=new XMLHttpRequest(); 

    }else{ 

     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

    }xmlhttp.onreadystatechange=function(){ 
     if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
      if(errorSelect.selectedIndex === 0){ 
       errorSelect.innerHTML = xmlhttp.responseText; 
      } 
     } 
    }; 
    xmlhttp.open("POST","../functions/getQcErrors.php",true); 
    xmlhttp.send(); 
} 

然後我注意到，「添加」按鈕，在工作，這是克隆，但它是克隆一個確切的副本之前，所以選擇的下拉值與上面的值相同，這使我不得不改變這一點。我通過改變'添加'功能來存檔，條件只有在存在用戶時間標識號時才生效。

新增加功能：

$(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:last').clone().appendTo('.error-Column'); 

      $clone.find('.errorId').val('');//Find the errorId text box and makes value = "" 
      if($('#utid').text() !== ""){//Change was made here with this if 
       $clone.find('select.errorName').val("----- Select Error -----"); 
      } 
      $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"); 
     } 
    }); 
}); 

然後之後，我看到有一個與我的下拉菜單的一個大問題，他們並沒有與整個錯誤列表填充。只選擇了正確的錯誤並將其設置爲選定的選項。所以在盯着顯示器幾個小時後，我設法創建了完全按照我的意願做的PHP。

PHP代碼：

include_once("../iConnect/handShake.php"); 
if (!isset($_REQUEST["utid"])){ 
    //This will pull the QC errors from the qcError table. 
    $getQcErrors = "SELECT qcId,qcError FROM qcErrors ORDER BY qcId ASC"; 
    $queryQcErrors = $dbConnect -> query($getQcErrors); 
    $queryQcErrors -> execute(); 

    echo "<option selected disabled>----- Select Error -----</option>"; 
    while($rowQcError = $queryQcErrors -> fetch(PDO::FETCH_ASSOC)){ 
     echo "<option id=".$rowQcError["qcId"].">".$rowQcError["qcError"]."</option>"; 
    } 
}else{ 
    $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); 

    //Initiation of the error number counter 
    $errorNo = 1; 

    //Used to determine the last element of the table and this will set the last button as enabled 
    $len_Array = explode(',',$rowQcError["qcErrorId"]); 
    $lineCount = count($len_Array); 

    if (!empty($rowQcError["qcErrorId"])){ 
     foreach (explode(',',$rowQcError["qcErrorId"])as $id){ 
      //Pull only the matched data set from the table 
      $getQcErrors = "SELECT qcId,qcError FROM qcErrors WHERE qcId = :id ORDER BY qcId ASC"; 
      $queryQcErrors = $dbConnect -> prepare($getQcErrors); 
      $queryQcErrors -> bindParam(':id', $id); 
      $queryQcErrors -> execute(); 

      //Pulls the entire data set from the table 
      $getQcError = "SELECT qcId,qcError FROM qcErrors ORDER BY qcId ASC"; 
      $queryQcError = $dbConnect -> query($getQcError); 
      $queryQcError -> 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 selected disabled>----- Select Error -----</option>"; 
       while($rowQcError = $queryQcError -> fetch(PDO::FETCH_ASSOC)){ 
       //If condition which is in brackets will mach the ID's from both queries and set's the selected option 
        echo "<option id=".$rowQcError["qcId"].' '.(($rowQcError["qcId"] == $rowErrors["qcId"])?'selected':"").'>'.$rowQcError["qcError"]."</option>"; 
       } 
       echo "</select>"; 
       echo "<input class='errorId' size='1' name='errorId' value='".$rowErrors["qcId"]."' hidden readonly>"; 
       if ($errorNo == $lineCount){ 
        echo "<input type='button' class='addRow' value='Add'/>"; 
       }else{ 
        echo "<input type='button' class='addRow' value='Add' disabled/>"; 
       } 
       echo "<input type='button' class='delRow' value='Delete' />"; 
       echo "</div>"; 
       $errorNo++; 
      } 
     } 
    }else{ 
     echo "No data"; 
    } 
} 

這是一個完整的代碼可能不會是篦，但它的工作，所以希望這有助於有人在未來