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>
Related
When the page is redirected, the language I chose in the box does not
appear. At first, whatever is available is chosen.
here is what I want to do: change option data
<select id='lang' class='btn btn-xs btn-primary icons-select2'>
<?php
$query_lang=mysqli_query($con, "SELECT * FROM tb_lang");
while($lang = mysqli_fetch_assoc($query_lang)){
if ($lang['durum']==1)}
?>
<option value = "<?php echo $lang['lang_fix']; ?>" data-min="_<?php echo $lang['lang_fix']; ?>"
data-icon="<?php echo $lang['lang_flag']; ?>">
<?php
echo strtoupper($lang['lang_fix']);
?>
</option>
<?php }} ?>
</select>
<script>
$(document).ready(function () {
$('body').on('change','#lang', function() {
var lang_id= $(this).val();
window.location.replace("index.php?lang="+lang_id);
});
});
</script>
First retrieve the lang sent over GET by
$lang_id = $_GET['lang'];
then check it against the data you are looping through
<option value = "<?php echo $lang['lang_fix']; ?>" data-min="_<?php echo $lang['lang_fix']; ?>" data-icon="<?php echo $lang['lang_flag']; ?>" <?php if ($lang_id == $lang['lang_fix']) echo "selected"; ?>>
making your code look like below, so the option you want to be selected will have the necessary selected attribute.
$lang_id = $_GET['lang'];
<select id='lang' class='btn btn-xs btn-primary icons-select2'>
<?php
$query_lang=mysqli_query($con, "SELECT * FROM tb_lang");
while($lang = mysqli_fetch_assoc($query_lang)){
if ($lang['durum']==1)}
?>
<option value = "<?php echo $lang['lang_fix']; ?>" data-min="_<?php echo $lang['lang_fix']; ?>" data-icon="<?php echo $lang['lang_flag']; ?>" <?php if ($lang_id == $lang['lang_fix']) echo "selected"; ?>>
<?php
echo strtoupper($lang['lang_fix']);
?>
</option>
<?php }} ?>
</select>
<script>
$(document).ready(function () {
$('body').on('change','#lang', function() {
var lang_id= $(this).val();
window.location.replace("index.php?lang="+lang_id);
});
});
</script>
i have dynamic number of checkboxes and a button to post the checked elements to another page .. here is the code:
<div class="overSelect"></div>
<div id="checkboxes<?php echo $aa['id']; ?>">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
$cc = 1;
foreach ($arr2 as $aa2) { ?>
<div style="padding-right: 20px" class="row"><label>
<input type="checkbox" value="<?php echo $aa2['name'] ?>" name="checks<?php echo $aa['id'] ?>[]"id="check<?php echo $aa['id']; ?>"><?php echo $aa2['name'] ?>
</label></div>
<?php } ?>
</div>
<a class="btn btn-primary btn-sm" name="update-all"onclick="update_all('prop_id<?php echo $aa['id']; ?><?php $counter; ?>','checks<?php echo $aa['id'] ?>')"id="btn-all<?php echo $aa['id']; ?><?php $counter; ?><?php echo $p['id']; ?>">save</a>
i tried this code but it is not working
<script type="text/javascript">
function update_all(a, b) {
var aa = document.getElementById(a).value;
var values = new Array();
$("input:checkbox[name=b]").each(function () {
if ($(this).is(":checked")){
values.push($(this).val());
}
});
alert(aa);
alert(values.length);
alert(values);
}
</script>
if the checkboxes checked .. it's value will be added to the array and posted to php page
any help please .. thanks in advance
HTML + PHP
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id, $('.copyTarget').attr('id'));">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id, target_id) {
alert(clicked_id);
alert(target_id);
}
</script>
What i want
I want to get the both values for copyTarget and copyButton as per loop cycle. It means
If current value of $i = 3
then I want alert values like,
clicked_id = copyTarget3
target_id = copyButton3
What i am currently getting is,
If current value of
$i = 3
then I want alert values like,
clicked_id = copyTarget0
target_id = copyButton3
Its taking first value of ID(copyTarget) stored initially. I want current loop cycle value.
Any help would do
Thanks
Why use JS in handler?
Try:
onClick="reply_click('copyButton<?php echo $i; ?>', 'copyTarget<?php echo $i; ?>')"
Also you should store id names (copyButton and copyTarget) in php variable, so you can change them in one place.
You could try something like below. However, I would go by Maxx's answer .. It really depends on what you plan to do with the rest of code etc.
<?php
for($i=0;$i<5;$i++){
?>
<div>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this)">Copy</button>
</div>
<?php
}
?>
<script>
function reply_click(btn) {
var clicked_id = $(btn).attr('id');
var target_id=$(btn).parent().find('span').html();
alert(clicked_id);
alert(target_id);
}
</script>
Try This
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id);">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id) {
alert(clicked_id); //clicked id
alert(clicked_id.split('copyButton').join('copyTarget')); // target id
}
</script>
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
});
}
});
So I created javascript slider, which automatically pulls page up, when it goes to next tab. You can test it in your page, and you will see, how to fix that? It pulls page up, like there would be href="#top" and , but there isn't anything like that.
Code -
<script type="text/javascript">
jQuery(document).ready(function() {
var time = <?php echo $data['tab1_speed']; ?>;
var tripleboxTitle = jQuery("triplebox-tab-title");
setInterval(function() {
tripleboxTitle.click(function(){
clearInterval();
});
var currentTab = jQuery('.triplebox-tab-active').attr("tab");
var newTab = Number(currentTab)+1;
if(newTab > 3) {
newTab = 1;
}
console.log(newTab);
jQuery(".triplebox-tab-title").removeClass('triplebox-tab-active');
jQuery('#triplebox-widget-tab'+newTab).addClass('triplebox-tab-active');
jQuery(".triplebox-tab-default").hide();
jQuery(".triplebox-tab-default").removeClass('triplebox-tab-default');
jQuery("#triplebox-widget-tab"+newTab+"-widget").addClass('triplebox-tab-default').fadeIn(300);
}, time);
});
</script>
<a id="triplebox-widget-tab1" tab="1" class="triplebox-tab-title triplebox-tab-active" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab1_name']; ?></a>
<a id="triplebox-widget-tab2" tab="2" class="triplebox-tab-title" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab2_name']; ?></a>
<a id="triplebox-widget-tab3" tab="3" class="triplebox-tab-title" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab3_name']; ?></a>
<div id="triplebox-widget-tab1-widget" class="triplebox-widget triplebox-tab-default" <?php if($data['use_color'] == 'default') { ?>style="background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;"<?php } ?>>
<?php echo $content; ?>
</div>
<div id="triplebox-widget-tab2-widget" class="triplebox-widget" style=" <?php if($data['use_color'] == 'default') { ?>background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;<?php } ?> display: none;">
<?php echo $content2; ?>
</div>
<div id="triplebox-widget-tab3-widget" class="triplebox-widget" style=" <?php if($data['use_color'] == 'default') { ?>background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;<?php } ?> display: none;">
<?php echo $content3; ?>
</div>
Also, why is my clearInterval(); not working? It still continues to scroll. How to make it stop?
You need to pass to function an "intervalID"
https://developer.mozilla.org/en/DOM/window.setInterval#Example
So;
var tripleboxTitle = jQuery("triplebox-tab-title");
var myIntvID = setInterval(function() {
...
tripleboxTitle.click(function(){
clearInterval(myIntvID);
});