javascript - 如何使用 HTML 复选框修改 Code Igniter 中的数据库？
问题描述
我正在尝试使用代码点火器来创建一个界面，用户可以在其中检查图像旁边的复选框，从而更改我们数据库中的值。
挑战在于，当用户选中复选框时，数据库中的值不会更改。
如果我手动更改数据库中的值，则会在界面上更改复选框值。但如果用户选中复选框，则数据库不会更改。多么令人费解！
代码和界面截图如下。函数 veto() 和 unveto() 似乎没有被调用。我已经发出警报了，它们还没有被触发。
任何帮助或建议都会很有帮助，因为我不确定如何有效地解决这个问题。
请参阅 javascript，然后是相关的 CI 控制器并查看下面的片段
document.addEventListener('DOMContentLoaded',function(){
// ********** PREVIEW *********************
});
//perform an ajax call to update the server DB
function veto(previewId)
{
if(previewId === "") return;
var baseURL = window.location.origin + "/myboxes";
var controllerPath=baseURL + "/bobcatuser/previewFeedback";
//console.log(controllerPath);
// Update the server via ajax
jQuery.ajax({
type: 'POST',
url:controllerPath,
data: {
previewId: previewId
},
dataType:'json',
success: function(response){
var previewVeto = document.getElementById("previewVeto");
previewVeto.value = response.data[1];
},
error: function(){
console.log("Error: could not record preview due to server response.");
}
});
return false;
}
function previews()
{
$msg='';
$this->session->set_userdata('msg',$msg);
if($this->session->userdata('logged_in_user'))
{
$data['previews']=$this->package->getPreviews();
$data['previewActive']=$this->package->getPreviewActive();
$previewDeadline= date('M j, Y',strtotime($this->package->getPreviewDeadline()));
$data['instructions'] = str_replace('DEADLINE',$previewDeadline,$this->util->getMessage('previewInstructions'));
$data['inactiveMessage'] = str_replace('DEADLINE',$previewDeadline,$this->util->getMessage('inactivePreview'));
$data['vetoPrompt'] = $this->util->getMessage('previewVetoPrompt');
//print_r($data);
$this->load->view('header_view');
$menu_data['active']=$this->user->getActive(15);
$this->load->view('menu_view',$menu_data);
$this->load->view('user_previews',$data);
$this->load->view('footer_view');
}
else
{
redirect('login', 'refresh');
}
}//end previews
<section class="page-entry">
<div class="container padding-32">
<div class="row">
<div class="col-12 col-lg-6">
<h2 class="page-title">Order Preview</h2>
<div class="hr show-tablet"></div>
</div><!-- closing title column div -->
</div><!-- close row -->
</div><!-- close container -->
</section>
<section class="content">
<div class="container">
<div class="spacer-h-30"></div>
<div class="row">
<?php foreach($previews as $thisPreview){ print_r($thisPreview->preview_id); ?>
<form class="form-custom">
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<?php if($thisPreview->veto) { ?>
<input type="checkbox" id="veto" value="1" onclick="veto()" checked>
<?php }else{ ?>
<input type="checkbox" id="unveto" value="0" onclick="unveto()" >
<?php } ?>
<!--span class="myicon myicon-save"></span-->
</div><!-- item__header -->
<div class="item__image">
<img src=<?php echo $thisPreview->image_link ?> alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"><?php echo $thisPreview->title ?> </h3>
<p class="item__person"><?php echo $thisPreview->customer_name ?></p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
</form>
<?php } ?>
</div><!-- row -->
</div><!-- container -->
</section>
</main>
</body>
解决方案
从复选框更新服务器的方法是 ajax 调用。您的原始代码缺少提交按钮和复选框中的日期。
added 'vetodata' to ajax call in function veto()
added document.form[0].submit(); to function veto()
见修订和工作！javascript 和“查看”代码——控制器没有变化
function veto(previewId)
{
if(previewId === "") return;
var baseURL = window.location.origin + "/myboxes";
var controllerPath=baseURL + "/bobcatuser/previewFeedback";
console.log(controllerPath);
// Update the server via ajax
jQuery.ajax({
type: 'POST',
url:controllerPath,
data: {
previewId: previewId,
vetodata: "1"
},
dataType:'json',
success: function(response){
var previewVeto = document.getElementByName("previewVeto");
previewVeto.value = response.data[1];
document.form[0].submit();
},
error: function(){
console.log("Error: could not record preview due to server response.");
}
});
return false;
}
<section class="page-entry">
<div class="container padding-32">
<div class="row">
<div class="col-12 col-lg-6">
<a href="#" class="back-link">
<i class="back-link__icon">
<svg class="svg-icon-back"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-back"></use></svg>
</i>
<span>To Incoming Orders</span>
</a>
<h2 class="page-title">Order Preview</h2>
<div class="hr show-tablet"></div>
<div class="col-12 col-lg-6">
<h2 class="block-title">Instructions</h2>
<p class="regular-text"><?php if($active === TRUE) {echo $instructions;} else {echo $inactiveMessage;} ?></p>
</div><!-- close instruction col div -->
</div><!-- close row -->
</div><!-- close container -->
</section>
<section class="content">
<div class="container">
<div class="spacer-h-30"></div>
<div class="row">
<?php foreach($previews as $thisPreview){
$preview_id = $thisPreview->preview_id;
$preview_name = "preview_".$preview_id ?>
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<input class="largerCheckbox" <?php echo $thisPreview->veto ? "checked" : ""; ?> type="checkbox" id="previewVeto"
<?php if(!$active) echo "disabled"; ?>
onclick="veto('<?php echo $active ? $thisPreview->preview_id : ""; ?>')">
</div><!-- item__header -->
<div class="item__image">
<img src=<?php echo $thisPreview->image_link ?> alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"><?php echo $thisPreview->title ?> </h3>
<p class="item__person"><?php echo $thisPreview->customer_name ?></p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
<?php } ?>
</div><!-- row -->