0

I'm making this Flag/Unflag system, and it works okay. The only thing I'm struggeling with is how to update the Flag_icon, after it's been clicked? It's should be so it just changes after it's been clicked, and if it's clicked again then it changes back. Right now I have to click the flag, and then reload the page manually, and then it's changed. $FlagStatus[$count] has the value YES/NO, from my database, and $testjobids[$count] is a unique ID from db table. I've been looking at some Ajax and Javascript to do this, but i can't seem to wrap my head around how to implement it right. I just need to be pointed into the right direction, because I'm a bit stuck.

Index.php

        if ($FlagStatus[$count] == ('YES')) {
            echo'<img class="Unflagging" onclick="changeImage('.$testjobids[$count].')" id="'.$testjobids[$count].'" data-id = "'.$testjobids[$count].'" src = "../Test/Images/Flag/FlagMarked.png">';
        } elseif($FlagStatus[$count] == ('NO')){
            echo'<img class="Flagging" onclick="changeImage()" id="'.$testjobids[$count].'" data-id2 = "'.$testjobids[$count].'" src = "../Test/Images/Flag/FlagUnmarked.png">';
        }

Flagging.php / Almost same as Unflagging.php

<?php
require("../resources/MysqliHandler.class.php");
require("../resources/layoutfunctions.php");
require("GetData.php");
$ICON_DIMENSION = "16px";
// Used to connect the right server Testreportingdebug or Testreporting
$db = ServerConn();
// -------------------------------------
$MysqliHandler = new mysqliHandler($db);
$MysqliHandler->query("SET NAMES UTF8");
$receiver = $_POST["FlagID"];
$MarkYes = "UPDATE `testreportingdebug`.`testjob` SET `FlagStatus` = 'YES' WHERE id = $receiver";
$query = $MysqliHandler->query($MarkYes);
?>

Ajax

  echo'
    <script type="text/javascript">
        $(document).on("click", ".Unflagging", function(){          
              var FlagID = $(this).data("id");
                  $.ajax({
                    method: "post",
                    url: "unflagging.php",
                    data: { FlagID: FlagID},
                    success: function(data) {
                      changeImage();
                  }
             });
        });
        $(document).on("click", ".Flagging", function(){           
              var FlagID = $(this).data("id2");
                  $.ajax({
                    method: "post",
                    url: "flagging.php",
                    data: { FlagID: FlagID},
                    success: function(data) {
                      changeImage();
                  }
             });
        });
    </script>
    ';

0 Answers0