I have following loop in php:
foreach ($sid as $key => $value) {
$sql = " a sql query ";
$vehicle->rowQuery($sql);
$numRows = $vehicle->rows;
while ( $data = $vehicle->result->fetch_assoc()) {
$vid = $data['vid'];
$vehicleName = $data['vehicleName'];
$noOfSeat = $data['noOfSeat'];
$seatBooked = $data['seatBooked'];
$supplierName = $data['supplierName'];
echo "<table class='table table-bordered table-condensed table-striped'>";
echo "<tr>";
echo "<th colspan='4' class='success'>
<label class='checkbox-inline'>
<input type='checkbox' class='vehicleClass' name='vid[]' value='{$vid}'>$vehicleName<strong> ( $noOfSeat Seats available) - $supplierName
</label>
<div class='pull-right'><a href='#' class='hideMe'>Show/Hide</a></div></strong>
<input type='hidden' name='noOfSeat[$vid]' value='$noOfSeat'>
</th>";
echo "</tr>";
echo "<tr>";
echo "<th colspan='4'>All Seats</th>";
echo "</tr>";
$count = 0;
for ($seat=1; $seat <= $noOfSeat; $seat++) {
if($count % 4 == 0) {
echo "</tr><tr class='toggleMe'>";
}
echo "<td><label class='checkbox-inline'><input type='checkbox' name='seatNo[$vid][]' value='$seat'>Seat $seat </label></td>";
$count++;
}
echo "</table>";
}
if( $numRows == 0 ) {
echo "<table class='table table-bordered table-condensed table-striped'>";
echo '<tr><td class="alert alert-warning">Your selected vehicle is not available.</td></tr>';
echo "</table>";
}
}
It's output is like that:
Now, I am trying to show and hide the corresponding All Seats Checkbox list whne I click on show/hide link using following jQuery:
$(document).ready(function(){
$('.hideMe').click(function() {
$(this).next('.toggleMe').toggle();
});
});
But show/hide it's not working. Can you guys tell me how can I solve it?
Thanks.
===================
Update:
When the loop result is this :
then using this code it's working fine:
$(document).ready(function(){
$('.hideMe').click(function() {
$('.toggleMe').toggle();
});
});
Do you use ajax to get the html?
if yes, you had better use $('body').on('click,'.hideMe',function() {})
and tr is not next element of .hideMe
You can try this code.
$(document).ready(function(){
$('body').on('click','.hideMe',function() {
$(this).parents('table').find('.toggleMe').toggle();
});
});
I think you should use on('Click',function(){ }) instead of click try this
$(document).ready(function(){
$('body').on('click', '.hideMe', function() {
$(this).next('.toggleMe').toggle();
});
});
I think your structuring with "<tr>" is not correct in
if($count % 4 == 0) {
echo "</tr><tr class='toggleMe'>";
}
this will add a </tr> at the beginning of each toggleMe class.
Related
I found plenty of articles and solutions but for some reason my code still doesn't work. What am I missing?
Table: (creation works, important part is at the comment '! HERE')
<!-- Table with grades -->
<table class="table table-hover table-dark">
<caption>List of grades</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<?php
// fill table with data of database
if($subject != '') {
$query = "SELECT u.firstname, u.lastname, u.username, s.subject, g.grade FROM tbl_grades as g INNER JOIN tbl_users as u on g.studentID = u.ID INNER JOIN tbl_subjects as s on g.subjectID = s.ID where s.subject = ? and classID = ? order by u.lastname";
$stmt = $mysqli->prepare($query);
$stmt->bind_param("ss", $subject, $class);
$stmt->execute();
$result=$stmt->get_result();
if($result->num_rows > 0) {
$count = 0;
while($row = $result->fetch_assoc()){
if(($count % 2) != 0) {
echo '<tr class="bg-success">';
} else {
echo '<tr>';
}
echo '<th scope="row">' . ($count + 1) . '</th>';
echo '<td>' . $row['firstname'] . '</td>';
echo '<td>' . $row['lastname'] . '</td>';
//! HERE
echo '<td class="grade_td" contentEditable="false">' . $row['grade'] . '</td>';
echo '</tr>';
$count++;
}
}
$result->free();
}
?>
</tbody>
</table>
<button class="btn_edit">Edit List</button>
Toggle with javascript, jquery (multiple versions, none of them work):
$(document).ready(function() {
// v1
$('.btn_edit').click(function() {
if($('.grade_td').contentEditable == false) {
$('.grade_td').contentEditable = true;
}
});
// v2
$('.btn_edit').click(function() {
$('td[contenteditable="false"]').contentEditable = true;
});
// v3
$('.btn_edit').click(function() {
$('.grade_td[contenteditable="false"]').contentEditable = true;
});
// more variations, same concepts
});
btw. the button event works fine
You need to use the jQuery attr function or set the attribute value on the element itself not the jQuery object.
$('.btn_edit').click(function() {
$('.grade_td').attr('contenteditable', 'true') ;
});
I'm not sure about custom attributes, but I would have made this a data attribute:
echo '<td class="grade_td" data-contenteditable="false">' . $row['grade']
and then referenced like this:
$('td.grade_td[data-contenteditable="false"]');
I have created a table with 3 columns and rows with the size of an array pulled from the database. I have got the value but I want to create a button inside the cells with the name from pname and when you click that button it will take you to the value of plink. I tried using <input type="button" value=" " onclick="window.open( )", but it doesn't seem to pass the arrays. I am sure there is an easier/ better way to do it with JavaScript, but I am not familiar with JavaScript. Please help me out. Here is my code.
I want the format 3 columns and infinite rows(based on the data).
<!DOCTYPE html>
$pname = array();
$plink = array();
$results = $wpdb->get_results("SELECT name, link FROM `wptable`);
if(!empty($results)) {
foreach($results as $row){
$pname[] = $row->name;
$plink[] = $row->link;
}
}
$num = 0;
echo "<table class='table'>";
echo "<tbody>";
echo "<br><br>";
$quant_row = count($pname)/3;
$quant_col = 3;
for ($count_row = 0; $count_row < $quant_row; $count_row++)
{
echo "<tr>";
for ($count_col = 0; $count_col < $quant_col; $count_col++)
{
echo "<td>";
echo $plink[$num];
echo "</td>";
$num++;
}
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
You just need to echo a button inside an anchor:
echo '<button type="button">' . $pname[$num] . '</button>';
try this.
echo "<td>";
echo "<button onclick=\"Document.getElementById('link$num').display=state$num? 'none' :'block';state$num=!state$num; \">". $pname[$num] ."</button><div id='link$num'>". $plink[$num]."<div>";
echo "";
when you click on $pname , you show the $plink. reclick and hide the content
I have a php script building a table. I need from the php to define a onclick event for each row forwarding to a function.
currently not successful to call the function.
while($row = $result->fetch_assoc()) {
echo "<tr onclick="myFunction(this)" >
<td>".$i."</td>
<td>".$row["dest"]."</td>
<td>".$row["tool"]."</td>
<td>".$row["air_port"]."</td>
<td>".$row["ctry_cd2"]."</td>
<td>".$row["geo"]."</td>
<td>".$row["carrier_td"]."</td>
<td>".$row["required_dd"]."</td>
<td>".$row["carrier_dd"]."</td>
<td>".$row["TPT"]."</td>
<td>".$row["sqf"]."</td>
<td>".$row["Weight_kg"]."</td>
</tr>";
$i++;
}
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
}
echo $selected_sqf;
echo $selected_weight;
?>
<script>
function myFunction(x) {
echo 12;
alert("Row index is: " + x.rowIndex);
}
</script>
I think what you want to do is change
echo "<tr onclick="myFunction(this)" >
to
echo "<tr onclick=\"myFunction(".$i.")\"> or any other ID you expect inside it
You can easy test it with this:
<?php
for ($x = 1; $x <= 3; $x++) {
echo "<button onclick=\"myFunction(".$x.")\">test it</button><br>";
}
?>
<script>
function myFunction(x) {
alert("Row index is: " + x);
}
</script>
onClick won't work this way for dynamically created elements.
You can use delegated event call using jQuery as:
$("table").on("click", "tr", function(){
//Enter your code here
});
i need to know how on earth to get my checkbox value from PHP that is in a loop and also might be in DOM. I have to put that checkbox inside the loop to make it being shown on each row of databases. I tried to call it back using different method but none success. The last part is javascript but i don't have any clue how to do that.
My code for javascript index.php.
function ajaxSearchUpdater(p){
$("#result").show();
var x = $("#search").val();
var y = $("#edulevel").val();
var pagelim = $("#pagefpe").val();
var pagenumber = p;
var checkb = $(".sBorrow").val()
$.ajax({
type:'POST',
url:'userres.php',
data:'q='+x+'&e='+y+'&pagelim='+pagelim+'&pageno='+pagenumber+'&checkb='+checkb,
cache:false,
success:function(data){
$("#result").html(data)
}
});
}
$(document).ready(function(e) {
ajaxSearchUpdater(1); // fires on document.ready
$("#search").keyup(function() {
ajaxSearchUpdater(1); // your function call
});
$("#edulevel").click(function() {
ajaxSearchUpdater(1); // your function call
});
$("#pagefpe").click(function() {
ajaxSearchUpdater(1); // your function call
});
$('.sBorrow').on('change', function(){
var checkBorrow = $(event.target);
var isChecked = $(checkBorrow).is(':checked');
alert("test");
alert(isChecked);
alert('checkbox'+checkborrow.attr('id')+'is checked:'+isChecked);
});
});
$(document).ready(function() {
$('.sBorrow').on('change', function(event) {
var checkbox = $(event.target);
var isChecked = $(checkbox).is(':checked');
alert('checkbox ' + checkbox.attr('id') + ' is checked: ' + isChecked);
});
});
My code for the checkbox in PHP userres.php
if($stmt->rowCount() > 0){
$r=$stmt->fetchAll();
echo "<table class='tablesorter-blackice' id='myTable' style='width:97%; table-border: 1'>";
echo "<thead>";
echo "<tr>";
echo "<th>No.</th>";
echo "<th>No.Matric</th>";
echo "<th>Name</th>";
echo "<th>Programme</th>";
echo "<th>Title</th>";
echo "<th>Thesis Level</th>";
echo "<th>Serial Number</th>";
echo "<th>Availability</th>";
echo "<th>Select book (Max 3)</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
foreach($r as $row){
$sBorrow = $_SESSION['sBorrow'];
echo "<tr align='center'><td>". ($startrow+1) ."</td><td>". $row['matricno'] ."</td><td>". $row['studentname'] ."</td><td>". $row['programme'] ."</td><td>". $row['title'] ."</td><td>". $row['thesis_level'] ."</td><td>". $row['serialno'] ."</td><td>". $row['bavailable'] ."</td><td>
<form method='post'>
<input type='checkbox' name='sBorrow' id='sBorrow' class='sBorrow' value='". $row['serialno'] ."'>
</form></td></tr>";
$startrow++;
//echo $row['education_level'];
}
echo "</tbody>";
echo "</table>";
I don't know what to do since i'm calling that page from ajax and uhh how should i explain this.
You know index.php -> userres.php -> index.php using ajax.
for javascript on the bottom part is what i have done and i dont think its right. I tried to create one other document ready for this checkbox but still even alert not showing up. I'm confused. please help T_T
Sorry, but I have to ask one more question. Google couldn´t help me :(
I try to create a user control management in a CMS.
The problem is that I am completely knew to javascript and jQuery and I have to delete a table row on button click without refreshing the page. The idea is to set the row display:hidden, but I don´t know how to get the id of a row.
Here is my code:
<?php
$abfrage= mysql_query("SELECT * FROM user ORDER BY id asc");
//$ergebnis = mysql_query($abfrage) or die( mysql_error() );
echo "<table>";
echo"<caption>Mitglieder<br></caption>";
echo"<table border=\"1\" style=\"width:300px\">";
echo "<th>ID</th>
<th>Name</th>
<th>Vorname</th>
<th>Rolle</th>
<th>Funktionen</th>";
//loop, um alle Nutzer zu identifizieren
while($row = mysql_fetch_object($abfrage))
{
echo "<tr>";
echo "<td align=center id =",$row->id,">",$row->id,"</td>";
echo "<td align=center>" ,$row->Name,"</td>";
echo "<td align=center>",$row->Vorname,"</td>";
//Vorbelegung
echo "<td align=center><select><option selected = \"selected\">",$row->Rolle,"</option>";
//loop, um alle Rollen zu identifizieren. AKTUELL: doppelte Rollen werden noch doppelt angezeigt. Eventuell Rollen auslaagern
$file = mysql_query("SELECT Rolle FROM user WHERE 1");
while ($role = mysql_fetch_row($file))
{
if ($role[0]!= $row->Rolle) {
echo "<option value=".$role[0].">",$role[0],"</option>";
}
}
echo "</select></td>";
echo "<td align=center><button type = \"button\" onCLick = \"deleteUser()\">Löschen</button></td>";
}
echo "</table>";
?>
<html>
<script type="text/javascript">
function deleteUser() {
alert("And it works");
document.getElementById(id).style.display = 'none'
}
</script>
</html>
The problem is here:
echo "<td align=center id =",$row->id,">",$row->id,"</td>";
Is this the right way to create an id to every row?
And if somebody knows how to realize it, I want to have an "deleting" (Deleting is obviously the wrong word because it is only hidden) animation.
Thank you in advance!
Ps: I know, that I have to change mysl to SQLi :)
I'm not really a FAN of JQuery because makes you forgeth the very basics of Javascript! it really simplyfies some things but... hmm dunno!
maybe this "function" could help you:
function dropRow(rowId) {
try {
var tblResponse= document.getElementById('tblResponse');
var rowCount = tblResponse.rows.length;
for(ix=0; ix < rowCount;ix++) {
var row = tblResponse.rows[ix];
var id = row.cells[0].childNodes[0].id; //The ID of something what identifies the Row
if(id == 'dropRow'+rowId) {
tblResponse.deleteRow(ix);
rowCount--;
ix--;
}
}
}catch(e) {
alert(e);
}
}
You can use the remove function within jQuery.
You will want to give the ID to the <tr> and not a <td> within the row, next your deleteUser function should take the "id" as an argument, and finally you should delete the row from within the deleteUser function. But you will need a way to inform your database that the user has been deleted, perhaps ajax to an API might work but I don't know how you have your system set up.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function deleteUser(id){
$(id).remove();
// Do something to let the server know the user was deleted
}
</script>
</head>
<body>
<?php
$abfrage= mysql_query("SELECT * FROM user ORDER BY id asc");
echo "<table>";
echo "<caption>Mitglieder<br></caption>";
echo "<table border=\"1\" style=\"width:300px\">";
echo "<thead><tr><td>ID</td><td>Name</td><td>Vorname</td><td>Rolle</td><td>Funktionen</td></td><thead>";
while($row = mysql_fetch_object($abfrage)){
echo "<tr id='".$row->id."'>";
echo "<td align='center'>".$row->id."</td>";
echo "<td align='center'>".$row->Name."</td>";
echo "<td align='center'>".$row->Vorname."</td>";
echo "<td align='center'><select><option selected=\"selected\">".$row->Rolle."</option>";
$file = mysql_query("SELECT Rolle FROM user WHERE 1");
while ($role = mysql_fetch_row($file)){
if ($role[0]!= $row->Rolle)
echo "<option value=".$role[0].">".$role[0]."</option>";
}
echo "</select></td>";
echo "<td align='center'><button type = \"button\" onclick = \"deleteUser(".$row->id.")\">Löschen</button></td>";
echo "</tr>"
}
echo "</table>";
?>
</body>
</html>