I use php to generate a table that has multiple links and divs like the one below, each with a unique id. Clicking the link shows the div. Can this be recoded with jQuery? The full code is pretty ugly with all of the backslashes and onclicks.
<a href = '#!' class = 'link' id = 'link".$id."' onclick = 'document.getElementById(\"box".$id."\").style.display = \"block\";'>click here</a>
<div class = 'box' id = 'box".$id."'>content here</div>
It's not JavaScript making it ugly (and jQuery being pretty); it's the lack of separation of concerns that makes it ugly. Isolate your JavaScript, and activate it by registering a listener, not directly as string of code on your HTML (something that is just Not Done any more by any serious JS user).
This is perfectly readable, despite being "just" JavaScript:
<a href='#!' class='link' id='link<?php echo $id; ?>'>click here</a>
<div class='box' id='box<?php echo $id; ?>'>content here</div>
<script>
var link = document.getElementById('link<?php echo $id; ?>');
var box = document.getElementById('box<?php echo $id; ?>');
link.addEventListener('click', function(evt) {
box.style.display = 'block';
});
</script>
On the other hand, here is your original code with jQuery:
<a href = '#!' class = 'link' id = 'link".$id."' onclick = '$(\"#box".$id."\").css(\"display\", \"block\");'>click here</a>
<div class = 'box' id = 'box".$id."'>content here</div>
Still ugly.
This is one way, change the HTML structure to this:
<a href='#!' class='link' data-box='#box".$id."'>click here</a>
<div class='box' id='box".$id."'>content here</div>
Then, bind only one event listener (instead of one per id) to the .link class. Use this code in an external JS file:
$('.link').on('click', function (e) {
e.preventDefault();
var box = $(this).data('box');
$(box).show();
});
try this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a href = '#!' class = 'link' id = 'link<?php echo $id; ?>' >click here</a>
<div class = 'box' id = 'box<?php echo $id; ?>'>content here</div>
<script>
$( ".link" ).click(function() {
this.style.display = 'block';
//this.style.display = 'none';
});
</script>
Related
There is a project I took over for restyling and they asked me to fix the anchors for tabs where the user gets send to the top in firefox: http://new.yourcoach.be/opleidingen/nlp-bootcamp/
It works like a charm in Chrome but not in other browsers
<script>function changeTab(e){
e.preventDefault();
console.log("Changing tab");
}</script>
<a class="nav-link <?php if ($i == 1): ?>active<?php endif; ?> text-uppercase" data-toggle="tab" data-target="#<?php echo sanitize_title($tab['_title']); ?>" href="javascript:;" onClick="changeTab(event)"><?php echo $tab['_title']; ?> </a>
I tried the following without succes:
Anchor
Anchor
Anchor
<script>
$( "tablink" ).click(function() {
e.preventDefault();
console.log("Changing tab");
})(jQuery);
</script>
<a id="tablink" href="#">Anchor</a>
Solution
Anchor
To have an html element fire a javascript event, you can either use the onClick attribute of the element and enter the javascript function directly in the attribute:
# html
Example
# javascript
function changeTab(e) {
e.preventDefault();
// do things
}
Or you can just do it in the javascript by hooking onto all elements that match a certain selector. This is the preferred method, as it doesn't mix the html and javascript, which makes it easier to understand what affects what.
# html
Example
# javascript
document.querySelectorAll('.js-change-tab').forEach( a => {
a.addEventListener('click', e => {
e.preventDefault();
// do things
});
});
Following worked for all browsers not to go to the top anymore:
Anchor
Use a JQuery callback to avoid event object issues
<script>
function changeTab(e){
e.preventDefault();
console.log("Changing tab");
}
$(document).on("click", ".nav-link", changeTab);
</script>
<a class="nav-link <?php if ($i == 1): ?>active<?php endif; ?> text-uppercase" data-toggle="tab" data-target="#<?php echo sanitize_title($tab['_title']); ?>" href="javascript:;"><?php echo $tab['_title']; ?> </a>
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;
});
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();
});
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);
});
I found the answer how to open few pages in new tabs with a single click, but I don't know how to place urls from mysqli database using fetch.
mysqli statement is ...
$pick_site = $mysqli->prepare("SELECT url FROM sites where chosen = ? ORDER BY name ASC");
$pick_site->bind_param('s', $yesterday);
$pick_site->execute();
$pick_site->store_result();
$pick_site->bind_result($list_sites);
while ($pick_site->fetch_array()) {
$mysites = $list_sites;
}
here is working javascript code for opening tabs
<a id="test" href="#"> CLick </a>
<script type="text/javascript">
document.getElementById("test").onclick = function(){
window.open("http://www.google.com",'_blank');
window.open("http://www.p3php.in",'_blank');
}
</script>
Thank you very much,
Ivan.
Just echo links like that :
<a id="test" href="#"> CLick </a>
<script type="text/javascript">
document.getElementById("test").onclick = function(){
<?php while ($pick_site->fetch_array()) { ?>
window.open("<?= $link ?>",'_blank');
<?php } ?>
}
</script>