i have div with id like this
<div id='alert<?php echo $row['no']?>'>
<b style='font-size:12px; color: red'>*DUPLICATE ID CUSTOMER</b>
</div>
and i need to call that id in javascript,
i try like this but the value not right
$("#alert<?php echo $row['no'] ?>").hide();
how to fix it
thankyou
You need to include jQuery CDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$("#alert<?php echo $row['no'] ?>").hide();
</script>
I'm assuming that you have something like this:
foreach($result as $row){
?>
<div id='alert<?php echo $row['no']?>'>
<b style='font-size:12px; color: red'>*DUPLICATE ID CUSTOMER</b>
</div>
<script>$("#alert<?php echo $row['no'] ?>").hide();</script>
<?php
}
Otherwise if the script-tag is outside the loop then it wount work.
Another solution would be to make a function let say hideAlert(div)
and do something like this:
<?php
foreach($result as $row){
?>
<div onload="hideAlert(this)">
<b style='font-size:12px; color: red'>*DUPLICATE ID CUSTOMER</b>
</div>
<?php
}
?>
<script>
function hideAlert(div){
div.hide();
}
</script>
if you need the id to reference to it later you could just change the code like this:
foreach($result as $row){
?>
<div onload="hideAlert(<?php echo $row['no']; ?>)">
<b style='font-size:12px; color: red'>*DUPLICATE ID CUSTOMER</b>
</div>
<?php
}
?>
<script>
function hideAlert(id){
$(`#alert${id}`).hide();
}
</script>
Keep in mind that I'm not an expert on jQuery soo I'm not really sure if this works but i hope it helps :)
Related
<?php
for($i=0;$i<5;$i++){
?>
<button id="text<?php echo $i; ?>">hello </button>
<script>
var i=<?php echo $i; ?>;
$(document).ready(function(){
$("#text"+i).click(function(){
alert("hello");
})
})
</script>
<?php } ?>
If I have a varying id like this and I want to call it in jQuery using this code its give me no result. Where is the problem? How can I call an element like this button?
Would be better to move the script out of the loop, get the buttons all at once and then bind the click event:
// Create all buttons, with class "text-button"
<?php for($i=0;$i<5;$i++): ?>
<button class="text-button" id="text<?php echo $i; ?>">hello </button>
<?php endif; ?>
<script>
// On document ready
$(document).ready(function() {
// Find all buttons with class "text-button"
$(".text-button").click(function(e) {
alert("hello");
// Log the clicked button
console.log(e.currentTarget);
console.log(e.currentTarget.id);
})
})
</script>
I am satisfied with #Emre's answer. And also remove $(doucment).ready() will solve your problem. Like this.
<?php
for($i=0;$i<5;$i++){
?>
<button id="text<?php echo $i; ?>">hello </button>
<script>
var i=<?php echo $i; ?>;
$("#text"+i).click(function(){
alert("hello");
});
</script>
<?php } ?>
I'm working with a template in Wordpress that someone else set up and I need to fix something.
There is a javascript function that adds a class to every css class that's called object-fit - the added class is called bg--image. This was to fix an error showing up in IE11 , where all the images where messed up.
The problem now is that there's a page where this function shouldn't apply even though the css class is also called object-fit.
I'm a little confused on how to work here. As I don't want to mess up the whole theme and my coding options are quite limited, it just makes a knot in my brain.
Is there any possibility I can add a javascript function to not apply the IE 11 function on this one specific class? the difference is that the one img where it shouldn't apply is a span, the other one is not.
Any ideas?
try {
if (ie_ver() == 11) {
var $img = $('.banner--small').find('img');
$('.banner--small').attr('style', 'background-image:url(' + $img.attr('src') + ')');
$('.banner--small').addClass('bg--image');
$img.addClass('hidden');
var $img2 = $('.object-fit').find('img');
$('.object-fit').attr('style', 'background-image:url(' + $img2.attr('src') + ')');
$('.object-fit').addClass('bg--image');
$img2.addClass('hidden');
$('.slick__inner').each(function() {
var $img3 = $(this).find('img');
$(this).attr('style', 'background-image:url(' + $img3.attr('src') + ')');
$(this).addClass('bg--image');
$img3.attr('style', 'display:none');
});
<div class="article--text">
<div class="container container--tiny spacing--huge">
<?php the_content(); ?>
</div>
<div class="container margin-bottom--huge">
<?php if (get_field('direktionen')) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach (get_field('direktionen') as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo $child['link']; ?>" class="link--direction text--center margin-bottom--medium" target="_blank">
<span class="object-fit"><img src="<?php echo $child['photo']['sizes']['medium']; ?>"
srcset="<?php echo $child['photo']['sizes']['mobile']; ?> 2x,<?php echo $child['photo']['sizes']['medium']; ?> 1x"
alt="<?php echo $child['name']; ?>" /></span>
<h3>
<?php echo $child['name']; ?>
</h3>
<p>
<?php echo $child['adresse']; ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } else if ($children) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach ($children as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo get_permalink($child->ID); ?>" class="link--direction text--center margin-bottom--medium">
<span class="object-fit"><img src="<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?>"
srcset="<?php echo get_the_post_thumbnail_url($child->ID, 'mobile'); ?> 2x,<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?> 1x"
alt="<?php echo $child->post_title; ?>" /></span>
<h3>
<?php echo $child->post_title; ?>
</h3>
<p>
<?php echo get_field('adresse', $child->ID); ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
Since this is a WordPress template, you have a couple of solutions.
Solution 1 - HTML & jQuery modification
If you can add an additional class to only this page's HTML, then applying the following updates to this page template should allow you to avoid having the .bg--image class added to just this page:
HTML
<span class="object-fit avoid-change">
jQuery
$('.object-fit').not( '.avoid-change' ).addClass('bg--image');
More info on jQuery's .not() method:
https://api.jquery.com/not/
Solution 2 - WordPress Conditional
Another option is to use a WordPress conditional to avoid running the entire script on this page.
You could use the following to prevent the script from loading in this template:
<?php if(! is_page_template( 'your-template-name.php' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
You could also target an exact page by its page ID. In this example, your page ID would be 7.
<?php if(! is_page( '7' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
More info on WordPress conditionals:
https://codex.wordpress.org/Conditional_Tags
I want to ask for help because I have a problem creating buttons using a for and put in the onclick the name of a function with a parameter, but this parameter is a string, I get an array and end of the cycle all buttons have the name of the last element of the array rather than each position of the array .. Thanks in advance for your help ..
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function enviar(periodo){
alert(periodo);
}
</script>
</head>
<body>
<?php
$formatos=
array(array('idPeriodo'=>'pp2019'),
array('idPeriodo'=>'pp2018'),
array('idPeriodo'=>'pp2017'),
array('idPeriodo'=>'pp2016'));
for($l=0; $l< count($formatos); $l++){
?>
<button onclick="enviar(<?php echo json_encode($formatos[$l]['idPeriodo'])?>)">Guardar</button>
<?php
}
?>
</body>
</html>
You already have a PHP loop, so the javascript bit is useless.
Try this:
<?php
for($l=0; $l< count($formatos); $l++){
$per = json_encode($formatos[$l]['idPeriodo']);
?>
<button onclick="enviar('<?= $per ?>')">Guardar</button>
<?
}
?>
Is there any reason you want it json_encode? this works. Try this :
EDIT
<?php
$formatos=
array(array('idPeriodo'=>'pp2019'),
array('idPeriodo'=>'pp2018'),
array('idPeriodo'=>'pp2017'),
array('idPeriodo'=>'pp2016'));
for($l=0; $l< count($formatos); $l++){
$periodo = $formatos[$l]['idPeriodo'];
?>
<button onclick="enviar('<?php echo $periodo; ?>')">Guardar</button>
<?php
}
?>
You get the last element of the array because you redefine per variable every time. Use this code:
<?php
$formatos=
array(array('idPeriodo'=>'pp2019'),
array('idPeriodo'=>'pp2018'),
array('idPeriodo'=>'pp2017'),
array('idPeriodo'=>'pp2016'));
for($l=0; $l< count($formatos); $l++){
$param = json_encode($formatos[$l]['idPeriodo']);
$param = addslashes($param);
?>
<button onclick="enviar(<?php echo $param; ?>)">Guardar</button>
<?php
}
?>
Try this script and hope this will work :
<?php
$formatos = array(
array('idPeriodo'=>'pp2019'),
array('idPeriodo'=>'pp2018'),
array('idPeriodo'=>'pp2017'),
array('idPeriodo'=>'pp2016')
);
for($l = 0; $l < count($formatos); $l++) {
?>
<button onclick='enviar(<?php echo json_encode($formatos[$l]['idPeriodo']);?>)'>Guardar</button>
<?php } ?>
How can i get a variable in PHP with the value of a ID on a div.
Example: <div class="style" id="13" name="var">text...</div>
how can i on a PHP or JS, etc..., get the id value for a variable on PHP, to i show.
Example: $id_div = id from div with the name var.
<?php echo $id_div; ?> // 13.
Please help me, i just want to know the value of id propriety and replace on a php variable.
<div name="var" id="<?php echo $get["id"]; ?>">
Here i want to show the id propriety on a php variable
</div>
First the $get["id"]; should be $_GET["id"];, and you could store it in some variable and use it where you want :
<?php $id = $_GET["id"]; ?>
<div name="var" id="<?php echo $id; ?>">
<?php echo $id; ?>
</div>
Hope this helps.
You can do this:
<div name="var" id="<?php echo $get["id"]; ?>">
<?php echo $get["id"]; ?>
</div>
or with javascript:
var divs = document.querySelectorAll('div[name="var"]');
[].forEach.call(divs, function(div){
div.textContent = div.id;
});
I'm trying to make the product filter for a magento shop collapsible. I tried editing the view.phtml in template/category/layer/view.phtml But it's not working.
I Edited these lines: <dt><?php echo $this->__($_filter->getName()) ?></dt>
to <dt><?php echo $this->__($_filter->getName()) ?></dt>
and i added some jquery like this:
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery("dl#narrow-by-list> dd:not(:first)").hide();
jQuery("dl#narrow-by-list> dt a").click(function(){
jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
jQuery(this).parent().next().slideDown("fast");
return false;
});
});
/* ]]> */
</script>
Current code:
?>
<?php if($this->canShowBlock()): ?>
<div class="block block-layered-nav">
<div class="block-title">
<strong><span><?php echo $this->__('Shop By') ?></span></strong>
</div>
<div class="block-content">
<?php echo $this->getStateHtml() ?>
<?php if ($this->getLayer()->getState()->getFilters()): ?>
<div class="actions"><?php echo $this->__('Clear All') ?></div>
<?php endif; ?>
<?php if($this->canShowOptions()): ?>
<p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p>
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php if($_filter->getItemsCount()): ?>
<div class="<?php if(strcasecmp($_filter->getName(), 'PRICE') == 0) echo 'layered-price'; else echo 'layered-attribute'; ?>">
<div class="title-layered"><dt><?php echo $this->__($_filter->getName()) ?></dt></div>
<dd><?php echo $_filter->getHtml() ?></dd>
</div>
<?php endif; ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery("#narrow-by-list> dd:not(:first)").hide();
jQuery("#narrow-by-list> dt a").click(function(){
jQuery("#narrow-by-list> dd:visible").slideUp("fast");
jQuery(this).parent().next().slideDown("fast");
return false;
});
});
/* ]]> */
</script>
Anyone any idea why this is not working?
You made a click event on a link tag
You can trick your javascript with this href attribute:
<dt> <?php echo $this->__($_filter->getName()) ?></dt>
and then your jquery click function will be triggered as usual.