We Keep Coding

Show/Hide multiple <span> with jQuery

I am trying to show and hide multiple elements in my table when a button is clicked. The table is generated using a PHP for loop
echo "<tr> ";
echo "<td style='text-align:center'>$stock_date</td>";
echo "<td style='text-align:center'>$store_name</td>";
echo "<td style='text-align:center'>$store_city</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($opening_stock,2)." <br/> </td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($wastage,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($purchases,2)." <br/>";
echo "<span id='averages' style='visibility:hidden;'>$global_currency_sign ".number_format($avg_purch,2)."</span></td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($sales,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($closing_stock,2)."</td>";
Then I have the jQuery doing the following
$('#show_averages').click(function(event){
if(document.getElementById("averages").style.visibility == 'hidden')
{
document.getElementById("averages").style.visibility = 'visible';
}
else if(document.getElementById("averages").style.visibility == 'visible')
{
document.getElementById("averages").style.visibility = 'hidden';
}
});
However it only works for the first id="averages" that it finds. How can I make it so that it shows all the elements with id="averages"?

IDs (#) are used to identify elements on the page that only occur ONCE. As soon as you have a duplicate, you can press F12 to open developer console and you should see an error saying it found two or more elements with the same ID. When you want to have multiple instances of something with the same properties, you can give it a CLASS (.)
Instead of using an id selector (#), change your td elements to have be classed together like this:
echo "<tr> ";
echo "<td style='text-align:center'>$stock_date</td>";
echo "<td style='text-align:center'>$store_name</td>";
echo "<td style='text-align:center'>$store_city</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($opening_stock,2)." <br/> </td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($wastage,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($purchases,2)." <br/>";
echo "<span class='averages' style='visibility:hidden;'>$global_currency_sign ".number_format($avg_purch,2)."</span></td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($sales,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($closing_stock,2)."</td>";
Then select your elements like this:
$('#show_averages').on('click', function(){
//your code here
})
Note that you'll likely have to change your jQuery (or raw JS in your case) to select by classname, as they no longer have the ID from before. You'll have to use something like this in your code, if you're choosing to use vanilla JS:
Document.getElementsByClassName('averages')
Otherwise, you can select all of these elements with
var myAverages = $('.averages');
myAverages.each(function(){
//this will loop through each of the average td elements and perform whatever code youd like here. You can reference each element with
$(this).whatever....
})

Because ID of element should be always unique. You repeated the same ID again and again through a loop but when you selected it through jQuery it selects only only first occurrence with the ID. The solution to this is you should always prefer using class instead of ID when you're getting data through looping

Dynamically creating buttons in html with mysql row value

I am drawing all my information from my sql database and displaying it in a table in html. I want to be able to click on a button at the end of each row, or somewhere on the row, and display another set of things relating to the uniqueID in that row. However at the moment, the value does not change for each dynamically created button.
$sql = "SELECT * FROM Hybrid";
$result = mysqli_query($link, $sql);
if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Timestamp</th><th>Rate</th><th>Fiat</th><th>BTC</th><th>BTCadd</th><th>Contact</th><th>PaymentMethod</th><th>Bank</th><th>localprofile</th><th>BTname</th><th>uniqID</th><th>Confirm2</th><th>Paymentmade</th><th>Paymenttime</th></tr>";
// output data of each row
while ($row = $result-> fetch_assoc()) {
echo "<tr><td>".$row["ID"].
"</td><td>".date('d-m H:i', strtotime($row["Timestamp"])).
"</td><td>".$row["Rate"].
"</td><td>".$row["Fiat"].
"</td><td>".$row["BTC"].
"</td><td>".$row["BTCadd"].
"</td><td>".$row["Contact"].
"</td><td>".$row["PaymentMethod"].
"</td><td>".$row["Bank"].
"</td><td>".$row["localprofile"].
"</td><td>".$row["BTname"].
"</td><td>".$row["uniqID"].
"</td><td>".$row["Confirm2"].
"</td><td>".$row["Paymentmade"].
"</td><td>".date('d-m H:i', $row["Paymenttime"]).
"</td><td>".
"<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>".
"</td></tr>";
}
echo "</table>";
}
This bit is the button:
<td>" . "<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>" . "</td>
and $row['uniqID'] displays all the different uniqIDs on my table in html, however, when I try this in javascript:
<script>
var id = document.getElementById("view").value;
function dropdown() {
alert(id);
};
</script>
It only alerts the first $row['uniqID'] regardless of which button I press, instead of the one corresponding to the row.
I need the value of the button to correspond to the uniqueID for that row, so I can use it in the button function, maybe there is another way?
I am stuck as to how to do this, I thought it might be something to do with the 'infamous javascript loop issue' but I am not sure if it applies, or if it does quite how to fix it?

id is to be unique, but you have n number of id='view'. So since there should only be 1 id='view' javascript will find the first one only. You could add this.value to the function call -
"<td>" .
"<button id='view' type='button' value='$row[uniqID]' onclick='dropdown(this.value);' >View</button>" .
"</td>"
and then use that in your function
<script>
function dropdown(id){
alert(id);
}
</script>

Expandable table when row is clicked, except for last cell

I have a dynamically generated table that takes attendance for students. The rows will expand with additional information about the student, if any part of the row is clicked. My problem is that if the attendance button (red x) is clicked, then the row expands, but the attendance is marked just fine.
I found a way to disable the last column (by giving all cells on the last column the same name and using some jquery to make it unclickable), but when doing that the buttons got disabled too.
Javascript/jQuery
$(function () {
//This is the line I used to disable the last column, but is affecting the buttons
$('td[name="attend"]').click(function () {
return false;
});
//the rest of the code is used for expanding each row
$("td[colspan=7]").find("p").hide();
$("table").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
I have named all the cells in the last column "attend". Any help is much appreciated!
Upon Request, here is the code for each button. Each button is it's own form that is inside the last cell of every row.
php
echo "<td style=\"min-width:75px;\" name=\"attend\">";
echo "<form method=\"POST\" onSubmit=\"return new_user(this);\" >";
echo "<input type=\"hidden\" value=\"" . $row2['status'] . "\" name=\"astatus\" />";
echo "<input type=\"hidden\" value=\"" . $row2['cancel_key'] . "\" name=\"mark_attend\" />";
echo "<input type=\"image\" src=\"$image\" name=\"pic\" />";
echo "</form>";
echo "</td>";

Examine the target tag name like so:
alert($target.prop('tagName'));
It will be "TD" (or SPAN, or whatever is in the cell), or your button.

How to clear content of div container using JS/Jquery?

I have been developing some page and I need to clear a content of some div:
<table>
<tbody>
<div class="records_content">
<?php
$i=0;
foreach ($records as $record) {
echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>";
echo "<td width='400'>" . strip_tags($record['language_value']) . "</td>";
if ($record['approved_translation'])
{
echo "<td width='200' height='30'><div class='field' id='".$record['label_value']."/".$record['language_id']."'>".
strip_tags($record['approved_translation']['language_value'])."</div></td><td><button class='btn btn-info' id='{$record['label_value']}/{$record['language_id']}' href='#'>More...</button>"."</td>";
}
else
{
echo "<td width='200'>"."<div id='".$record['label_value']."/".$record['language_id']."'><span class='no_translate'>Not translated</span></div>" . "</td>";
}
echo '</tr>';
$i++;
}
?>
</div>
</tbody>
</table>
Piece of JS code:
$(".page_button").click(function () {
$.post("http://"+document.location.host+"/index.php/welcome/update_records_set/"+this.id,
function(data)
{
alert('123');
$(".records_content").empty();
});
});
This script works, because I see '123' notification, but div container with '.records_content' class isn't clear. Please, tell me, how can I fix it? Thank you.
UPDATE:
Now it works. But I have a new problem with pagination:
<br><b>Page:</b><br/>
<?php
for($i=0; $i<$count; $i++)
{
if ($i==0)
{
echo "<div class='selected_page_button'>".($i+1)." "."</div>";
}
else
{
echo "<div class='page_button'>".($i+1)." "."</div>";
}
}
?>
And code for changing class of button:
$(".page_button").click(function () {
$(".selected_page_button").attr("class", "page_button");
$(this).attr("class", "selected_page_button");
});
It works correctly for all buttons without first. When my page is created the first page is selected. When I click by "2", then "1" is simple and "2" is selected. The same thing is with all buttons without "1": if I click by "2" (or other one) then I can't click by first! "1" changes it's view but doesn't change behavior, because simple button is clickable and selected button is not clickable!

It does clear using .empty() as your code already states, except that it clears after the alert. See here: http://jsfiddle.net/YPLeB/
After you click "OK", the DIV is cleared as expected.

Try this:
$(".records_content").html('');

You'll see the alert happening before the HTML is emptied. Try placing the alert after the .empty() function or use a non-blocking command such as console.log() to debug your code.
Your code itself is correct... only the ordering of the commands is tripping you up...

jQuery load function and tables

On my site, it displays a table of data.
I've got a link that will load another table of data from a URL.
$("#another").click(function() {
var newGeneration = $('<p />').load('another.php?cycle=' + i);
$('tbody').append(newGeneration);
i++;
});
Is there a way to get it so that it doesn't add a p tag and just directly load the file into the tbody? I tried changing it to tr, but that just made trs inside of trs.
The code that displays another result
echo "<tr>";
echo "<td>" . $keys[$k] . "</td>";
echo "<td>" . $jobs[$k] . "</td>";
echo "</tr>";
What I don't want to happen (like it is now)

I think its better to send a get request instead of complicating the use of load.
$("#another").click(function() {
$.get('another.php', { 'cycle' : i }, function(data) {
$('tbody').append(data);
});
});

Try to get the html() from the element :
$("#another").click(function() {
var newGeneration = $('<p />').load('another.php?cycle=' + i);
$('tbody').append(newGeneration.html());
i++;
});