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');
});
}
Related
<?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 :)
I have more and more problems :(
I try get a php table witch i use datatable.js for it to reload data without refresh page.
Data was load true jq with load:
$(document).ready(function () {
data_th1();
//data tablice
function data_th1(){
setInterval(function () {
$('#tablica_home_1').load('ajax/data.php')
});
}
});
And data is loaded and i can refresh it with function data_th1() BUT when data was loaded i have one + button for open modal to add some coments, ehh problem was that modal after load data true jq not work?
HTML CODE WHEN DATA WAS LOAD (index.php)
<div id="tablica_home_1"></div>
SCRIPT IN INDEX.PHP FOR LOAD
<script>
$(document).ready(function () {
data_th1();
//data tablice
function data_th1(){
setInterval(function () {
$('#tablica_home_1').load('ajax/data.php')
});
}
});
</script>
DATA.PHP
<?php
require_once("../includes/inc_files.php");
//tablica poziva
$sql7 = "SELECT * FROM svi_pozivi WHERE calltype='Outbound' AND status = 'NO ANSWER' OR calltype='Inbound' AND status = 'NO ANSWER' ORDER BY datum DESC";
$result7 = $database->query($sql7);
?>
<table id="example" class="display responsive-table datatable-example">
<thead>
<tr style="text-transform: uppercase;">
<th>ID</th>
<th>Pozivatelj</th>
<th>Primatelj</th>
<th>Datum</th>
<th>Status poziva</th>
<th>Komentar</th>
<th>Obrada</th>
<th>Funkcije</th>
</tr>
</thead>
<tbody>
<?php while ($row7 = $database->fetch_array($result7)){ ?>
<tr>
<td><?php echo $row7['id']; ?></td>
<td>
<?php
if ($row7['calltype'] == 'Outbound'){
echo $row7['src'];
}
else{
echo realbroj_ul($row7['src']);
echo ' <a href="index.php?stranica=imenik-add&broj=realbroj_iz($row7["dst"])" alt="Dodaj u imenik"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
?></td>
<td>
<?php
if ($row7['calltype'] == 'Outbound'){
echo realbroj_iz($row7['dst']);
echo '<a href="index.php?stranica=imenik-add&broj=realbroj_iz($row7["dst"])" alt="Dodaj u imenik"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
else{
echo $row7['dst'];
}
?></td>
<td><?php echo realdatum($row7['datum']); ?></td>
<td><?php echo realstatus($row7['status']); ?></td>
<td>
<?php
//komentar
$sql8 = "SELECT * FROM komentari WHERE call_id = '$row7[id]'";
$result8 = $database->query($sql8);
$row8 = $database->fetch_array($result8);
if ($row8['id'] != ''){
echo $row8['komentar'];
}
else{
echo 'Nema komentara';
echo '<a data-toggle="modal" class="modal-trigger" data-id="'.$row7["id"].'" href="#komentarM" alt="Kreiraj Komentar"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
?></td>
<td><?php echo statuskomentara($row7['k_status']);?></td>
<td>7</td>
</tr>
<?php } ?>
</tbody>
</table>
AND MODAL IN INDEX.PHP
<div id="komentarM" class="modal bottom-sheet">
<div class="modal-content">
<h4>KOMENTAR</h4>
<p>Dodajte svoj komentar</p>
</div>
<form id="koment_post">
<input type="hidden" name="id" value="">
<input type="hidden" name="agent" value="<?php echo $ime2; ?>">
<input style="width=80%;" type="text" name="komentar" placeholder="Unesite Vaš komentar...">
<div class="modal-footer">
<button type="submit" class=" modal-action modal-close waves-effect waves-green btn-flat">SPREMI</button>
</div>
</form>
</div>
ONE AGAIN: I have in data.php table with modal call a href, but when i call data.php with jq laod function modal was not work. I need to fix that modal show,
I am not using modal with ajax load, i am searching a lot of site and this problem was not solved.
Maybe i'm too late, but, just in case for you or another person who may want to know how to fix this:
The explanation for this, it's in here
I've used the element BODY to access my element, like this:
$('body').on('click', '.Class',function () {});
$('body').on('click', '#Id',function () {});
This are a few examples, but it worked for me. I hope it'll help u.
this is code of search.php. i want to take search by date from the input box as below.
<form action="visitor-print.php">
<div class="col-sm-3 text-center"><h3>Date</h3>
<input type="text" class="form-control" name="dat" placeholder="Enter Date">
<p class="help-block">Month Format 1,2,3,....29,30..</p>
<button class="btn btn-default"><span>Submit</span></button>
</div>
</form>
this is my visitor-print.php code where i get undefined index error on dat (which is from the other page)
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db('visitor_list');
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$sql = "SELECT * FROM list1 WHERE d1 = '". $_POST["dat"] . "' ";
$retval = mysql_query( $sql,$conn ) or die("Error: ".mysql_error($conn));
?>
<div class="container">
<h3 class="text-center">User Feed-Back Details</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Visitor Name</th>
<th width="10%">Address</th>
<th width="10%">Area to Visit</th>
<th width="10%">Phone No.</th>
<th width="20%">Want to meet with </th>
<th width="50%">Purpose of meeting</th>
</tr>
<?php
while($row = mysql_fetch_array($retval,MYSQLI_BOTH))
{
?>
<tr>
<td><?php echo $row['nm']; ?></td>
<td><?php echo $row['add1']; ?></td>
<td><?php echo $row['area_vis']; ?></td>
<td><?php echo $row['y1']; ?></td>
<td><?php echo $row['app_ty']; ?></td>
<td><?php echo $row['no_per']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div align="center">
<button name="create_excel" id="create_excel" class="btn btn-success">Create Excel File</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
});
</script>
Problem:
Notice: Undefined index: dat in D:\wamp\www\radissun visitor\visitor-print.php on line 12
and is not showing data from mysql
The answer you are looking for: You are using $_POST - which is just for forms which have method="post". Default method is GET - so your variables are $_GET[]. You can either set the method parameter in the html to POST, or you change your PHP code to GET.
But I must point out, that your code is not usable for productive environments, as it is vulnerable to SQL Injection. See http://www.w3schools.com/sql/sql_injection.asp
MISSING METHOD ON FORM METHOD="POST"
NOTE: IF YOU USE METHOD="POST" YOU CAN GET VALUE BY $_POST['dat']; IF YOUR NOT USING METHOD ATTRIBUTE .FORM JUST SUBMITED AS GET METHOD YOU CAN GET BY $_GET['dat'];
<form action="visitor-print.php" METHOD="POST" >
MISSING FORM SUBMIT
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT" >
(OR)
ADD TYPE="SUBMIT" TO BUTTON
<button TYPE="SUBMIT" class="btn btn-default"><span>Submit</span></button>
HTML
while($row=mysql_fetch_array($result_pag_data)) {
$ad++;
$sql1=mysql_query("select *from company where com_id='$row[com_id]'");
$row1=mysql_fetch_array($sql1);
?>
<tr>
<input type="hidden" id="comid" name="comid" value="<?php echo $row1[com_id];?>"/>
<tr>
<td><img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile"></td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details"><?php if($row1['mobile1']!='') { ?> <a id="showmobile<?php echo $row1[com_id];?>">View Mobile Number</a> <span id="shwmb<?php echo $row1[com_id];?>" style="display:none"><?php echo $row1['mobile1'];}else{ echo 'Not Available';}?></td>
</tr>
}
Javascript
<script>
$(function () {
var comid = $('#comid').val();
$("#showmobile" + comid).click(function() {
$("#shwmb" + comid).show();
$("#shwmb" + comid).hide();
});
});
</script>
Now I want to show the mobile number when the customer clicks on View Mobile Number. It currently only works on the first viewed company, not for subsequent companies.
When I change the event handling to listen to the class instead of the id, clicking on any one company's View Mobile Number will display the mobile numbers of all companies on the page.
Neither solution is working properly. What am I doing wrong, and how do I make this work?
Change your code as like below:
<?php
$ad = 0;
while ($row = mysql_fetch_array($result_pag_data)) {
$ad++;
$sql1 = mysql_query("select *from company where com_id='$row[com_id]'");
$row1 = mysql_fetch_array($sql1);
?>
<tr>
<input type="hidden" id="comid" name="comid" value="<?php echo $row1[com_id]; ?>"/>
<tr>
<td><img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile"></td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details">
<?php if ($row1['mobile1'] != '') { ?>
<a id="showmobile<?php echo $row1[com_id]; ?>" onclick="return showmobile(<?php echo $row1[com_id]; ?>)">View Mobile Number</a>
<span id="shwmb<?php echo $row1[com_id]; ?>" style="display:none">
<?php echo $row1['mobile1']; ?>
</span>
<?php
} else {
echo 'Not Available';
}
?>
</td>
</tr>
<?php }
?>
<script>
function showmobile(id) {
if($("#shwmb" + id).css('display') == 'none') {
$("#shwmb" + id).show();
}else {
$("#shwmb" + id).hide();
}
}
</script>
You have to put unique value in the ID or CLASS of the line.
<input type="hidden" id="comid<?php echo $row['ID']?>" name="comid" value="<?php echo $row1[com_id];?>"/>
and after that in the javascript code you just specify the id along with the id_name and id_value.
This might work for your purpose:
while($row=mysql_fetch_array($result_page_data)) {
$ad++;
$sql1=mysql_query("select *from company where com_id='$row[com_id]'");
$row1=mysql_fetch_array($sql1);
?>
<tr>
<td>
<input type="hidden" id="input-<?php echo $row1[com_id];?>" name="input-<?php echo $row1[com_id];?>" value="<?php echo $row1[com_id];?>"/>
<img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile">
</td>
<td class="comm-details"><strong>Mobile</strong></td>
<td align="center">:</td>
<td class="comm-details"><?php if($row1['mobile1']!='') { ?> <a id="showmobile<?php echo $row1[com_id];?>" class="showmobile">View Mobile Number</a> <span id="shwmb<?php echo $row1[com_id];?>" style="display:none"><?php echo $row1['mobile1'];}else{ echo 'Not Available';}?></td>
</tr>
}
<script>
$(function () {
$(".showmobile").click(function() {
var comid = $(this).attr("id").replace("showmobile","");
$("#shwmb" + comid).toggle();
});
});
</script>
The first change is to use $row1[com_id] in the id and name attributes for the hidden input field. This will allow the hidden fields to be separate from one another, as id has to be unique on a page; name should also be unique.
Next, a class was added to the showmobile link, so that we can install a single class-level click handler. The click handler will extract the com_id from the showmobile element and use it to change the visibility of the shwmb element, using jQuery toggle.
Some light restructuring has been done and some significant reformatting. The hidden input field was added to the first td element, so that it doesn't interfere with the structure of the table.
Also, the $result_page_data variable name was corrected.
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');