Javascript/Ajax Change Class element with PHP

Question

Asking for this with regarding on how to add class name on specific row without reloading the entire page. Upon saving I want to change the color of a input regarding of its status. If its Completed the color will change into green, if its unprocessed it will change the color to red.

Here is my Code for Javascript/AJax

 <script>
  $(function () {
    var Toast = Swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000
    });
    $('.distro').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
        type: 'post',
        url: 'process/beta.php',
        data: $(this).serialize(),
        success: function (result) {
            Toast.fire({
            icon: 'success',
            title: ' Ticket Save!EACH '
            
          })
            const list = document.getElementById("new").classList;
            list.add("bg-danger");
        }
      });
    });
  });

Here is my code for PHP

    $id = $_SESSION['employee_id'];
$flex = $_POST['flex'];
$status = $_POST['status'];
$lob = $_POST['lob'];
$comment = $_POST['comment'];
$number =$_POST['workflow'];
$date = date("Y/m/d");
$time = date("h:i:sA");


if (!empty($status) || !empty($lob)) {

    $view = "SELECT ticket_timestamp FROM ticket WHERE ticket_flex='$flex'";
    $view_res = mysqli_query($conn,$view);
    $row = mysqli_fetch_assoc($view_res);


    if ($row['ticket_timestamp'] !="") {            
        $update_ticket = "UPDATE ticket SET ticket_status='$status',ticket_lob='$lob',ticket_comment='$comment', ticket_workflow='$number' WHERE ticket_employee_id='$id' AND ticket_flex='$flex'";
        $result_ticket = mysqli_query($conn,$update_ticket);

    }else{
        $update_ticket = "UPDATE ticket SET ticket_status='$status',ticket_lob='$lob',ticket_comment='$comment', ticket_workflow='$number',ticket_date_save='$date' ,ticket_timestamp='$time' WHERE ticket_employee_id='$id' AND ticket_flex='$flex'";
        $result_ticket = mysqli_query($conn,$update_ticket);
    }

}

Here is my code for HTML:

<form method="POST" action="#" class="distro">
                    <tr>
                      <td hidden>
                        <input type="checkbox" name="checkbox[]" id="checkbox[]">
                      </td>
                      <td><a href="<?php echo $row['ticket_sop']; ?>" target="_blank">Confluence</a></td>
                      <td>
                        <div class="form-group color color-ticket">
                          <input type="text" value="<?php echo $row['ticket_flex']; ?>" class="form-control form-control-sm <?php


                          if($row['ticket_status']=='Completed'){
                            echo "bg bg-success";
                            }elseif($row['ticket_status']=='Unprocessed'){
                              echo "bg bg-warning";
                            }


                           ?>" name="flex" id="new" readonly="yes">
                        </div>
                      </td>

                      <td>
                          <select class="form-control form-control-sm select2" name="status" style="width:100%" required>
                            <option selected> <?php echo $row['ticket_status']; ?></option>
                            <option>Completed</option>
                            <option>Completed - Reassign</option>
                            <option>Completed By the Others</option>
                            <option>Untouched</option>
                            <option>Unprocessed</option>
                          </select>
                      </td>
                      <td>
                          <select class="form-control form-control-sm select2"  name="lob" style="width:100%" required>
                            <option selected> <?php echo $row['ticket_lob']; ?></option>
                            <?php 
                            // Workflow
                            $wf = "SELECT * FROM workflow ORDER BY wf_name ASC";
                            $wf_res = mysqli_query($conn,$wf);
                            if (mysqli_num_rows($wf_res)) {
                              while ($wf_lob=mysqli_fetch_assoc($wf_res)) { ?>
                            
                                   <option><?php echo $wf_lob['wf_name']; ?></option>


                            <?php     
                              }
                            }

                            ?>
                          </select>
                      </td>
                      <td>
                        <input type="text" class="form-control form-control-sm" value="<?php echo $row['ticket_comment']; ?>" name="comment"  placeholder="Leave blank if Completed">
                      </td>
                      <td>
                        <input type="number" class="form-control form-control-sm" value="<?php echo $row['ticket_workflow']; ?>" name="workflow">
                      </td>
                      <td>
                        <button type="submit" class="btn btn-success btn-sm swalDefaultSuccess">
                            <i class="fas fa-save"></i> Save
                          </button>
                      </td>
                    </tr>
                  </form>

**Warning!** You're open to [SQL injection attacks](https://owasp.org/www-community/attacks/SQL_Injection)! Read [how to prevent SQL injection in PHP](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) by using prepared statements with bound parameters instead of injecting variables directly into your queries. It's not just about security. If your data contains, for example, a single quote `'`, your query will break. — M. Eriksson, Jul 18 '22 at 12:27
It looks like you're already adding a class to an element after the AJAX response. Is that failing? When you debug, in what specific way is your code not working as expected? — David, Jul 18 '22 at 12:27
If you want to change color to red when is not processed yet, you should add JS event change on inputs and add appropriate class. To change it into green you should just update your JS ajax onsuccess function and add change color. — oLDo, Jul 18 '22 at 12:29
i want to change the color on a specific row,like if i save with flex-ID of 1556945 and change the status in Completed the Flex-ID column of 1556945 it will change in color green. But in my case the first row the one make changes. @David — Jerramy Jerramy, Jul 18 '22 at 12:31
$('.distro').on('submit', function (e) { e.preventDefault(); let t = $(this).closest('tr'); $.ajax({ type: 'post', url: 'process/beta.php', data: $(this).serialize(), success: function (result) { Toast.fire({ icon: 'success', title: ' Ticket Save!EACH ' }) t.add("bg-danger"); } }); }); — oLDo, Jul 18 '22 at 12:37
Sorry it's hard to put code inside of comment. I believe you have each row form. On submit get closest tr (parent) and then work with that parent for every modification. — oLDo, Jul 18 '22 at 12:39
Use if statement in your `success: function` like `if(result == your-succes-response){ $("#id").css("background-color", "green"); } else { $("#id").css("background-color", "red");` } — DLK, Jul 18 '22 at 13:04

score -1 · Answer 1 · answered Jul 18 '22 at 12:44

-1

So you want to simply add a class name to a row in the code/ table?

Why not use addClass()? Surely that would achieve what you are after?

answered Jul 18 '22 at 12:44

JamesS

2,167
1
11
29

add class name on a specific fow. – Jerramy Jerramy Jul 18 '22 at 12:47

Javascript/Ajax Change Class element with PHP

1 Answers1