javascript - 我的 Ajax 脚本设置了一个变量 Task_Number 等于我单击的行的任务编号,但我的 php 将其显示为未定义的索引
问题描述
我有一个表格,当我单击一行时,我想要一个模式弹出数据库中的数据。我有一个 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);
?>
解决方案
当您将 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>
推荐阅读
- scala - SBT 1.3.1 中的 OutOfMemoryError 元空间
- javascript - 如何在随机播放数组之前分配重要属性
- developer-console - 此版本不添加或删除任何应用程序包
- typescript - 在地图中使用映射类型的问题
- php - 检索所有订阅的条带为空
- r - 嵌套分类变量作为美学
- reactjs - 使用 Async Thunks 时,React/ReduxToolkit 测试失败并出现“TypeError: Cannot read property 'pending' of undefined”
- reactjs - 如何使用 Jest 检查是否包含 window.location.href(React 组件)的条件
- android - Android自定义通知声音在某些设备上不起作用
- json - 带有 --data-raw JSON 的 CURL 命令,意外字符错误