We Keep Coding

JS apply only for first element

I need some help to apply js code for all elements, but for now works only for first on each page.
On page are items with buy buttons, that is created by script, so all buttons have same id but is more than one of them - and I can't apply script that disable button if some condition, only work for first button.
<?php $elem = getElement('button_basket'); ?>
<button disabled = "true" onclick = "checkInput(event)" id="b1" class="btn btn-warning btn-lg btn-block tobasket <?php echo $elem['content_tr'] ?>" product_id="<?php echo $v['id']; ?>" name="<?php echo $prdata['full_name'] ?>" nametr="<?php echo $prdata['name1_tr'] ?>" url="<?php echo $cur_url; ?>catalog/<?php echo $v['img_url']; ?>" price="<?php echo $v['price']; ?>" <?php if($v['sold']==1) echo 'sold="true"'; ?>><?php echo $elem['content'] ?></button>
<?php $elem = getElement('button_oneclick'); ?>
<p class="prod-oneclick <?php echo $elem['content_tr'] ?>" <?php if($v['sold']==1) echo 'sold="true"'; ?>><?php echo $elem['content'] ?></p>
<script type="text/javascript">
function checkInput(event){
<?php
$cookie_basket = $_COOKIE['basket'];
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
//echo $countChars;
?>
let test = '<?php echo $countChars;?>';
let btncheck = document.querySelectorAll('[disabled]');
// var step;
// for (step = 0; step < 5; step++) {
if (test > 80){
document.getElementById("b1").disabled = true;
}else{
document.getElementById("b1").disabled = false;
}
}
// window.onload = checkInput(event);
// }
</script>
if will need can provide full page script.

You should use data attributes and delegation
Also your script can be vastly simplified
let test = '<?php echo $countChars;?>';
window.addEventListener("load", function() {
[...document.querySelectorAll('[disabled]')].forEach(btn => btn.disabled = test > 80)
});
<?php
$cookie_basket = $_COOKIE['basket'];
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
?>
<button disabled class="btn btn-warning btn-lg btn-block tobasket <?php echo $elem['content_tr'] ?>" data-product_id="<?php echo $v['id']; ?>" name="<?php echo $prdata['full_name'] ?>" data-nametr="<?php echo $prdata['name1_tr'] ?>" data-url="<?php echo $cur_url; ?>catalog/<?php echo $v['img_url']; ?>"
data-price="<?php echo $v['price']; ?>" <?php if($v[ 'sold']==1) echo 'data-sold="true"'; ?>><?php echo $elem['content'] ?></button>
<p class="prod-oneclick <?php echo $elem['content_tr'] ?>" <?php if($v[ 'sold']==1) echo 'data-sold="true"'; ?>>
<?php echo $elem['content'] ?>
</p>

Final code, fully working for me was:
<script>
function beCheerful() {
<?php
$cookie_basket = $_COOKIE['basket'];
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
?>
let test = '<?php echo $countChars;?>';
window.addEventListener("DOMContentLoaded", function() {
[...document.querySelectorAll('[disabled]')].forEach(btn => btn.disabled = test > 80)
});
}
for (var i = 0; i < 1; i++) {
beCheerful();
}
window.onload = beCheerful;
</script>

codeigniter 3rd combo box does not display data

This is my Model
function getMatkul($dosen) {
$data = array();
$query = $this->db->get_where('input_jadwal', array('dosen' => $dosen));
if ($query->num_rows() > 0) {
foreach ($query->result_array() as $row){
$data[] = $row;
}
}
$query->free_result();
return $data;
}
function getKelas($matkul) {
$data = array();
$query = $this->db->get_where('input_jadwal', array('kode_matkul'=>$matkul));
if ($query->num_rows() > 0) {
foreach ($query->result_array() as $row){
$data[] = $row;
}
}
$query->free_result();
return $data;
}
This is my View
<select name="dosen" id="dosen" class="form-control" required="">
<option disabled="" selected="">Dosen</option>
<?php foreach($dosen as $d){ ?>
<option value="<?php echo $d['dosen']; ?>"><?php echo $d['dosen']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-12 form-group">
<select name="matkul" id="matkul" class="form-control" required="">
<option disabled="" selected="">Mata Kuliah</option>
<?php foreach($matkul as $m) {?>
<option value="<?php echo $m['kode_matkul']; ?>"><?php echo $m['matkul']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-12 form-group">
<select name="kelas" id="kelas" class="form-control" required="">
<option disabled="" selected="">Kelas</option>
<?php foreach($kelas as $k) {?>
<option value="<?php echo $k['kelas']; ?>"><?php echo $k['kelas']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-12 form-group">
<button name="mysubmit" class="btn btn-primary pull-left btn-flat" type="submit">Show Record</button>
</div>
</div>
</div>
</form>
</div>
</section>
<script type="text/javascript">
<?php
$this->load->model('combobox_model');
foreach($dosen as $dm) { ?>
var <?php echo str_replace(' ','',$dm['dosen'].$dm['dosen']); ?> = [
<?php $resultM = $this->combobox_model->getMatkul($dm['dosen']); ?>
<?php foreach ($resultM as $rm) { ?>
{display: "<?php echo $rm['matkul']; ?>", value: "<?php echo $rm['kode_matkul']; ?>" },
<?php } ?>];
<?php } ?>
$("#dosen").change(function() {
var parent = $(this).val();
switch(parent){
<?php foreach($dosen as $dd){ ?>
case '<?php echo $dd['dosen']; ?>':
lista(<?php echo str_replace(' ','',$dd['dosen'].$dd['dosen']); ?>);
break;
<?php } ?>
default: //default child option is blank
$("#matkul").html('');
break;
}
});
function lista(array_list)
{
$("#matkul").html(""); //reset child options
$(array_list).each(function (i) { //populate child options
$("#matkul").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
}
</script>
<script type="text/javascript">
<?php
$this->load->model('combobox_model');
foreach($matkul as $mk) { ?>
var <?php echo str_replace(' ','',$mk['matkul'].$mk['kode_matkul']); ?> = [
<?php $resultK = $this->combobox_model->getKelas($mk['kode_matkul']); ?>
<?php foreach ($resultK as $rk) { ?>
{display: "<?php echo $rk['kelas']; ?>", value: "<?php echo $rk['kelas']; ?>" },
<?php } ?>];
<?php } ?>
$("#matkul").change(function() {
var parent = $(this).val();
switch(parent){
<?php foreach($matkul as $tt){ ?>
case '<?php echo $tt['kode_matkul']; ?>':
listb(<?php echo str_replace(' ','',$tt['matkul'].$tt['kode_matkul']); ?>);
break;
<?php } ?>
default: //default child option is blank
$("#kelas").html('');
break;
}
});
function listb(array_list)
{
$("#kelas").html(""); //reset child options
$(array_list).each(function (i) { //populate child options
$("#kelas").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
}
</script>
Combobox 1 linked to combobox 2, combobox 2 linked to combobox 3. when When I run it, only combo box 1 and 2 which have the data. I think the problem is on javascript. Need help, thank you. This is the pic of my combobox

Giving unique ID's in a loop doesnt work

I'm trying to give each ID in the loop a unique ID.
Like: check-1, check-2 etcera.
But it is not working .
Here is my code:
<?php
if( have_rows('activiteiten_knoppen') ): $count=0;?>
<?php while(have_rows('activiteiten_knoppen') ): the_row();
$meer_info = get_sub_field('meer_info');
$tijd = get_sub_field('reserveren');
?>
<p class="activiteitInfo"><a class="fancybox-inline" style="color: #f3f3f3 !important;">Meer info</a></p>
<p class="activiteitReserveer"><a style="color: #f3f3f3 !important;" href="<?php echo $tijd; ?>">Reserveren</a></p>
<div id="check-<?php echo $count ?>" style="display: none;"><?php echo $meer_info; ?></div>
<script>
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>

CloudZoom magento integration

Hi guys really need some help on this issue. I've searched all over but cant find any solution.
Using http://www.starplugins.com/cloudzoom/quickstart to add hover zoom feature on single product page. Rollover on first product thumbnail shows the same image. However on second or subsequent rollover of other images the rollover image is always the 1st image.
Media.phtml
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$_nativeZoom = false;
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<?php /* <h2><?php echo $this->__('More Views') ?></h2> */ ?>
<?php
$galleryImages = $this->getGalleryImages();
$numGalleryImages = count($galleryImages);
$i = 0;
foreach ($galleryImages as $_image): $i++; ?>
<div class="<?php
if($i == 1) {
echo 'first';
}
if($i == $numGalleryImages) {
echo 'last';
}
?>">
<a href="#" data-large-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"
title="<?php echo $_product->getName();?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(124); ?>"
alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div id="main-image">
<?php
$_img = '<img class="cloudzoom" id="main-product-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(450).'" data-cloudzoom="zoomImage: \''.$this->helper('catalog/image')->init($_product, 'image').'\'" alt="'.$this->escapeHtml($_product->getImageLabel()).'" title="'.$this->escapeHtml($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</div>
<script type="text/javascript">
jQuery('.more-views a').click(function(){
jQuery('#main-product-image').attr('src', jQuery(this).attr('data-large-image'));
return false;
});
</script>
jquery initialize script
jQuery(document).ready(function($) {
if (jQuery('.catalog-product-view').length) {
if (window.location.hash == '#_reviews') {
//add scroll to down to product reviews list when pagination is used
jQuery.scrollTo(jQuery('#reviews'), {duration: 1000, interrupt: true});
}
//cloudzoom configuration http://www.starplugins.com/cloudzoom/quickstart
$('#main-product-image').CloudZoom({
tintColor: '#6e4d56',
tintOpacity: 0.43,
zoomSizeMode: 'image',
autoInside: 1000
});
}
});

clearing and changing content of div

I'm trying to replace the content of comments div with the new comments by loading it again and replacing the old comments. When i change the content of the div, it replaces the first comment only and repeat the whole comment:
here is the comments div :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div id="comments_div">
<div style="background:#aaaaaa; margin:5px;">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($post_row['user_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
</div>
<?php } ?>
ajax code :
/////////////////////////comment function
function comment(post_id, poster_id)
{
loadXMLDoc("php/comment.php?post_id="+post_id+" content="+document.getElementById("content").value+"&poster_id="+poster_id,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("comments_div").innerHTML = xmlhttp.responseText;
}
});
}
comment.php :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$_GET[post_id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>

Your first code snippet is creating a separate comments_div for each comment. Then your JavaScript code snippet is just replacing the content of the first one.
You can fix it by putting the comments_div outside the the PHP while loop, and then using the same HTML output code inside that loop as you are in your third example (a div.comment per comment).
So, something like this in place of that first code snippet:
<div id="comments_div">
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>
</div>