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>";
Related
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'm developing a pdf book page viewer, i have many books that has more than 100 pages in my mysql database. so i fetch the book pages into my thumbnail gallery and if i select that image it will add img src to main image and display it on main image div, that works perfectly, here i have right and left arrow buttons next to main image, if i click these buttons the image should select next image or previous image. i was trying to get the idea and trying different source i could not get the output, please help me with this, i have added my codes bellow,
PHP
<button class="left-arrow" id="left-arrow">Left</buttom>
<img src="" alt="book" class="main-img" id="main-img">
<button class="right-arrow" id="right-arrow">Right</buttom>
<ul class="book-list id="book-list">
<?php if ($total_page > 0) : ?>
<?php foreach ($results as $row) : ?>
<li class="book p-2">
<span class="page-number"><?php echo $page_num++ ?></span>
<img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Image">
</li>
<?php endforeach ?>
<?php endif ?>
</ul>
JavaScript
<script type="text/javascript">
var bookPageList = $('#book-list');
$(bookPageList).click(displayImage);
function displayImage(e) {
if (e.target !== e.currentTarget) {
var target = e.target;
var src = target.src;
// console.log(src);
$('#main-img').attr('src', src);
}
}
</script>
I have fixed this issue in this link, hope this help to other newbies
Change image by selecting from thumbnail or next prev buttons
I would like to pass four arguments event, $row['title'], $row['username'] and $row['date'].
<?php
echo "<script>
function increasevotes(e,location,user,date)
{
e.preventDefault();
console.log(\"Hi!\");
}
</script>";
//I've proper code here for fetching the mySQL query results into $rows and that part is working perfectly.
while($rows=mysqli_fetch_array($result))
{
if($rows['public']=="yes")
{echo "<span class=\"right\" id=\"nolikes\">{$rows['vote']}</span><img src=\"img/like.png\" class=\"right\" width=\"30\" height=\"30\"/>";
}
?>
What is actually being done, is the page is being refreshed instead.
When I click view source page, this is shown:
<span class="right" id="nolikes">0</span>
<a href="" onclick="increasevotes(event,"chennai","venkat","01/07/2017")"><img src="img/like.png" class="right" width="30" height="30"/>
</a>
Change double quotes of function parameter to single quotes
onclick="increasevotes(event,'chennai','venkat','01/07/2017')"
or use \ to escape the quotes.
I have a toggle link to show or hide a table. This is the code for the link. When this is shown there is no blank line between the link and the table underneath
<a id='togglelink' name='togglelink' href='javascript:ToggleTable();' title='Show Inactive EDB Appointments' >
<p style='text-align:center'>Show Inactive EDB Appointments
</a>
When the link is clicked a table is shows and I change the link text
link.innerHTML = "<P style='TEXT-ALIGN: center'>Hide Inactive EDB Appointments";
After this code is executed a blank line appears between the link and the table underneath
Close off the paragraph tag within the HTML and the JavaScript.
<a id='togglelink' name='togglelink' href='javascript:ToggleTable();' title='Show Inactive EDB Appointments' >
<p style='text-align:center'>Show Inactive EDB Appointments</p>
</a>
link.innerHTML = "<p style='text-align: center'>Hide Inactive EDB Appointments</p>";
You forgot to close the <p> tag.
link.innerHTML = "<p style='text-align: center'>Hide Inactive EDB Appointments</p>";
Instead of using href="javascript: [some code]", which does not work in all browsers, you should use an onclick attribute as below and demo'd in this fiddle
<a id='togglelink' name='togglelink' href='#' title='Show Inactive EDB Appointments' onclick="ToggleTable();">
<p style='text-align:center'>Show Inactive EDB Appointments
</p><!-- Added in closing tag -->
</a>
Notes:
I made sure to close the <p> tag, though this was not the problem.
I've provided an example ToggleTable() function that guesses at how you initialize var link. I'd recommend document.getElementById('togglelink') or $('#togglelink') if using jQuery.
An alternative to the onclick attribute, as commented in the fiddle, is an event listener. Example below, if using jQuery:
function ToggleTable() {
var link = document.getElementById("togglelink");
link.innerHTML = "<P style='TEXT-ALIGN: center'>Hide Inactive EDB Appointments</p>";
}
$(document).on("click tap","#togglelink",function() {
ToggleTable();
});
I have a page with a few jquery tabs, each of which I want to display the result of a php function, as follows:
<ul id="tabs" class="ccm-dialog-tabs">
<li class="ccm-nav-active">Tab 1 Title </li>
<li>Tab 2 Title></li>
</ul>
<div id="tabs-1-tab">
<?php echo "This is tab 1<br>"; ?>
</div>
<div id="tabs-2-tab">
<?php echo "This is tab 2<br>"; ?>
</div>
The jquery to make the tabs work is:
<script type="text/javascript" language="javascript">
var ccm_activeTransactionsTab = "tabs-1";
$("#transaction_tabs a").click(function() {
$("li.ccm-nav-active").removeClass('ccm-nav-active');
$("#" + ccm_activeTransactionsTab + "-tab").hide();
ccm_activeTransactionsTab = $(this).attr('id');
$(this).parent().addClass("ccm-nav-active");
$("#" + ccm_activeTransactionsTab + "-tab").show();
});
</script>
The problem I am having is that when the page loads, the active tab shows the result of both php statements - i.e. it shows:
echo "This is tab 1<br>;
echo "This is tab 2<br>;
If I click between the tabs a few times then the extra information disappears. These tabs work fine normally, the problem only arises when they show the output of a php function.
I would suggest you use hide then at start using simple CSS
<div id="tabs-1-tab" style='display:none'>
<?php echo "This is tab 1<br>"; ?>
</div>
<div id="tabs-2-tab" style='display:none'>
<?php echo "This is tab 2<br>";?>
</div>
Also you have missed closing quotes in statement <?php echo "This is tab 1<br>; ?>
You missed the qoute on echo "This is tab 1<br>; but echo "This is tab 1<br>";