我想创建一个实时工作列表。因此,当添加新列表时,它会实时增加,或者当作业完成时,用户可以实时检查列表。这样连接到我网站的其他用户无需刷新页面即可实时了解。
到目前为止,添加作业列表工作正常,但在进行检查时不起作用。如果该函数在 1 秒内完成,则会检查该函数。当它被选中时,作业列表的状态将使用 php 代码更新为 1。 但问题是该复选框不起作用。
这是我的 html 代码:
<div class="container-todolist">
<ul class="todo-list">
<?php foreach ($tampiltodolist as $list): ?>
<li class="<?php if ($list['status']==='1') {
echo " checked";
}else {
echo " notchecked";
} ?>">
<!-- drag handle -->
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<!-- checkbox -->
<input type="checkbox" id="checkbox" <?php if ($list['status']==='1') {
echo "checked";
} ?> name="status" value="<?php echo $list['nolist']; ?>">
<!-- todo text -->
<span class="text"><?php echo $list['isi']; ?></span>
<!-- Emphasis label -->
<small class="label label-danger"><i class="fa fa-clock-o"></i>
<?php $tanggal=$list['tanggal'];
$waktu =$list['waktu'];
echo time_elapsed_string("$tanggal $waktu");
?>
</small>
<!-- General tools such as edit or delete-->
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
这是我的 JavaScript 代码:
<script type="text/javascript">
const urlList="<?php echo site_url('Todolist/NewtodoList') ?>";
$(document).ready(function(){
const url="<?php echo site_url('Todolist/Addtodolist') ?>";
const urlList="<?php echo site_url('Todolist/NewtodoList') ?>";
const urlCheck ="<?php echo site_url('Todolist/checkedlist') ?>";
$('#formtodolist').on('submit',function(e){
e.preventDefault();
if (!$('#isi-text').val()) {
$('#isi-text').addClass('isInValid');
}else {
$.ajax({
type:"POST",
url:url,
data:$(this).serialize(),
success:function(data){
$('#todolist').modal('hide');
$('#isi-text').removeClass('isInValid'),
$('#isi-text').val('');
},
})
}
});
//$('#checkbox').on('click',function(){
$('input:checkbox').on('change',function(){
const checkdata= $(this).val();
if ($(this).prop('checked')) {
$.ajax({
type:"POST",
url:urlCheck,
data:{"checkdata":checkdata},
success(function(data){
$('.container-todolist').load(urlList);
})
});
}
});
});
function updateList(){
$('.container-todolist').load(urlList);
}
setInterval('updateList()',1000);
</script>
最佳答案
这应该适合你
$('input:checkbox').on('change',function(){
const checkdata= $(this).val();
if ($(this).prop('checked')) {
$.ajax({
type:"POST",
url:urlCheck,
data:{"checkdata":checkdata},
success(function(data){
$('.container-todolist').load(urlList);
})
});
}
});
关于javascript - jquery ajax - 使用复选框更新不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50559937/