从创建的行的末尾继续添加新项目

Question

I'm trying to restart adding data from the end of the dynamically created list of drop downs.

Scenario is this I use a from to add multiple lines errors using drop downs which are created using a jQuery function. These errors are stored using their error ID in a one column in the table as a string which looks like this 1,2,3,4 ... etc.

The functions to add the data is working flawlessly. But the issue is when I try to edit the data.

To edit the data I use a JavaScript to fire a post request to pull the data from the table below is the code I'm using to get the data from the data tables.

HTML: Where I create the list

<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: This script is called on load of the file to pull the data from the table and set them as selected items.

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

In the PHP I get the user time entry ID then select correct ErrorId column from the table then if the column is not empty then run the code to explode the data at , bind that to the variable $id in a foreach loop then get the correct error name from the qcErrors table.

The above PHP and the JavaScript is working. And the drop downs are getting created as intended but when I try to add a new item by clicking the "Add" button the new drop down get created at the top of the list already existing drop downs move down. No matter how many data is there the "Add" button creates the new item at the top.

jQuery: The function I use to create a new item.

// 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");
    }
  });
});

I just left the delete in there as well. And the getError() function is used for populating the new drop down list.

I did try changing the "Add" part to spot the last item but still it adds to the top of the list.

Can some one please show me what I need to change in order to add the data from the end of the list.

Answer 1

I solved this problem by my self so I'm it as an answer.

The problem was with the JavaScript which I used to pull the data for the new drop down. There was a condition which I applied to skip the 0 index, I removed this line line when I was creating the new function. This was the one which was causing the issue.

So I changed the JavaScript back which now look like this,

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

Then I noticed that the 'Add' button was working and it was cloning but it was cloning the exact replica of the one before it so the selected value of the drop down was identical to the above one which confused me so had to change that. I archived that by changing the 'Add' function with if condition which only takes effect only if there's a user time id number.

New Add function:

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

Then after that I saw there was a big problem with my drop downs they were not populated with the entire error list. Only the correct error was selected and set as the selected option. So after staring at the monitor for hours I managed to create the PHP which did exactly what I wanted.

PHP Code:

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

This is the full code it might not be that grate but it does work, so hope this helps some one in future