I am using trying to use code igniter to create an interface where users can check tickboxes next to images, changing a value in our database.
The challenge is that when users check the tickboxes, values are not changed in the database.
If I manually change values in the database, the tickbox values are changed on the interface. But if the user checks the tickbox, the database doesn't change. How puzzling!
The code and interface screenshot are below. The functions veto() and unveto() appear not to be called. I've put an alert in, and they have not been triggered.
Any help or suggestions would be quite helpful, as I'm not sure how to fruitfully approach this problem.
see javascript followed by relevant CI controller and view snippets below
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>
The way to update the server from a checkbox is an ajax call. Your original code was missing a submit button and the date from the checkbox.
added 'vetodata' to ajax call in function veto()
added document.form[0].submit(); to function veto()
See revised and working! javascript and 'view' code -- there were no changes to the controller
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 -->