We Keep Coding

How to pass a value from an anchor tag to a html code that's inside a javascript variable

I have an anchor tag that opens a popover and the popover has an anchor tag itself, the latter generated with javascript. I need to pass a value from the first anchor tag to the second.
Popover code:
<a class="btn-opt btn-sm image-options" data-bs-container="body"
data-bs-toggle="popover" data-bs-placement="left"
data-bs-html="true"><i class="fa-solid fa-ellipsis"></i></a>
Javascript:
var popString2 = "";
popString2 = popString2 + "<a href='#' class='options' id ='saveImage'>Save image<span class='icon-pop'><i class='fa-regular fa-floppy-disk'></i></span></a>";
$(".image-options").attr('data-bs-content', popString2);
I'm assigning popString2 to the data-bs-content attribute of all anchor tags with the class image-options because I have several of them. The 'Save image' link in the javascript will trigger an image download.
When the popover is clicked, I need it to pass the image URL as the href value to the anchor tag in the popString1 variable.
I'm loading the images with Flask. I could also load an id attribute value for each image, and then add that value somehow to the popover code so I can then pass it to the javascript. But I don't really know if that last part is possible.
This screenshot will maybe help understand what I need to achieve.

Ok, I have an idea but I don't know javascript/jquery so I'm sure my code is wrong, mostly because it's not working.
The idea is to assign dynamically generated id attributes to both the img and the popover anchor tag. The id attribute for the anchor tag is the image id in the database, which I load with Flask, that way it's unique. The img tag id attribute is the same as the anchor tag's but adding "img" at the end. Ex. <a id="1"></a> / <img id="1img">. Then calling a javascript function from the anchor tag with onclick event.
My attempt at the javascript/jquery function is this:
$(document).ready(function(){
$('.image-options').click(function() {
var icon_id = $(this).attr('id');
icon_id = "#" + icon_id
img_id = icon_id + "img";
the_url = $(img_id).attr('src');
var popString2 = "";
popString2 = popString2 + "<a href='" + the_url + "' class='options'>Save image <span class='icon-pop'><i class='fa-regular fa-floppy-disk'></i></span></a>";
$(icon_id).attr('data-bs-content', popString2);
var popString1 = "";
popString1 = popString1 + "<a href='" + the_url + "' class='options' id ='addCollection'>Add to collection <span class='icon-pop'><i class='fa-solid fa-plus'></i></span></a>";
$(icon_id).attr('data-bs-original-title', popString1);
});
});
HTML code:
<img class="card-img-top card-img-bottom thumb" data-bs-toggle="modal"
data-bs-target="#myModal" src="{{ url_for('static',filename=image[1]) }}" id="{{ image[0] ~ 'img' }}">
<a class="btn-opt btn-sm image-options" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true" id="{{ image[0] }}" onclick="url_getter()"><i class="fa-solid fa-ellipsis"></i></a>
Could this work? If so, what is wrong with my code?
UPDATE:
So I corrected my JQuery as far as I could and it almost works. The attributes are assigned successfully to the popover anchor tag, but when I click on it, the "Add to collection" link works but the "Save image" one doesn't. When I inspect the element, the href value is gone from its anchor.

Pass variable between from PHP to a DIV HTML

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 to show hidden div immediately after clicking on link

So I've made a function that, when you click on a button, a certain div comes up with its own content. When clicking on the button again, the div will hide and another div will show up. This div will always show up when none of the other three divs aren't selected.
The problem is when I'm adding an href tag with an anchor link which is connected to each div, that I must click twice on the button before the hidden div will show.
Check fiddle here: http://jsfiddle.net/449r8Lwv/
So as you can see, when you click on one of the buttons, nothing happens except that the url changes which is a good thing. But clicking AGAIN on the same button lets you show the hidden div. This is not what I want, I want the div show up the first time you click on the button already.
Also, when going directly to the url with an anchor name in it, It will immediately show the div with it's content that is connected to the anchor, that's a good thing. But then if you click another button again, it will show the div that must normally show when NONE of the divs aren't selected which is not the case.
Example: You go to url website.com/test.html#2. Then when you click on button 3, then content of the connected div must come("3") up but instead the div(named #text) will come up when that one should only come up if none of the divs that are connected to the buttons arent showing up.
HTML:
1
2
3
<br><br><br>
<div id="clicks">
<a class="click" id="showInfo" data-target=".1"><button>1</button></a>
<a class="click" id="showDataInput" data-target=".2"><button>2</button></a>
<a class="click" id="showHistory" data-target=".3"><button>3</button></a>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
JavaScript/jQuery
<script>
$(document).ready(function () {
var $targets = $('.target');
$('#clicks .click').click(function () {
var $target = $($(this).data('target')).toggle();
$targets.not($target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none':'')
/*$('#contact_info').toggle(!$targets.is(':visible'));*/
});
});
</script>
<script>
function doToggle(num) {
var target = $('div.target' + num);
target.toggle();
$('.target').not(target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none' : '')
}
$('#clicks .click').click(function () {
var num = $(this).data('target');
doToggle(num);
});
function handleHash() {
doToggle("." + location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
</script>
Thank you a lot.
ps: in the fiddle I only put the second script part because of some issues when I put the other part aswell. If you test it local you should use the whole JavaScript/jQuery part.

Since the URL is changing, you need to put doToggle(..) in the main section of your code.
Another problem is the data-target. jQuery may evaluate the number as a number. So .1 will become 0.1. We can add the . in JS.
<div id="clicks">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
and the JavaScript:
function doToggle(num) {
var target = $('div.target' + num);
target.toggle();
$('.target').not(target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none' : '')
}
$('#clicks .click').click(function () {
var num = '.' + $(this).data('target');
if (num === '.' + location.hash.substring(1)) {
doToggle(num);
}
});
function handleHash() {
doToggle("." + location.hash.substring(1));
}
if (location.hash.substring(1).length > 0) {
doToggle('.' + location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
Edited:
In you script before, doToggle was working, but after it executed, the url would change, making it look like doToggle wasn't working. The click handler should only perform the toggle if the hash url is the same as the toggled div.
http://jsfiddle.net/449r8Lwv/12/

I'd suggest to remove dots in your data-target attribute.
So, your HTML will look like this:
1
2
3
<br><br><br>
<div id="clicks">
<a class="click" id="showInfo" data-target="1"><button>1</button></a>
<a class="click" id="showDataInput" data-target="2"><button>2</button></a>
<a class="click" id="showHistory" data-target="3"><button>3</button></a>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
And you can try it here.

Change
$('#clicks .click')
To
$('#clicks.click')
This should solve your problem.
So remove the space in your selector
example: jsfiddle

There is flaw in your code thats why it requires two click to show the div.
Flaw: when user clicks on a link/button say "1" first time both your click and onhashchange handler is getting fired one after another. i.e clickHandler is first display the div 1 which is again gets hidden by your onhashchange handler call.
Next time when you click on same link 'No hashchange will occur' and hence only click handler is getting fired which in turn display the div correctly.
Solution: I suggest you should only use click handler because of the nature of your requirement. Or if it doesn't fit your requirement, you can set global variable to track if one of the event is fired and check its value before calling doToggle in your hashchangehandler.

JQuery .click doesn't work with php file

I have a website which connects to a database and displays some pictures. I want to make it so that when you click one of the pictures, it will display an alert but that doesn't seem to work when the images are dynamically rendered. Whenever i try it on jsbin it works but when i try it with a php file it doesn't. I am using jquery and bootstrap.
JSbin: http://jsbin.com/xamovudiroqe/2/
PHP code
while($i > $y){
$picture_query = mysqli_query($link, "SELECT * FROM images WHERE team = '$full_table_array[$y]' AND teamphoto = 1");
$picture_array = mysqli_fetch_array($picture_query);
echo "
<div data-team=\" ".$picture_array['team']." \" class=\"col-xs-6 col-md-3\">
<a href=\"#\" class=\"team-nail thumbnail\">
<img src=\" ".$picture_array['name']." \" >
</a>
</div>
";
$y++;
}
Javascript code
$(".team-nail").click(function() {
var team = $(this).attr('data-team');
alert(team);
alert("hi");
console.log(team);
});

I see the problem. You are adding the click event to the anchor element, but the data-team attribute is on the div element. All you need to do is move the data-team attribute the anchor and it will work like a charm.
echo "<div data-team=\" ".$picture_array['team']." \" class=\"col-xs-6 col-md-3\">
<a href=\"#\" class=\"team-nail thumbnail\">
<img src=\" ".$picture_array['name']." \" >
</a>
</div>";
To:
echo "<div class=\"col-xs-6 col-md-3\">
<a href=\"#\" data-team=\" ".$picture_array['team']." \" class=\"team-nail thumbnail\">
<img src=\" ".$picture_array['name']." \" >
</a>
</div>";

On click function of Prototype Javascript

HI ,
I am using Prototype Javascript for my application .
I am having a Html like
<span style="display: none;">
<span class="fn">
<span class="given-name">NAME</span>
<span class="family-name"> </span>
</span>
<span class="email">email#gmail.com</span>
<span class="tel"></span>
<span class="role">Developer</span>
<a class="underlin" href="/users/username">View</a>
<a class="additional_click" href="">Show Additional Details</a>
<span style="display: none;" class="additional_detail">
Personal Number : 82374894725
</span>
</span>
I am trying a task of when clicking on Show Additional details the span next to that should be displayed and the Innerhtml should be replaced with Hide Additional Details .
And on clicking Hide additional Details , the span (additional_detail) should hide
I have written a Javascript (Prototype) for this
$$(".additional_click").each(function(el){
el.observe("click", function(event) {
event.element().next().show();
el.replace("Hide additional details");
});
});
How to write the Js for on clicking Hide Additional Details to get the span to hide. And to replace the text to Show additional details

In your event function, check if the span was visible. If it was, then hide it and change the text to "Show additional details", and if it wasn't, then show it and change the text to "Hide additional details".
$$(".additional_click").each(function(el) {
el.observe("click", function(event) {
if(el.next().visible())
{
el.next().hide();
el.innerHTML = "Show additional details";
}
else
{
el.innerHTML = "Hide additional details";
el.next().show();
}
Event.stop(event);
});
});
Also remember to stop the event, so that the browser doesn't actually follow the link.