I am trying to get the mesg_id when the user clicks on a button it shows a popup and inside it , it will show the mesg_id
but the issue that i am having not that i cant retrieve the mesg_id is that it takes the one on top not the one the user clicks on example :
<div class="msg-action">
<p id="mesg_id"><?php echo $msg_id; ?></p>
<a class="msg-icon popup-button" href="" data-target="#reply-popup"><img src="images/reply.png"></img></a>
<a class="msg-icon" href="<?php echo "index?message=" . $row['id'] . ""; ?>" ><img src="images/linedfav.png" id='img'></img></a>
</div>
This is the script that shows the pop up when the reply is clicked and it takes the mesg_id
/* modle-popup*/
jQuery(document).ready(function(){
jQuery(".popup-button").click(function(){
event.preventDefault();
jQuery("body").addClass("sitemodal-open");
jQuery(".sitemodal").addClass("in");
var textareaValue = $('#mesg_id').html();
document.getElementById("showMesgID").innerHTML = textareaValue;
});
jQuery('.sitemodal .sitemodal-dialog').click(function($){
$.stopPropagation();
});
jQuery(".close-popup ,.sitemodal").click(function(){
jQuery("body").removeClass("sitemodal-open");
jQuery(".sitemodal").removeClass("in");
document.getElementById("showMesgID").innerHTML = "";
});
});
how can i get the mesg_id the one the user clicks on not the one on top
You can only use an ID in an element once per page.
<div id="myid">testing</div>
<div id="myid">testing 2</div>
The first element takes precedent because it was the first element with that ID. You need to assign each element their own unique ID.
You cannot use ID for multiple elements. ID is meant to be unique for every element. You need to use CLASS instead. and then use closest() and find() to get the value from the element in the same modal.
Html:
<div class="msg-action">
<p class="mesg_id"><?php echo $msg_id; ?></p>
<a class="msg-icon popup-button" href="" data-target="#reply-popup"><img src="images/reply.png"></img></a>
<a class="msg-icon" href="<?php echo "index?message=" . $row['id'] . ""; ?>" ><img src="images/linedfav.png" id='img'></img></a>
</div>
Javascript:
jQuery(".popup-button").click(function(){
event.preventDefault();
jQuery("body").addClass("sitemodal-open");
jQuery(".sitemodal").addClass("in");
var textareaValue = $(this).closest('.msg-action').find('.mesg_id').html();
document.getElementById("showMesgID").innerHTML = textareaValue;
});
Related
I'm bringing articles from a database with ORDER BY RAND() with a PHP foreach cycle:
<?php foreach($posts as $post): ?>
<div class="post" id="post">
<article>
<div class="post-head">
<a href="<?php echo ROUTE; ?>/profile.php/<?php echo $post['user_id']; ?>">
<img class="post-pfp" src="<?php echo ROUTE; ?>/users_pics/<?php echo ($post['profile_pic']); ?>">
</a>
<h1>
<a class="links-3" href="<?php echo ROUTE; ?>/profile.php?user=<?php echo $post['user_id']; ?>"><?php echo $post['post_by']; ?></a>
</h1>
<p class="post-date"><?php echo get_date($post['date']); ?></p>
<div class="x_hover" onclick="hide_post()">
<img src="<?php echo ROUTE; ?>/icons/cross.svg">
</div>
<hr id="post-hr">
<br>
<a href="<?php echo ROUTE; ?>/post.php?p=<?php echo $post['ID']; ?>">
<p class="post-content"><?php echo $post['content']; ?></p>
</a>
</div>
</article>
</div>
<?php endforeach; ?>
As you can see, the div with the class x_hover has an onclick attribute:
<div class="x_hover" onclick="hide_post()">
<img src="<?php echo ROUTE; ?>/icons/cross.svg">
</div>
What the hide_post() function does is this:
var post = document.getElementsByClassName("post");
function hide_post(){
if (post[0].style.display = "block") {
post[0].style.display = "none"
}
}
I'm new to JS so I have some issues as well.
We are declaring that var post is equal to all the elements with the class name "post", such as the HTML code I added at the beginning, has the class post:
<div class="post" id="post">
This div has the display: block; attribute. However, when I run all this code, It only turns into display: none the first element that brings us from the database, it doesn't works with the rest of them...
Why is this happening?
IDs must be unique and since you have named all of the post only the first one will ever been "seen". Make the IDs unique, change your hide_post function to accept a ID name to hide, and add the unique ID to your onclick calls.
Change
<div class="post" id="post">
to something like
<div class="post" id="post<?php echo $post['ID']; ?>">
Then change
<div class="x_hover" onclick="hide_post()">
to
<div class="x_hover" onclick="hide_post('post<?php echo $post['ID']; ?>')">
Finally, modify your hide_post function to accept the name of the ID to show or hide.
function hide_post(idToHide){
if (idToHide.style.display = "block") {
idToHide.style.display = "none"
}
}
When you use getElementsByClassName it returns an HTMLCollection. You should iterate elements and hide all of them if it's what you intent to. Right now you are just hiding 0th element of this collection.
var posts = document.getElementsByClassName("post");
for (let post of posts) {
if (post.style.display = "block") {
post.style.display = "none"
}
}
If you intent to hide a single post you give unique ids to divs, and call hide_post with id of that post. Also you should use getElementById for that. Notice that it's not plural. Function should be like this:
function hide_post(postId){
var post = document.getElementById(postId);
if (post.style.display = "block") {
post.style.display = "none"
}
}
A more cleaner way of doing this would be.
function hide_post() {
document.querySelectorAll('.post').forEach(v => {
if(v.style.display == block) v.style.display = none; }); }
I have a web page where I show a series of images brought from a database, these images when passing over shows you a "quick view" message (), clicking on this link shows you on the page a div with the largest image, I need when someone click on this link, in the div show me different images according to what I have clicked, this is my code
PHP/HTML CODE
if ($array->num_rows > 0) {
while($row = $array->fetch_assoc()) {
<div>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />'; ?>
<a href="#" class="js-show-modal1">
Quick View
</a>
</div>
}
}
JS CODE
$('.js-show-modal1').on('click',function(e){
e.preventDefault();
$('.js-modal1').addClass('show-modal1');
});
CSS
.show-modal1 {
visibility: visible;
opacity: 1;
}
HTML
<div class="js-modal1">
<img src="images/someimage.jpg">
</div>
this is what i need , when i click here : Quick View
Here shows this :
<div class="js-modal1">
<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />
</div>
Make a counter outside the loop that we will use for indexing and targeting the correct modal.
I stored the target modal in a data-property of the <a></a> tags in which I used data-target.
if ($array->num_rows > 0) {
// initialize counter
$index = 0;
while($row = $array->fetch_assoc()) {
// use the counter in the loop, modal-".$index."
echo "
<div>
<a href='#' class='js-show-modal' data-target='modal-".$index."'>
Quick View
</a>
<div id='modal-".$index."'>
<img src='data:image/jpeg;base64,".base64_encode($row['picture'])."' />
</div>
</div>";
// increment
$index++;
}
}
Then use this script below. We added an onclick event handler to .js-show-modal which will be all the <a></a> tags. We will then get data-target property as the selector. I used toggle for switching between hide() and show().
$(document).on('click','.js-show-modal',function(e){
e.preventDefault();
var target = '#'+$(this).data('target');
$(target).toggle();
});
how do you pass the value to anchor tag on every click using jquery?
I have this code here.
I am trying to get value every time I click the button
//My HTML
<button id="a-selectNm" data-a_name="<?php echo $row['username']; ?>" data-toggle="modal" data-target="#selectNm">SELECT nursemaid</a>
//The modal
<div class="modal" id="selectNm">
<div class="card-body">
<h4 class="card-title">
<?php echo $row['username']; ?>
</h4>
</div>
</div>
//My jQuery code
jQuery(document).on('click', 'button#a-selectNm', function() {
var a_name = jQuery(this).data('a_name');
jQuery('.modal a[href="#a_name"]').val(a_name);
});
</script>
What is my mistake? what do I have to change?
Replace
jQuery('.modal a[href="#a_name"]').val(a_name);
with
jQuery('.modal a[href="#a_name"]').text(a_name);
I made an read more read less script for my Magento 2 webshop. This is used on a category page where there are serval subcategorie blocks to choose, each subcategory has a description with.
The problem: if I click read more all the descriptions of the subcategories will expand in stead of only the description of the subcategory I clicked read moreI am starting to learn PHP and Magento 2 but I can't fix this, does someone know the solution?
<div class="product description product-item-description">
<div class="more">
<?php if ($_subCategory->getDescription()) {
$string = strip_tags($_subCategory->getDescription());
if (strlen($string) > 250) {
// truncate string
$stringCut = substr($string, 0, 250);
$string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... Lees meer';
}
echo $string;
?>
</div>
<?php
}else {?>
<?php /* #escapeNotVerified */ echo $_attributeValue;
}
?>
</div>
<div class="less" style="display:none">
<?php echo $_subCategory->getDescription(); ?>
Lees minder
</div>
<script type="text/javascript">
console.log('test');
require(["jquery"],function($){
$('.readmore').on("click",function(){
$('.less').show();
$('.more').hide();
});
$('.readless').on("click",function(){
$('.less').hide();
$('.more').show();
});
});
</script>
</div>
This is because, when you type $('.less').hide(); this is grabbing every element with the attribute class='less'. This is the way I would overcome this:
Start by attaching a unique attribute to each <div class="more"> or <div class="less"> - in this case, we use the class attribute: (and move 'more' or 'less' to an id)
<div id="read-more-block" class="cat-<?php echo $_subCategory->getId(); ?>">
<!-- my "read more" content -->
<a class="link" href="#read-more-block">Read Less</a>
</div>
<div id="read-less-block" class="cat-<?php echo $_subCategory->getId(); ?>">
<!-- my "read less" content -->
<a class="link" href="#read-less-block">Read More</a>
</div>
We now have a read-more-block and a read-less-block for each subcategory. When we click the inside link a jQuery event should fire which will hide itself and display the other.
And then, in your jQuery:
$('#read-more-block .link').on('click', function() {
var $readLessBlock = $('#read-less-block.' + $(this).parent().attr('class'));
$readLessBlock.show(); //Show the read less block
$(this).parent().hide(); //Hide the read more block
});
..and vice versa for read less.
I have the following problem:
I have two divs, only one of these is shown and when I click the next or the previous button the other one is shown and the one which was visible is set to hidden. The div which is shown has the "active" class. Now, I need to get the id of the div which has this class. The problem is that I always get the id of the previous one because when I click the button I get first the id and then the class is changed..and I don't know why, also if the code which change the class is written before the code which get the id.
How can I fix this?
<div class="item <?php if($i == 1) echo 'active';?>" id="<?php echo $dati['id'];?>">
<div class="container">
<div class="carousel-content">
<h1><?php echo $dati['titolo'];?></h1>
<p class="lead">
<?php echo $desc_feed;?>
</p>
</div>
</div>
</div>
<a class="prev" href="#main-slider" id="next-carousel" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="next" href="#main-slider" id="prev-carousel" data-slide="next"><i class="icon-angle-right"></i></a>
function show_feed_data(id)
{
get_feed_data(id);
}
$( "#prev-carousel" ).click(function() {
var id_feed_to_show = $(".active").attr("id");
get_feed_data(id_feed_to_show);
});
$( "#next-carousel" ).click(function() {
var id_feed_to_show = $(".active").attr("id");
get_feed_data(id_feed_to_show);
});
</script>
Its because you are getting the ID of the current active element before it fires the carousel to change the class.
Let's each of the carousel divs are siblings (next to each other) . You can do it like this :
$( "#prev-carousel" ).click(function() {
var id_feed_to_show = $(".active").prev().attr('id');
get_feed_data(id_feed_to_show);
});
$( "#next-carousel" ).click(function() {
var id_feed_to_show = $(".active").next().attr("id");
get_feed_data(id_feed_to_show);
});