I am trying to allow user to click on the picture that is displayed on the website, currently, the picture is pull out from a database and is on a loop. If i set a id, user can only click on the first pic that is shown, is there anyway for the $("#HELP").click(function(){ to allow me to have one code but allow all the pic to be click ?
<div id = 'HotelContentsmallpic'>
<?php
$cols=4; // Here we define the number of columns
echo "<table>"; // The container table with $cols columns
do{
echo "<tr>";
for($i=1;$i<=$cols;$i++){ // All the rows will have $cols columns even if
// the records are less than $cols
$row=mysqli_fetch_array($result2);
if($row){
$img = $row['IMG'];
$cat = $row['Category'];
?>
<td>
<table>
<tr align="top">
<td><img id = "HELP" src="images/Hotel/<?php echo $img ?>.jpg" class="img-responsive" /></td>
<td>
</td>
<td width="50"> </td> <!-- Create gap between columns -->
</tr>
</table>
</td>
<?php
}
else{
echo "<td> </td>"; //If there are no more records at the end, add a blank column
}
?>
<script>
$(document).ready(function(){
$("#HELP").click(function(){
window.location='hotels.php?Category=<?php echo $cat ?>&Pic=<?php echo $img ?>';
});
});
</script>
<?php
}
} while($row);
echo "</table>";
?>
</div>
You need to change two things:
In HTML use img tag like that:
<img onclick="redirect_url('<?=$cat?>','<?=$img?>')" src="images/Hotel/<?=$img?>.jpg" class="img-responsive" />
And in Javascript use this:
<script type="text/javascript">
function redirect_url(cat,img)
{
window.location='hotels.php?Category='+cat+'&Pic='+img+'';
}
</script>
In this solution, no need to use #HELP id in this.
You are using the the ID attribute, in this case you should use the class attribute since there are multiple elements of the type "HELP". So basically #HELP to .HELP and id="HELP" to class="HELP"
Related
I have a far loop which check the number and output the result to number of that.
For exmaple, in below picture the "cut image" is displayed in multiples times. I have tag in the far loop so it outputs the image according to number of times. And that number come from database.
MY Question.
Obviously all the images in first row will have same ID. Currently user can only click the first image of the row. I would like to give each element different ID if possible. Than I would like to use JQuery to add click event. So if I click on 4th image in first row, it alert message and if i click 5th image it shows different alert message.
How I can assign different ID to each element in far loop so it does only make first Image clickable but instead all elements clickable.
My loop
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img alt="" class="yellow-process center-block " id ="cut-full-roll-<?php echo $row['id_vnr']; ?>" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
My jquery selector
If I can give each element different ID, than I can do something like this to add clicked event to clicked image.
jQuery( "#vinyl-roll-down-<?php echo $row['id_vnr']; ?>" ).click(function() {
But I need help assign different unique to each element in far loop.
Thanks in advance.
I think your loop in PHP is okay like that.
The problem lies in your jquery, try getting the right id by using use attribute
selector attr("id").
jQuery( ".yellow-process" ).click(function() {
var selected = jQuery(this).attr("id");
alert(selected); // to show the selected image id
// use the variable selected to do something with it.
}
After trying this jquery code you could advance it for your use.
You can try this
In html:
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img id="image{{$x}}" alt="" class="yellow-process center-block " onclick="imageClick(<?php echo $row['id_vnr']; ?>)" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
in jquery
function imageClick(id) {
alert(id);
var imageId = jQuery(this).attr("id");
alert(imageId);
// your code
}
I thigh it will help you.
$( ".yellow-process" ).bind("click",function() {
var selected = $(this).attr("id");
alert(selected); // to show the selected image id
// use the variable selected to do something with it.
});
Your php code written in the right way and working as expected just for jquery above is the working code
I had to display a table using php and html, that select data from sql server. Their is a cell called echo photo that sometimes is empty, and sometimes is loaded with an image. How to change my code to test:
if (it is empty){
echo "No echo files";
}
else{
<a href='download_PopUp.php?data=<?php echo $dataFile2; ?>'>Click to download</a>
}
My php and html codes are:
<?php
...
while($rows=mysqli_fetch_array($result)){
$data =$rows['echo_photo'];
$dataFile = str_replace('/', '\\', $data);
...
?>
here in this td of html table I want to put if else conditions
<td align="center"><a href='download_PopUp.php?data=<?php echo $dataFile2; ?>'>Click to download</a></td>
<?php if (!empty($data)) : ?>
<td align="center"><a href='download_PopUp.php?data=<?php echo $dataFile2; ?>'>Click to download</a></td>
<?php else: ?>
<td align="center">No Data Available</td>
<?php endif; ?>
Why dont you change the query.
Select * FROM table WHERE echo_photo NOT LIKE ''
Than you will only get the values that exists
Otherwise you can do it with a if statement like:
if(!empty($data)){
// echo html code
}else{
echo "No Data Found!";
I'm trying to wrap my head around PHP and variable scope. Take a look at the following:
<?php foreach ($data as $tip) { ?>
<tr>
<td><?php echo $tip['id']; ?></td>
<td><?php echo $tip['title']; ?></td>
<td class="delete"><i class="icon-cross"></i></td>
</tr>
<?php } ?>
This just runs a foreach loop that pulls some information out of the database and displays it in a table. The last table cell has an icon in it for deleting that article. What I'm trying to do is have a modal popup that asks for conformation to delete that specific article but I cannot tie the tip id with the delete button because the modal window sits outside the loop. How can I go about accessing the individual id?
Do this :
<?php foreach ($data as $tip) { ?>
<tr>
<td><?php echo $tip['id']; ?></td>
<td><?php echo $tip['title']; ?></td>
<td class="delete" onclick="deleteArticle(<?php echo $tip['id'] ?>)">
<a href="#deleteModal" class="modal">
<i class="icon-cross"></i>
</a>
</td>
</tr>
<?php } ?>
<script>
function deleteArticle(id){
// now you can do what ever you want to do with this id
}
</script>
There is a built it javascript function called "confirm".
If you're using JQuery (And I assume you are) try this:
$('.delete').click(function(){
var check = confirm("Are you sure you want to delete this article?");
if(check)
{
// you code here
}
else return false;
});
By compiling this, display three image get my database and show it, when i click each image popup window show last image of my database.I want to know how to display the particular image, when i click first image,then popup window show first image and description, as well as same way second and third image. check to array loop in this code...
enter code here
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN = array();
$i=0;
$firstN = '<img src="'.$row ['image'].'">';
echo ' <a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ' ; echo $productname;echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
<div id="myModal" class="reveal-modal">
<form>
<table>
<tr><td><?php echo $r; ?></td>
<td><h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p></td>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>
I guess you have the images stored in the database like BLOB data. If so you need to create a handler to retrieve those images and render them as image/[mime]...
So in short.
In your code you need to create a new file iz get_image.php in it you need to make a request to the server and retrieve the image so you can send it to the client.
In your code you need to change the image path to the handler path with some query parameters.
$firstN = '<img src="get_image.php?imageid='.$row ['productid'].'">';
There are a lot information how to render the image to the client from the internet.
may be you have to declare your $firstN = array(); and then incrementor $i=0; out of while loop and put in array like this:
$firstN[$i] = '<img src="'.$row['image'].'">';
below is the full code:
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
$firstN = array();
$i=0;
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN[$i] = '<img src="'.$row['image'].'">';
echo '<a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ';
echo $productname;
echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
Updates:
You have a space here:
$firstN[$i] = '<img src="'.$row['image'].'">';
//-----------------------------^----here at this code block;
To get the last image , you need to modify your query to have SORT BY productid DESC
To display the images
echo "<a href='xxx.php?imgid=$image'><img src='yourimagesfolderpath/$image.jpg'> </a>";
to navigate in the images , you have to use JQUERY
I am creating a diabetes management system for a university project. One of the features of this system is for the patient to be able to send latest glucose readings and for the nurse to be able to login and comment on those readings.
I have been able to code the patient feature, however I wish to add a comment button in the comments column, which when clicked, brings up a popup window or a textbox for the nurse to be able to comment on that specific record. If a comment has not already been entered, an empty box should come up, however if there has been a previously entered comment, it should be displayed in the box to be updated and sent back to the mysql database. I would like to ask if someone could give me a way to include this comment box and code for the existing value to be displayed in the box and if there is no existing comment, then a new comment can be entered and stored in the database.
Below is my php code.
<?php//run query
$result = mysql_query($GetReadings);
?>
<table>
<tr>
<th>Date</th>
<th>Time</th>
<th>Glucose Level</th>
<th>SBP</th>
<th>DBP</th>
<th>Comments</th>
</tr>
<?php
//display results
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<tr>
<td><?php echo $row["Date"]; ?> </td>
<td><?php echo $row["Time"]; ?> </td>
<td><?php echo $row["GlucoseLevel"]; ?> </td>
<td><?php echo $row["SBP"]; ?> </td>
<td><?php echo $row["DBP"]; ?> </td>
<td><?php echo $row["Comments"];
<?php
//if statement to add comment link if user is a nurse
if ($_SESSION['User_level'] == 2)
{
//code for comments
}
?> </td>
</tr>
<?php
//end of while loop
}
?>
Hope I haven't missed out any crucial information.
Use the javascript function :
window.open(URL, windowName[, windowFeatures])
Where, URL - desired URL to display a page containing Textbox, use any window name you want.
Echo <a> or button with a onclick event eg:
Add Comment
Edit
The most basic way to achieve is, echo a <div></div> containing the past comments, the text box for new comments and Send/Cancel buttons. The trick is to set the display:none style property of that div. You the following code a guideline :
Echo the following code if the User has right user level.
Show Comments
<div id="comment-<?php echo $row['id']?>" style="display:none">
//display previous comments
<form method="post" action="addComment.php?id=<?php echo $row['id']?>">
<textarea name="comment"></textarea>
<input type="submit" value="Add Comment" /><input type="button" onclick="hideComment('<?php echo $row['id']?>')">
</form>
</div>
<script type="text/javascript">
function hideComment(id) {
document.getElementById('comment-' + id).style.display = 'none';
}
function showComment(id) {
document.getElementById('comment-' + id).style.display = 'block';
}
</script>