Мой Ajax-скрипт устанавливает переменную Task_Number, равную номеру задачи строки, по которой я щелкнул, но мой php показывает ее как неопределенный индекс

Question

У меня есть таблица, когда я нажимаю на строку, я хочу, чтобы модал всплывал с данными из базы данных. У меня есть ajax-запрос, который onclick получает значение номера задачи, на который я нажал, и затем отправляет номер задачи в файл php, где я использую его для получения остальных данных в базе данных. Я продолжаю получать ошибку PHP, где моя переменная не определена.

Пробовал, используя var Task_Number = $ (this) .data ('data'); и var Task_Number = $ (this) .data ('data-value');

 <table class="taskTable"  >
 <tbody class="task-tbody">

            <?php while($row1 = mysqli_fetch_array($Table)){ $task123=$row1[2];  ?>
            <tr class = "task-tr" data-value="<?php echo $task123;?>"  onclick="myFunction()">
                <td class="task-td"><input type="checkbox" name="select" value="select"></td>
                <td class="task-td"> <?php if ($row1[0]=='backlog') {$statuscss= 'statusBacklog';} elseif ($row1[0]== 'inprogress') {$statuscss= 'statusInProgress';} else{ $statuscss= 'statusDone';}    echo '<div class="',$statuscss,'">';?><?php echo $row1[0];?></div></td>
                <td class="task-td"> <?php if ($row1[1]=='HIGH') {$statuscss= 'priorityHigh';} elseif ($row1[1]== 'MEDIUM') {$statuscss= 'priorityMedium ';} else{ $statuscss= 'priorityLow';}    echo '<div class="',$statuscss,'">';?>  <?php echo $row1[1];?></div></td>
                <td class="task-td" > <?php echo $task123;?></td>
                <td class="task-description"> <?php echo $row1[3];?></td>
                <td class="task-td"> <?php echo $row1[4];?></td>
                <td class="task-td"> <?php echo $row1[5];?></td>
                <td class="task-td" width="15"> </td>
            </tr>
<?php }?>

    </tbody>
        </table>

        <br><br>

     <div id="viewTask"  class="modal" style="display: none;">

          <div id="editTask">



       </div>
    </div>




        <script>
            //var modal = document.getElementById('viewTask');
    function myFunction() {
        var Task_Number = $(this).data('data');  
          $.ajax({  
                url:'select.php',  
                method:'POST',  
                data:{Task_Number:Task_Number},  
                success:function(data){  
            $('#editTask').html(data);
           document.getElementById('viewTask').style.display='block';}
           });

    }

     function closefunction(){
     document.getElementById('viewTask').style.display='none';
          }


 </script>

Select.php код

<?php 

                     require('server.php');

                     session_start();

                      $task246 ='';
                    $task246 = $_POST['Task_Number'];
                    $modal123 = "select Tasknumber,Priority,Description,Duedate,Title, Status1 from Universe.Task where Tasknumber=$task246;";

                    $modalqry = mysqli_query($link, $modal123);
                    $output= '';

                    while ($row = mysqli_fetch_array($modalqry))
                        {
                            $Tasknumber_modal=$row[0];
                            $Priority_modal=$row[1];
                            $Description_modal=$row[2];
                            $Duedate_modal=$row[3];
                            $Title_modal=$row[4];   
                            $status_modal=$row[5];

                        }                                       
                        $output .='<table class="taskTableOpen">
            <tbody class="task-tbodyOpen">

            <tr class="task-tr">
            <td class="task-td"  id="backlog">';

            if ($status_modal=='backlog') {$statuscss= 'statusBacklog';} elseif ($status_modal== 'inprogress') {$statuscss= 'statusInProgress';} else{ $statuscss= 'statusDone';}
            $output.= '<div class="'.$statuscss.'">'.$status_modal.'</div></td><td class="task-td">';
            if ($Priority_modal=='HIGH') {$statuscss= 'priorityHigh';} elseif ($Priority_modal== 'MEDIUM') {$statuscss= 'priorityMedium ';} else{ $statuscss= 'priorityLow';}   
            $output.='<div class="'.$statuscss.'">'.$Priority_modal.'</div></td>
            <td class="task-td"></td>
            <td class="task-td">'.$Duedate_modal.'</td>
            <td class="task-td"><i class="fas fa-user-circle"></i></td>
          </tr>
            </tbody>
            </table>
            <h1 id="title" value="swag">'.$Title_modal.'</h1>

            <p id="content" class="taskDescOpen">'.$Description_modal.'</p> 
            <button type="button" id="editBtn" class="taskEdit">Edit <i class="far fa-edit"></i></button>
        <p></p>

          <div class="containerComment">
             <textarea placeholder="Comment..." class="taskComment"/></textarea>
          </div>

          <div class="clearfix">
            <button type="reset" id="closebtn1" onclick="closeFunction()"class="closebtn">Close</button>
          </div>';

                        echo $output;

                        mysqli_close($link);



                        ?>

Answer 1

Когда вы устанавливаете функцию onclick в качестве атрибута элемента, this НЕ будет щелкаемым элементом

function myfunction() {
    console.log(Object.prototype.toString.call(this));
}

<div onclick="myfunction()">CLICK ME</div>

это объект окна

Вы можете сделать это вместо

function myfunction(el) {
    console.log(Object.prototype.toString.call(el));
}

<div onclick="myfunction(this)">CLICK ME</div>

Теперь аргумент el - это элемент, по которому щелкнули

Альтернативно (и так, как я бы это сделал), если вы добавите щелчокслушатель, использующий JavaScript, например,

$('.x').click(function(e) {
  console.log(Object.prototype.toString.call(this));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="x">CLICK ME</div>

Тогда this будет элементом, по которому щелкнули

В вашем коде удалите onclick="myFunction()" и добавьте строку кода для добавленияпрослушиватель событий для click ... т.е. $('.task-tr').click(myFunction);

Таким образом, ваш код в конечном итоге будет

<table class="taskTable"  >
    <tbody class="task-tbody">
        <?php while($row1 = mysqli_fetch_array($Table)){ $task123=$row1[2];?>
        <!-- removed onclick= -->
        <tr class = "task-tr" data-value="<?php echo $task123;?>">
            <td class="task-td"><input type="checkbox" name="select" value="select"></td>
            <td class="task-td"> <?php if ($row1[0]=='backlog') {$statuscss= 'statusBacklog';} elseif ($row1[0]== 'inprogress') {$statuscss= 'statusInProgress';} else{ $statuscss= 'statusDone';}    echo '<div class="',$statuscss,'">';?><?php echo $row1[0];?></div></td>
            <td class="task-td"> <?php if ($row1[1]=='HIGH') {$statuscss= 'priorityHigh';} elseif ($row1[1]== 'MEDIUM') {$statuscss= 'priorityMedium ';} else{ $statuscss= 'priorityLow';}    echo '<div class="',$statuscss,'">';?>  <?php echo $row1[1];?></div></td>
            <td class="task-td" > <?php echo $task123;?></td>
            <td class="task-description"> <?php echo $row1[3];?></td>
            <td class="task-td"> <?php echo $row1[4];?></td>
            <td class="task-td"> <?php echo $row1[5];?></td>
            <td class="task-td" width="15"> </td>
        </tr>
        <?php }?>
    </tbody>
</table>
<br><br>
 <div id="viewTask"  class="modal" style="display: none;">
    <div id="editTask">
    </div>
</div>
<script>
    //var modal = document.getElementById('viewTask');
    function myFunction(e) {
        var Task_Number = this.dataset.value;
        $.ajax({  
            url:'select.php',  
            method:'POST',  
            data:{Task_Number:Task_Number},  
            success:function(data){  
                $('#editTask').html(data);
                document.getElementById('viewTask').style.display='block';
            }
        });
    }
    // set up click handler here
    $('.task-tr').click(myFunction);
    function closefunction(){
        document.getElementById('viewTask').style.display='none';
    }
</script>