I'm dynamically generating my code in PHP and adding the ID atribut from database to the anchor href. It looks like this :
PHP
<table>
<tr><th>ID</th></tr>
<?php
if ($stmt = $mysqli->prepare("SELECT id FROM table;")) {
$stmt->execute();
$stmt->bind_result($id);
while ($stmt->fetch()) {
echo '<tr>...</tr>'
}
.... //closing the statment + error
?>
</table>
Which generated this HTML:
<a href="somepage.php?id=1></a>
<a href="somepage.php?id=2></a>
<a href="somepage.php?id=3></a>
<a href="somepage.php?id=4></a>
....
<tr>....</tr>
<tr>....</tr>
<tr>....</tr>
<tr>....</tr>
....
Why isn't the <tr>...</tr> inside the <a> and why it isn't clickable?
I tried adding some style to the <a> (display,width,height) but with no luck.
How to fix this?
Set the link as ID in your table row, like:
<table>
<tr id='http://www.google.com/'>
<td>foo</td>
<td>bar</td>
</tr>
<tr id='http://www.stackoverflow.com/'>
<td>foo</td>
<td>bar</td>
</tr>
</table>
use this little jquery script to detect the clicked row/link
$('tr').click(function () {
var id = $(this).attr('id');
alert(id);
});
Markup that has tr inside a is invalid, and all bets are off. You cannot make a tr as such a link in HTML, though you could use JavaScript to associate an onclick handler with it. In pure HTML, you would have to make the content of each cell separately a link, <td><a href=...>...</a></td>.
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've searched for solution but i'm lost. I have to remove or replace with blank everything between <tr> tags. I'm loading html file, which contains many <tr> tags, my goal is to remove <tr> with specific id. My <tr> looks like this:
<tr id="ctl00_cphMain_DisplayRecords1_RepeaterResults_ctl03_trZSD">
<td id="ctl00_cphMain_DisplayRecords1_RepeaterResults_ctl03_tdZSD" class="td-zsd footable-visible footable-last-column footable-first-column" colspan="9">
<div id="divZSDBanners" class="table-banners-zsd clearfix">
<div>
<div class="medium-4 columns zsd-ext-ad">
<div>
<script type="text/javascript">
</script>
<script>
</script>
<div id="ctl00_cphMain_DisplayRecords1_RepeaterResults_ctl03_ctl00_divSpace1" class="adSpacer">
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</div>
</td>
</tr>
I'm using Simple HTML DOM, I've already tried with $html->find('tr[id=tr_id]), but don't know to replace everything between, including divs and script tags.
Any ideas?
Use ->innertext property:
$tr = $html->find( 'tr[id=tr_id]', 0 ); // Select first node (0)
$tr->innertext = '';
echo $html->save();
Output:
<tr id="tr_id"></tr>
Or:
$tr->innertext = '<td>New Content</td>';
echo $html->save();
Output:
<tr id="tr_id"><td>New Content</td></tr>
To remove the TR element itself via DOM, use the removeChild method of its parent node:
$tr->parentNode->removeChild($tr);
To remove the element’s contents, either set its textContent property to empty string '' (PHP 5.6.1+) or remove all child nodes one by one using the element’s removeChild() method in a loop, e. g.:
while ($tr->lastChild) {
$tr->removeChild($tr->lastChild);
}
SimpleXMLElement object can be converted to DOMElement object using the dom_import_simplexml() function.
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"
i have a problem with my click changing image, i have database messages , every message has a status 0 or 1 , from my code o have to click on status image and it will change, its changes BUT only for the first Message. When i click to other message status it not changes but changes only for the first status. how can i go this run!!!
<script type="text/javascript">
$(function() {
$('.imageCheck').click(function(e){
e.preventDefault();
$("#bg").attr('src',"/application/admin/img/tick.png");
});
});
</script>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
foreach ($users as $user):
?>
<tr>
<td><?=$user['id']?></td>
<td>
<div class="imageCheck"><img id="bg" src="<?php echo $img_path;?>publish_x.png" name="statusCheck" value="0" />
</div>
</td>
You need to change the #bg in the your message control. In event handler use find to get nested bg element.
$('.imageCheck').click(function(e){
e.preventDefault();
$(this).find("#bg").attr('src',"/application/admin/img/tick.png");
});
Because an ID can (or rather should) only exist once in the DOM. jQuery is only changing the first element that matches the selector #bg. Try using a class instead:
<img class="bg" />
$('.bg').attr('src', '...');
Ids are supposed to be unique on a page. Since you are looping you are going to have multiple imgs with id bg, so only the first one works.
as BenM states change it to .bg also update your code to find the exact image below the div
$(".bg", $(this)).attr('src',"/application/admin/img/tick.png");
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>