We Keep Coding

Codeigniter javascript function keeps failing

So i'm coding a donation store inside of codeigniter. I've been working to add the cart function to it, and have made a small card that holds the items for the store, with the ability to add to cart, and a ajax request to post and reload. The thing is, in the first category, it will work fine, success and succesfully adds to cart and reloads. but if i go into the other categories and click on an item, it always returns failure.
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<?php foreach ($category as $cat) { ?>
<li class="nav-item">
<a class="nav-link" href="#<?= $cat['categ_name']; ?>" data-toggle="tab"><?= $cat['categ_name']; ?></a></li>
<? } ?>
</ul>
</div><!-- /.card-header -->
<div class="card-body">
<div class="tab-content">
<?php foreach ($category as $pane) { ?>
<div class="tab-pane" id="<?= $pane['categ_name']; ?>">
<div class="row">
<?php foreach ($item as $ditems) { ?>
<?php if ($ditems['categ_name'] == $pane['categ_name']) { ?>
<div class="col-lg-3 col-6">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="<?= base_url() ?>assets/itemdb/<?= $ditems['image']; ?>" alt="Image" style="width:200px;height:160px;">
<h3><?= $ditems['item_name']; ?></h3>
</div>
<div class="flip-card-back">
<p><b>Price : $<?= $ditems['price']; ?></b></p>
<p><?php if ($ditems['package'] == 1) { ?>
Package Details
<?php } else { ?>
<p>Quantity : x <?= $ditems['amount']; ?></p>
<?= $ditems['descr']; ?></p>
<?php } ?>
<?php echo form_open(base_url('donation/add_cart_item'), 'class="horizontal-form" '); ?>
<div class="form-group">
<label for="quantity">Quantity:</label>
<input type="number" value="" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
</div>
<input type="number" value="<?= $ditems['catelog_id']; ?>" class="form-control" id="cat_id" name="cat_id" placeholder="<?= $ditems['catelog_id']; ?>" hidden>
<div class="form-group">
<button type="button" id="add_cart" class="btn" onClick="sendToCart();">Add To Cart</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
</div>
<? } ?>
<? } ?>
</div>
</div>
<? } ?>
</div>
<!-- /.tab-content -->
</div><!-- /.card-body -->
</div>
<!-- /.nav-tabs-custom -->
and this is the script im sending it to:
<?php
$url = base_url().'donation/add_cart_item';
?>
<script>
function sendToCart(){
var catId = $("#cat_id").val();
var qty = $("#quantity").val();
$.ajax({
type: "POST",
url: "<?php echo $url ?>",
data: { '<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>', cat_id: catId, quantity: qty, ajax: '1' },
dataType: "json",
cache:false,
success: function() {
location.reload();
alert("success");
},
error:function() {
alert("failure");
}
});
return false; // Stop the browser of loading the page
}
</script>
and the controller :
public function add_cart_item(){
$id = $this->input->post('cat_id');
$qty = $this->input->post('quantity');
$item = $this->cart_model->get_item($id);
$data = array(
'id' => $id,
'qty' => $qty,
'price' => $item['price'],
'name' => $item['item_name']
);
$data = $this->security->xss_clean($data);
$insert = $this->cart->insert($data);
if ($insert) {
if ($this->input->post('ajax') != '1') {
redirect('store'); // If javascript is not enabled, reload the page with new data
} else {
echo 'true'; // If javascript is enabled, return true, so the cart gets updated
}
} else {
$this->session->set_flashdata('warning', 'Could not insert the item to cart. Please try again later or contact an Administrator with this error.');
return false;
}

You can pass this inside your sendToCart function where this refer to button which is clicked . Then , use .closest() & .find() method to get required input values and pass same to your ajax call . Also , i have added class for quantity and cat_id add that in your html as well.
Demo Code :
function sendToCart(el) {
//get closest outer div ( tabp pane ) ->find inputs with class
var catId = $(el).closest(".tab-pane").find(".cat_id").val();
var qty = $(el).closest(".tab-pane").find(".quantity").val();
console.log("ID = " + catId + " Q = " + qty)
//your ajax call..
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#A" data-toggle="tab">A</a></li>
<li class="nav-item">
<a class="nav-link" href="#B" data-toggle="tab">B</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="A">
<div class="row">
<div class="col-lg-3 col-6">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="<?= base_url() ?>assets/itemdb/<?= $ditems['image']; ?>" alt="Image" style="width:200px;height:160px;">
<h3>
Oil
</h3>
</div>
<div class="flip-card-back">
<p><b>Price : $134</b></p>
<p>
<p>Quantity : x 77
</p>
Soemthinhs ....
</p>
<div class="form-group">
<label for="quantity">Quantity:</label>
<!--use class here-->
<input type="number" value="" class="form-control quantity" name="quantity" placeholder="Enter Quantity">
</div>
<!--use class here-->
<input type="number" value="1" class="form-control cat_id" name="cat_id" placeholder="1" hidden>
<div class="form-group">
<!--pass this inside fn which refer to this button-->
<button type="button" id="add_cart" class="btn" onClick="sendToCart(this);">Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="B">
<div class="row">
<div class="col-lg-3 col-6">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="<?= base_url() ?>assets/itemdb/<?= $ditems['image']; ?>" alt="Image" style="width:200px;height:160px;">
<h3>
Vegeatbles
</h3>
</div>
<div class="flip-card-back">
<p><b>Price : $14</b></p>
<p>
<p>Quantity : 7
</p>
Soemthinhs .... Soemthinhs ....
</p>
<div class="form-group">
<label for="quantity">Quantity:</label>
<!--use class here-->
<input type="number" value="" class="form-control quantity" name="quantity" placeholder="Enter Quantity">
</div>
<!--use class here-->
<input type="number" value="2" class="form-control cat_id" name="cat_id" placeholder="2" hidden>
<div class="form-group">
<!--pass this inside fn which refer to this button-->
<button type="button" id="add_cart" class="btn" onClick="sendToCart(this);">Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

how to make the next and previous buttons without refreshing with jquery

Right now I have a problem when the next button is clicked then the website will reload and it really depends on the available network. I tried to make the next and previous buttons when clicked without refreshing the website. but I have a problem, please solve it.
Could anyone please take a look and help me figure out where I'm going wrong ?
this mycode
VIEW`
<form id="form-jawab" action="" method="post">
<section id="latihan">
<div class="container">
<div class="row wrap">
<div class="col-lg-6 col-md-12" id="start">
<div class="card soal">
<div class="card-header">Soal</div>
<div class="card-body">
<div class="wrap-soal">
<p class="nomor" id="nomor">No.<?php echo $this->uri->segment(4); ?></p>
<p class="description-soal" id="pertanyaan"><?php echo $soal->pertanyaan ?></p>
<input type="hidden" name="id_soal" id="id_soal" value="<?php echo $soal->id_soal ?>">
<input type="hidden" name="kode_mulai" value="<?php echo $detail->kode_mulai ?>">
<label for="radio1" id="jawaban_a" class="container">
A. <?php echo $soal->jawaban_a ?>
<input type="radio" name="jawaban" id="radio1" value="A" <?php if ($list_soal[$this->uri->segment(4)]['jawaban'] == 'A') : ?> checked <?php endif ?> />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12">
<div class="card">
<div class="card-header">Navigasi Soal</div>
<div class="card-body">
<div class="row navigasi">
<div class="col-4">
<?php if ($list_soal[$this->uri->segment(4)]['no_soal'] - 1 != 0) : ?>
<button class="indikator" data-id="<?php echo $list_soal[$this->uri->segment(4)]['id_soal'] ?>" data-no="<?php echo $list_soal[$this->uri->segment(4)]['no_soal'] - 1 ?>" style="background: none; border: 0;cursor: pointer;"><i class="fa fa-backward"></i> <br>Prev</button>
<?php endif ?>
</div>
<div class="col-4">
<?php if ($list_soal[$this->uri->segment(4)]['no_soal'] + 1 <= $penyelesaian['total']) : ?>
<button class="indikator" id="next_button" data-id = "<?php echo $list_soal[$this->uri->segment(4)]['id_soal'] ?>" data-no = "<?php echo $list_soal[$this->uri->segment(4)]['no_soal'] + 1 ?>" style="background: none; border: 0;cursor: pointer;"> <i class="fa fa-forward"></i> <br>Next</a>
<?php endif ?>
</div>
</div></div></div></section></form>
Jquery code
<script type='text/javascript'>
$(".indikator").click(function() {
let id = $(this).attr('data-id');
let no = $(this).attr('data-no');
let url = '<?php echo base_url() . 'jawab/soal/' . $detail->kode_mulai . '/' ?>';
$("#form-jawab").attr("action", url + no);
console.log(url + no);
});</script>
if the next or previous button is clicked then the website will reload. how to do it if the next or previous button is clicked without reloading the website and the data appears.
please help me guys

I am implementing image-preview functionality but during that unable to reset relevant file input

I am implementing image-preview functionality (for multiple hidden-browse buttons with dynamic ids) but during that unable to reset relevant file input
Everything working fine..
HTML Part:
<div class="col-sm-12">
<?php
$prd_imgs_sql = "SELECT * FROM `ci_product_images` WHERE `added_by` = '".$this->session->userdata('user_id')."' AND `is_prod_submited` = '0'";
$prd_imgs_res = $this->home->customQuery($prd_imgs_sql);
$chk_img = 1;
foreach($prd_imgs_res as $res){
if($res->prod_img != "" ){
$prdImgThumb = BASE_URL.'uploads/productImages/150x150/'.$res->prod_img_thumb;
}else{
$prdImgThumb = BASE_IMAGE.'plbtn.jpg';
}
if($res->prod_img_link != "" ){
$prdImgLinkTxt = $res->prod_img_link;
$prdImgLink = $res->prod_img_link;
}else{
$prdImgLinkTxt = '';
$prdImgLink = BASE_IMAGE.'preview.png';
}
?>
<div class="row">
<div class="col-sm-2">
<img src="<?=$prdImgLink?>" class="img-responsive primg" id="preview_img_<?php echo $chk_img;?>">
</div>
<div class="col-sm-6">
<div class="input-group" style="margin-top: 20px">
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_<?php echo $chk_img;?>" name="url_input[]" value="<?=$prdImgLinkTxt?>" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default findbtn" type="button" id="find_btn_<?php echo $chk_img;?>">Find</button>
</span>
</div><!-- /input-group -->
<div class="err" id="valmsg_<?php echo $chk_img;?>" style="display: none;"></div>
</div>
<div class="col-sm-1">
<h2 style="text-align: center;">Or</h2>
</div>
<div class="col-sm-3">
<div class="form-group">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_<?php echo $chk_img;?>" />
<?php if($res->prod_img != "" ){ ?>
<a class="topright imgDelete" href="<?php echo BASE_URL;?>admin/products/delete_prd_img/<?php echo base64_encode($res->id);?>" id="imgdel_<?php echo $chk_img;?>">X</a>
<?php } ?>
<input type="file" name="prod_images[]" id="ip_<?php echo $chk_img;?>" class="hidBrws" style="display: none;" />
</div>
</div>
</div>
<?php
$chk_img++;
}
?>
<?php
while($chk_img<5){
?>
<div class="row">
<div class="col-sm-2">
<img src="<?php echo BASE_IMAGE."preview.png"; ?>" class="img-responsive primg" id="preview_img_<?php echo $chk_img;?>">
</div>
<div class="col-sm-6">
<div class="input-group" style="margin-top: 20px">
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_<?php echo $chk_img;?>" name="url_input[]" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default findbtn" type="button" id="find_btn_<?php echo $chk_img;?>">Find</button>
</span>
</div><!-- /input-group -->
<div class="err" id="valmsg_<?php echo $chk_img;?>" style="display: none;"></div>
</div>
<div class="col-sm-1">
<h2 style="text-align: center;">Or</h2>
</div>
<div class="col-sm-3">
<div class="form-group">
<img src="<?php echo BASE_IMAGE."plbtn.jpg"; ?>" class="edi_prd_img rk" id="brws_btn_<?php echo $chk_img;?>" />
<input type="file" name="prod_images[]" id="ip_<?php echo $chk_img;?>" class="hidBrws" style="display: none;" />
</div>
</div>
</div>
<?php
$chk_img++;
}
?>
</div>
My jQuery Script:
$(".edi_prd_img").click(function() {
var id = $(this).attr("id");
var tmp = id.split('_');
$("input[id='ip_"+tmp[2]+"']").click();
});
$(".hidBrws").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
var id = $(this).attr("id");
var tmp = id.split('_');
reader.onload = function(e) {
$('#preview_img_'+tmp[1]).attr('src','<?=base_url()?>preview.png');
$('#url_input_'+tmp[1]).val('');
$('#brws_btn_'+tmp[1]).attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
But when I want to reset one of the browse-button (file) on some specific event then I am getting issue.. its not getting reset.
My browse-button (file) reset jquery script:
$('.imgLnk').keyup(function(e){
var id = $(this).attr("id");
var tmp = id.split('_');
$('ip_'+tmp[2]).val(''); //tried with this but not happening
$('#brws_btn_'+tmp[2]).attr('src', '<?=base_url()?>plbtn.jpg');
$('#imgdel_'+tmp[2]).hide();
});
But relevant reset jquery script not working..
not working: $('ip_'+tmp[2]).val('');
please suggest me changes or any idea

There is only one issue with your code. You need to change your line $('ip_'+tmp[2]).val(''); to $('#ip_'+tmp[2]).val('');. As this is your identifier, you have slight issue in syntax.
I just have updated your code to static code and created the fiddle. Try below. For testing purpose, I have enabled the file input.
$(function(){
$('.imgLnk').keyup(function(e){
var id = $(this).attr("id");
var tmp = id.split('_');
$('#ip_'+tmp[2]).val(''); //tried with this but not happening
$('#brws_btn_'+tmp[2]).attr('src', '<?=base_url()?>plbtn.jpg');
$('#imgdel_'+tmp[2]).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_1" />
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_1" name="url_input[]" autocomplete="off">
<input type="file" name="prod_images[]" id="ip_1" class="hidBrws" style="display: block;" />
</div>
<div class="row">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_2" />
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_1" name="url_input[]" autocomplete="off">
<input type="file" name="prod_images[]" id="ip_2" class="hidBrws" style="display: none;" />
</div>

Getting hold of which dynamically generated PHP variable has been clicked and display on the same page

I'm developing a messaging system and I have a list of items that are generated dynamically from a database using PHP.
All of these items have an associated message button and I need to know which one has been clicked and pass through the ID of this item to a message box that appears on the screen upon click of the message button.
I thought about using a form with hidden values to post, but this doesnt work as the page refreshes and I've used javascript to get the message box to popup too. document.getelementbyid also didn't help as the ID's of the items are generated dynamically. I read online I could do this using Ajax but couldn't get it to work with my code either.
Thanks in advance and apologies if this has already been asked but I've been searching for about half an hour and couldn't find any posts asking the same as my scenario.
<?php for ($j = 0; $j < $counter; $j++) { ?>
<div class="col-md-4 col-sm-6 item">
<div class="box">
<a href="itemdetails.php?id=<?php echo $itemIDDB[$j];?>">
<h3 class="name"><?php echo $itemNameDB[$j]?></h3>
<div class="row">
<div class="col-md-12"><img class="img-rounded profileimage" src="<?php echo $imageURLS[$j];?>"></div>
</div>
</a>
<div class="row">
<div class="col-md-6">
<p class="price"><?php echo "£" . $priceDB[$j]; ?></p>
</div>
<div class="col-md-6">
<p class="condition"><?php if ($conditionDB[$j] == 11) { echo "NEW"; } else { echo $conditionDB[$j]; } ?></p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-default btn-xs messagebutton" data-id="<?php echo $usernameDB[$i] ?>" type="button">message</button>
</div>
<div class="col-md-6">
<p class="username"><?php echo $usernameDB[$i] ?></p>
</div>
</div>
<p class="description"><?php echo $descriptionDB[$j]; ?></p>
</div>
</div>
<?php }
^^ Above is the code that generates each item and I need to pass the item ID to display instead of ' message username ' in the code below. All this code is in the same file.
<div id="messagenewuser">
<h3>Message username</h3>
<form method="post" class=".messagepopup">
<div class="form-group">
<textarea class="form-control" form="userreviewform" maxlength="50"></textarea>
</div>
<div class="form-group">
<button class="btn btn-default btn-xs" type="button" id="submitreview">send</button>
</div>
<input class="form-control hidden" type="text" name="tradeID">
</form>
</div>

I want to display data from database.if we newly add a form data ,i want to append the new post on display without refresh using codeigniter

I have a show and hide div. That is an add form. I want to display all data from the table on the bottom of the form. If form is opened or not, the data must be displayed. When we add new post, that must append on the top of displayed data without refresh.
My view
<div class="slidingDiv" style="display:none">
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Add Requirement Item</h3>
</div><!-- /.box-header -->
<!-- form start -->
<?php echo validation_errors(); ?>
<?php
$attributes = array('id' => 'myForm');
echo form_open_multipart(base_url().'moderator/Requirement/add_employee_data',$attributes); ?>
<div class="box-body">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txttitle">Requirement Title (Product/Service) : </label>
</div>
<div class="col-xs-12">
<input type="text" name="txtService" class="form-control" id="txttitle" placeholder="Requirement Title (Product/Service) : " value="" required>
</div>
</div>
</div>
</diV>
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-8">
<label for="txtquantity">Estimated Quantity : </label>
</div>
<div class="col-xs-4">
<label for="txtquantity"></label>
</div>
<div class="col-xs-8">
<input type="text" name="txtQuantity" class="form-control" id="txtquantity" placeholder="Estimated Quantity" value="
" required>
</div>
<div class="col-xs-4">
<select class="form-control" name="txtunit" required="required">
<option value="">----Select------</option>
<?php
foreach ($units as $name) {
echo ' <option value="' . $name->id . '">' . $name->name . '</option>';
}
?>
</select>
</div>
</div>
</div>
</diV>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txtdetails">Requirement Details : </label>
</div>
<div class="col-xs-12">
<textarea class="textarea" name="txtRequirement" placeholder="Requirement Details" id="txtdetails" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
</textarea>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="sbUser">Expiry of Requirement : </label><br>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="thedate" type="text" name="txtBidclosing" class="form-control" required="required"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<input type="button" class="button" value="submit" />
</form>
</div>
</div>
</div>
</div>
<div id="sort">
<br>
</div>
Ajax code
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type:"POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data:$("#myForm").serialize(),
success: function (dataCheck) {
//alert(dataCheck);
$('#sort').append(dataCheck);
//window.location.reload();},
});});});
</script>
Model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
$this->db->where('rqmd_id',$id);
$result = $this->db->get()->result();
return $result;
}

On your model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
// $this->db->where('rqmd_id',$id); // get all data
$this->db->order_by('rqmd_id','DESC');
$result = $this->db->get();
if($result->num_row() > 0)
{
echo json_encode(['status'=>'pass','data'=>$result->result()];
}else{
echo json_encode(['status'=>'fail']);
}
}
On Ajax Success
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type: "POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data: $("#myForm").serialize(),
success: function(dataCheck){
//alert(dataCheck);
var res = JSON.parse(dataCheck);
if(res.status=='pass')
{
var user_data = res.data;
var html = '';
var length = user_data.length;
for(var i = 0; i < length; i++)
{
//your html
html += '<div>' + user_data[i].name + '</div>'; //add your html structure as you want
}
$('#sort').append(html);
},
}
});
});
});
</script>