show/hide with dynamic id out of a sql database - javascript

Submenu Part
<div id="subnavigation">
<?php
$verbindung = mysql_connect("host", "user" , "pw")
or die("Verbindung zur Datenbank konnte nicht hergestellt werden");
mysql_select_db("db") or die ("Datenbank konnte nicht ausgewählt werden");
$sub_instr = mysql_query("SELECT * FROM instrument ORDER BY InstrName");
while($sub = mysql_fetch_assoc($sub_instr))
{?>
<div class="sub-item">
<p>
<button type="button" id="<? echo $sub["InstrID"] ?>" class="submenu-button"><? echo $sub["InstrName"] ?></button>
</p>
</div><?
}?>
</div>
Table Part
<div class="content-item">
<!-- Content-Item 1 !-->
<? $db_instr="SELECT * FROM instrument ORDER BY InstrName" ; $show_instr=m ysql_query($db_instr); while($row=m ysql_fetch_assoc($show_instr)) {?>
<table id="<? echo $row[" InstrID "] ?>" border="1" class="hidden">
<tr>
<th rowspan="6">
<img border="0" src="<? echo " ../SiteAdministration/ControlCenter/Instr/ ".$row["InstrImage "] ?>" alt="<? echo $row[" InstrName "] ?>" width="400" height="400">
</th>
<th colspan="2">Informationen</th>
</tr>
<tr>
<td>Name:</td>
<td>
<? echo $row[ "InstrName"] ?>
</td>
</tr>
<tr>
<td>Klanglage:</td>
<td>
<? echo $row[ "InstrKlang"] ?>
</td>
</tr>
<tr>
<td>Bauschwierigkeit:</td>
<td>
<? echo $row[ "InstrBau"] ?>
</td>
</tr>
<tr>
<td>Materialkosten:</td>
<td>
<? echo $row[ "InstrPreis"] ?>
</td>
</tr>
<tr>
<td>Infotext:</td>
<td>
<? echo $row[ "Infotext"] ?>
</td>
</tr>
</table>
<? }?>
</div>
jQuery
$(document).ready(function ()
{
$('.sub-item p button').click(function ()
{
var buttonID = $(this).attr('id');
alert('table#' + buttonID);
$('table.hidden').hide();
$('table#' + buttonID).show();
});
});
The first code example describes how I generated a list of buttons, with the ID from the sql database. So every button has it's unique ID coming from the fitting database entry.
The second code example describes a table generated from database entries, every table gets a unique ID coming from the fitting database entry.
The third code example should get the ID of the button I click, get the table with the same ID as the button, hide all tables and only show the table with the same ID as the button.
The problem is, that it won't show anyting. It just hides all tables...
Just to let you know, I'm completly new to javascript/jQuery.

ID of an element must be unique(Now you have a table and button with the same id) so use a data-* attribute in the button to store the target element id.
<button type="button" data-target="<? echo $sub["InstrID"] ?>" class="submenu-button"><? echo $sub["InstrName"] ?></button>
then in the click handler
var buttonID = $(this).data('target');

Related

Pass variable to JS and Output it in HTML

if got a dynamic generated table (php foreach) that has an id it. I want to pass the ID of the clicked row to a JS function and output it inside a popup. The Popup also opens by clicking on the selected row.
Input from HTML
<form>
<tr onclick="dialogOeffnen('loslegen-dialog')">
<td>
<span id="id_element"><?php echo $row["ID"];?></span><br>
</td>
<td>
<?php echo $row["Vorname"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname2"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname2"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname3"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname3"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname4"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname4"] . "<br>"; ?>
</td>
<td>
<span id="title_element"><?php echo $row["Titel"];?></span><br>
</td>
<td>
<?php echo $row["Standort"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Klasse"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Beginn"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Abgabe"] . "<br>"; ?>
</td>
<td>
<center>Link</center>
</td>
<td>
<?php echo $row["Genehmigt"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Erstellt"] . "<br>"; ?>
</td>
</tr>
</form>
JS
document.getElementById("dialog_title").innerText = document.getElementById("id_element").innerText;
function dialogOeffnen(dialogId) {
document.getElementById(dialogId).classList.add("sichtbar");
document.getElementById("body-overlay").classList.add("sichtbar");
}
function dialogSchliessen(dialogId) {
document.getElementById(dialogId).classList.remove("sichtbar");
document.getElementById("body-overlay").classList.remove("sichtbar");
}
Output here
<div class="dialog" id="loslegen-dialog">
<a href="#" role="button" class="dialog-schließen-button" onclick="dialogSchliessen('loslegen-dialog')">
<i class="fas fa-times"></i>
</a>
<div class="textarea">
<h1 id="dialog_title"></h1>
My suggestion was, giving the span of the ID an id="id_element" and pass it to JS. However the output does only display the first ID of my table no matter which row im clicking.
When you're dealing with passing data to JavaScript via HTML elements, the best approach is to set a data-* attribute:
<span class="id_element" data-id="<?=$row['ID']?>">this is my ID: <?=$row["ID"]?></span><br>
And in JavaScript you can simply access it via myElement.dataset.id.
In your case, instead of sending a name of an element to your function, you can send the row element itself, and simply search for its child element to get the id element:
<tr onclick="dialogOeffnen(this)">
<td>
<span class="id_element"><?=$row["ID"]?></span><br>
</td>
const elBodyOverlay = document.getElementById("body-overlay"),
elDialogTitle = document.getElementById("dialog_title"),
elLoslegenDialog = document.getELementById("loslegen-dialog");
function dialogOeffnen(elRow) {
//find our "id" element
const elId = elRow.querySelector(".id_element");
//display ID in the popup
elDialogTitle.innerText = elId.textContent;
//open popup
elLoslegenDialog.classList.add("sichtbar");
elBodyOverlay.classList.add("sichtbar");
}
However, a better solution is to simply send the ID itself instead:
<tr onclick="dialogOeffnen('<?=$row["ID"]?>')">
<td>
<span class="id_element"><?=$row["ID"]?></span><br>
</td>
const elBodyOverlay = document.getElementById("body-overlay"),
elDialogTitle = document.getElementById("dialog_title"),
elLoslegenDialog = document.getElementById("loslegen-dialog");
function dialogOeffnen(id) {
//display ID
elDialogTitle.innerText = id;
//open popup
elLoslegenDialog.classList.add("sichtbar");
elBodyOverlay.classList.add("sichtbar");
}
Note that <span> changed attribute id to class, this allows you to use the same name on multiple elements.

My JavaScript pop up modal only works on the first row

First question: I have a dynamic table, with edit icon on every row, when pressing the icon a popup modal should show up. But the popup modal only work on the first row. I tried to determine the problem and I think it’s because of the id "open5", that it’s duplicated and only work for one row which is the first row. How can I make it appear on every row?
Second question: how can I use the book id to determine which book going to be updated, when the user press the button on the update modal?
trackingPage.php
<!-- dynamic table -->
<div class="container">
<table class="_table">
<thead>
<tr>
<th>الغلاف</th>
<th>العنوان</th>
<th>المؤلف</th>
<th>تاريخ البدء</th>
<th>تاريخ الإنتهاء</th>
<th>التقدم</th>
<th width="50px">
</th>
</tr>
</thead>
<tbody id="table_body">
<?php
$query = "SELECT * FROM `tracking` WHERE `username_tracking`='$_SESSION[username]'";
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<td><img style='width:80px; height: 85px; border-radius: 10px; margin: 0.1px;' src="upload/<?php echo $row['cover'] ?>"></td>
<td><?php echo $row["book_name"] ?></td>
<td><?php echo $row["author_name"] ?></td>
<td><?php echo $row["start_date"] ?></td>
<td><?php echo $row["end_date"] ?></td>
<td>
<div class='progress-container'><progress value='<?php echo $row["current_page"] ?>' max='<?php echo $row["page_number"] ?>'></progress></div>
</td>
<td>
<div class='action_container'>
<a href='delete_book.php?book_id=" <?php echo $row["book_id"] ?> "' class='danger' onclick='remove_tr(this)'><i class='fa fa-close'></i></a>
<a class='success' id='open5'>
<i class='fa fa-plus'></i>
</a>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="modal-container-tracking" id="modal_container5">
<div class="modal-tracking">
<form class="book-form" method="post" action="trackingPage.php" enctype="multipart/form-data">
<!-- Modal content -->
<div class="closeIcon-tracking" id="close5">
<span class="close-tracking">×</span>
</div>
<div class="modalContent-tracking">
<h3>تحديثات الكتاب</h3>
<input type="number" name="current_page" placeholder="عدد الصفحات المقروءة" class="pages" min='1' required />
<input name="end_date" placeholder='تاريخ الانتهاء' type="date" class="start-date" required />
<textarea class="review" name="review" placeholder="مراجعة الكتاب"></textarea>
<button href="" name="update_book" class="bn60" style="text-decoration: none;">حدِّث الكتاب</button>
</div>
</form>
</div>
</div>
<script>
//Popup page
const open5 = document.getElementById('open5');
const modal_container5 = document.getElementById('modal_container5');
const close5 = document.getElementById('close5');
open5.addEventListener('click', () => {
modal_container5.classList.add('show');
});
close5.addEventListener('click', () => {
modal_container5.classList.remove('show');
});
//end of Popup page
</script>
This is my DB:
Users table
Tracking table
Your JavaScript code is looking for an element with the ID open5, HTML id's should be unique, but your PHP code renders an element with the same ID for every row, ergo the JS code is satisfied when it finds the first element with ID open5 and therefore all subsequent ones do not get event listeners attached. You have to switch to a class and then attach a listener to each of those links, e.g. something like this:
document.querySelectorAll('tr .success').forEach(function(el, i, nodeList) {
el.addEventListener('click', () => {
modal_container5.classList.add('show');
});
}

How to use PHP loop variable in javascript?

I have run an SQL statement to get all the records I need to show in a HTML table.
I have then run a while loop to display the records from the database. (The code for this is below.)
<table class="projects-table">
<tr>
<th>Complete?</th>
<th>Paid?</th>
<th>Project Name</th>
<th>£ / hr</th>
<th>End Date</th>
<th>Hours Logged</th>
<th><i class="fa fa-trash"></i></th>
</tr>
<?php
$select_id_jobs = mysqli_query($mysqli, "SELECT id FROM users WHERE username='$login_user'");
while($row = mysqli_fetch_array($select_id_jobs)) {
$id_jobs = $row['id'];
}
$select_jobs_with_usrid = mysqli_query($mysqli, "SELECT * FROM jobs WHERE username_id = '$id_jobs';");
while($row = mysqli_fetch_array($select_jobs_with_usrid)) {
?>
<tr id="<?php echo $rowId; ?>">
<td>
<!-- Complete Checkbox -->
<input type="checkbox" id="<?php echo $completeCheck;?>" onclick="compTask();">
</td>
<td>
<!-- Paid checkbox -->
<input type="checkbox" onclick="paidTask()">
</td>
<td>
<?php echo $row['project_title']; ?>
</td>
<td>
<?php echo $row['cost_hour']; ?>
</td>
<td>
<?php echo $row['completion_date']; ?>
</td>
<td>
<?php echo $row['time_spent']; ?>
</td>
<td>
<div class="delete-btn"><a onclick="deleteTask()">DELETE</a></div>
</td>
</tr>
<?php } ?>
</table>
As you can see from the checkbox for completing a task. What I want to do is use javascript so that when the checkbox is checked the text from the other records turns green.
I have included the javascript I am trying to use below. I don't know why but I can't access the inputs ID in order to change the css.
<script>
function compTask() {
if (document.getElementById("<?php echo 'complete-' . $row['id'] ?>").checked == true) {
document.getElementById("<?php echo 'tr' . $row['id']; ?>").style.color = "green";
alert("hello");
} else {
document.getElementById("<?php echo 'tr' . $row['id']; ?>").style.color = "black";
}
}
Okay easy way to do that is to print id as parameter in js function
something like that:
<input type="checkbox" id="<?php echo $completeCheck;?>"
onclick="compTask( '<?php echo $row['id'];?>' );">
and in js function deal with id from parameter:
function compTask(id) {
if (document.getElementById('complete-' + id).checked == true) {
document.getElementById('tr' + id).style.color = "green";
alert("hello");
}
}
Hy,
You need to add id in onclick="deleteTask('<?php echo $row['id']; ?>')">
Now in you function have id:
function deleteTask(id) { console.log(id) }

How to add a new element to a specific cell inside a table?

<?php session_start() ;
include 'databaseConnection.php' ;
$sqlCommand3 = "SELECT * FROM posts ;" ;
$result3 = mysqli_query($conn , $sqlCommand3);
$resultCheck = mysqli_num_rows($result3);
while ($row = mysqli_fetch_array($result3)) { ?>
<tr>
<td style="padding-left: 10px;">
<?php echo $row['poster']; ?>
</td>
<td style="padding-left: 45px;">
<?php echo $row['post_destination']; ?>
</td>
<td style="padding-left: 30px;">
<?php echo $row['post_readyTime']; ?>
</td>
<td style="padding-left: 45px;">
<?php echo $row['post_numberOfPassenger'];?>
</td>
<td style="padding-left: 32px;">
<?php echo $row['post_submitTime']; ?>
</td>
<td>
<form action="riderJoin.php" method="post">
<input type ="hidden" name ="id" value="<?php echo $row['post_id']; ?>" >
<input type =submit class="edit_btn" name = submit value = "Join">
</form>
</td>
<!--<td>
Delete
</td>-->
</tr>
<?php } ?>
</table>
</div>
</div>
<script type="text/javascript">
$("td:nth-child(4):contains('5')").addClass('redWord');
var x = document.getElementsByClassName('edit_btn');
<?php if (isset($_POST['submit'])) { ?>
var i = <?php echo $_SESSION['postId'] ; ?> - 1 ;
$(x[i]).val('Delete').css('background-color','red').css('color','white');
<?php }?>
</script>
How to add a new input (type = "submit" value="delete") with a new action (before the "join" button) whenever the $_POST['submit'] is set? I don't want to add a new input before each "join" button. Instead, I just want to add after a specific "join" button inside a cell when that specific "join" button is clicked. Also, if I click another 'join' button in other cell, a similar effect would happen too. So in the end, after clicking two "join" button, there should be only two delete button each added before the specific clicked "join" buttons. How to solve it ?
Thanks a lot :)

Execute PHP inside SCRIPT TAG

I have a listbox that displays a couple of internships under following format
id - name :
1 - Computer Science
So far, I have create the function addRow in order to update my fields from form.
If I do
alert($montext)
I can display "1 - Computer Science", but I am looking only for the value "1".
I tried :
alert(<?php substr($montext,0,2)?>);
But seems that php inside "script" isn't being executed.
Because following code changes the value in the field:
document.getElementById('ti').value=$montext;
Because I'd like also to execute php code inside the script TAG.
I'm running under Apache.
If you could help me out. Thanks
Find hereby the used code.
<html>
<head>
<script>
function addRow(title,text,description,id) {
$montext=$( "#idStage option:selected" ).text();
alert($montext);
document.getElementById('ti').value=$montext;
/*document.getElementById('te').value=text;
document.getElementById('de').value=description;
document.getElementById('id').value=id;*/
}
function setText(title,text,description,id){
document.getElementById('title').value=title;
document.getElementById('text').value=text;
document.getElementById('description').value=description;
document.getElementById('id').value=id;
}
</script>
</head>
<body>
<?php
include('../admin/connect_db.php');
?>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label class="notBold">Choose the internship you want to update: </label>
<select name="idStage" id="idStage" onChange="addRow()">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
while($stmt->fetch()){
?>
<option id="nostage" value="<?php echo$id;?>" onclick="setText('<?php echo $title ?>',' <?php echo $text ?> ',' <?php echo $description ?>',' <?php echo $id?>');"><?php echo $id." - ".$title;?></option>
<?php
}
$stmt->close();
}
?>
</select>
</td>
<td width="20">
<img src="./Image/exit.png" title="Close" id="closeDelete" class="closeOpt" onclick="closeOpt()" />
</td>
</tr>
</table>
<form method="post" action="modifystage.php">
<table>
<tr>
<td>
<input type = "hidden" id ="id" name="id"/>
</td>
</tr>
<tr>
<td class="label">
<label>Title </label>
<textarea id = "ti" name="ti" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $title;
?>
</textarea>
</td>
</tr>
<tr>
<td class="label">
<label>Desc</label>
<textarea id = "de" name="de" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $description;
?>
</textarea>
</td>
</tr>
<tr>
<td class="label">
<label>Text </label>
<textarea id = "te" name="te" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $text;
?>
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right"colspan="2" class="label">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
</body>
</html>
You don't need to use PHP here. Use the javascript substring function - http://www.w3schools.com/jsref/jsref_substring.asp
For example
alert(montext.substring(0, 2));
Write your <script> on bellow your PHP and try this :
<script>
function addRow(title,text,description,id) {
var montext = $( "#idStage" ).text();
alert(montext);
document.getElementById('ti').value(montext);
/*document.getElementById('te').value=text;
document.getElementById('de').value=description;
document.getElementById('id').value=id;*/
}
function setText(title,text,description,id){
document.getElementById('title').value=title;
document.getElementById('text').value=text;
document.getElementById('description').value=description;
document.getElementById('id').value=id;
}
</script>
If you want to call variable from PHP, don't forget to use echo like this :
alert("<?php echo substr($montext,0,2); ?>");

Categories