We Keep Coding

Bootstrap Modal & MySQL Query using PHP

I am trying to have mysql data displayed on a bootstrap modal and for some reason it is only pulling the ID of the first link that is clicked and not the ID for the row specified on the link clicked to display said modal. (hope that makes sense).
The link to be clicked:
<a data-toggle="modal" data-target="#leadModal" href="?id=<?php echo $id; ?>"><?php echo $f; echo ' '; echo $l; ?></a>
Here is the code that surrounds the link:
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Primary Phone</th>
<th>Date Created</th>
<th>Arrival Date</th>
<th>Departure Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>E-Mail Address</th>
<th>Primary Phone</th>
<th>Date Created</th>
<th>Arrival Date</th>
<th>Departure Date</th>
</tr>
</tfoot>
<tbody>
<?php
$agent = $userRow['userName'];
$query = "SELECT * FROM leads WHERE status='Follow-Up' && agent='$agent'";
$result = mysql_query($query) or die(mysql_error());
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
$f = $line['first'];
$l = $line['last'];
$e = $line['email'];
$p1 = $line['PrimePhone1'];
$p2 = $line['PrimePhone2'];
$p3 = $line['PrimePhone3'];
$a = $line['arrival'];
$d = $line['departure'];
$ag = $line['agent'];
$id = $line['id'];
$dc = $line['datecreated'];
$es = $line['emailsent'];
?>
<tr>
<td><a data-toggle="modal" data-target="#leadModal" href="?id=<?php echo $id; ?>"><?php echo $f; echo ' '; echo $l; ?></a></td>
<td><?php echo $e; ?></td>
<td><?php echo $p1; echo '-'; echo $p2; echo'-'; echo $p3; ?></td>
<td><?php echo $dc; ?></td>
<td><?php echo $a; ?></td>
<td><?php echo $d; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
And here is what I have for code to display the data in the modal:
<!-- Lead Modal-->
<div class="modal fade" id="leadModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"><?php
$id = $_GET["id"];
$query = "SELECT * FROM leads WHERE id=$id";
$result = mysql_query($query);
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>
<h5 class="modal-title" id="exampleModalLabel"><?php echo $line['first']; ?> <?php echo $line['last']; ?>'s Existing Lead</h5><?php } ?>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"><?php
$id = $_GET["id"];
$query = "SELECT * FROM leads WHERE id=$id";
$result = mysql_query($query) or die(mysql_error());
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td>
<table width="750" border="2" align="center" cellpadding="1" cellspacing="0" class="table">
<tr>
<td>Original Agent:</td>
<td><?php echo $line['agent']; ?></td>
</tr>
<?php if ($line['upagent'] == ''){ } else { ?> <tr>
<td>Last Updated By:</td>
<td><?php echo $line['upagent']; ?></td>
</tr><?php } ?>
<tr>
<td width="186">First Name:</td>
<td width="552">
<?php echo $line['first']; ?></td>
</tr>
<?php if ($line['last'] == ''){ } else { ?> <tr>
<td>Last Name:</td>
<td><?php echo $line['last']; ?></td>
</tr><?php } ?>
<?php if ($line['email'] == ''){ } else { ?><tr>
<td>E-Mail Address:</td>
<td><?php echo $line['email']; ?></td>
</tr><?php } ?>
<tr>
<td>Primary Phone:</td>
<td><?php echo $line['PrimePhone1']; echo '-'; echo $line['PrimePhone2']; echo '-'; echo $line['PrimePhone3']; ?></td>
</tr>
<?php if ($line['AltPhone1'] == '' || $line['AltPhone2'] == '' || $line['AltPhone3'] == '') { } else { ?>
<tr>
<td>Alternate Phone:</td>
<td><?php echo $line['AltPhone1']; echo '-'; echo $line['AltPhone2']; echo '-'; echo $line['AltPhone3']; ?></td>
</tr>
<?php } ?>
<tr>
<td>Lead Created:</td>
<td><?php echo $line['datecreated']; ?></td>
</tr>
<?php if($line['emailsent'] == 1){ ?> <tr>
<td>Follow-Up Email Sent:</td>
<td><?php echo $line['followupsent']; ?></td>
</tr>
<?php } ?>
<tr>
<td>Arrival Date:</td>
<td><?php echo $line['arrival']; ?></td>
</tr>
<tr>
<td>Departure Date:</td>
<td><?php echo $line['departure']; ?></td>
</tr>
<?php if ($line['adults'] == ''){ } else { ?>
<tr>
<td>Adults:</td>
<td><?php echo $line['adults']; ?></td>
</tr><?php } ?>
<?php if ($line['child'] == ''){ } else { ?>
<tr>
<td>Children:</td>
<td><?php echo $line['child']; ?></td>
</tr>
<?php } ?>
<?php if ($line['area'] == ''){ } else { ?>
<tr>
<td>Requested Area:</td>
<td><?php echo $line['area']; ?></td>
</tr>
<?php } ?>
<?php if ($line['budget'] == ''){ } else { ?>
<tr>
<td>Budget:</td>
<td><?php echo $line['budget']; ?></td>
</tr>
<?php } ?>
<?php if ($line['suggested'] == ''){ } else { ?>
<tr>
<td>Suggested Properties:</td>
<td><?php echo $line['suggested']; ?></td>
</tr>
<?php } ?>
<?php if ($line['discount'] == ''){ } else { ?>
<tr>
<td>Discount Offered:</td>
<td><?php echo $line['discount']; ?></td>
</tr>
<?php } ?>
<?php if ($line['promo'] == ''){ } else { ?>
<tr>
<td>Promo Code:</td>
<td><?php echo $line['promo']; ?></td>
</tr>
<?php } ?>
<tr>
<td>Lead Status:</td>
<td><?php echo $line['status']; ?></td>
</tr>
<?php if ($line['notes'] == ''){ } else { ?>
<tr>
<td height="85">Additional Notes:</td>
<td><?php echo $line['notes']; ?></td>
</tr>
<?php } ?>
<?php if ($line['resnum'] == ''){ } else { ?>
<tr>
<td>Reservation Number:</td>
<td><?php echo $line['resnum']; ?></td>
</tr><?php } } ?>
</table>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
<a class="btn btn-primary" href="#">Button</a>
</div>
</div>
</div>
</div>
Any help is greatly appreciated.
Thanks,
Scott

What you're asking cannot be done in the current design. Your answer will be in looping your db results to create several modals (messy) or using AJAX to retrieve the modal data based on the link ID. A good example is in the answer here: Using Jquery Ajax to retrieve data from Mysql

PHP- insert innerhtml with javascript dynamically in each row of table

InnerHtml not working in this case, i want to do something like this:
<table width="100%" border="0" id="table2">
<?php
include("connection.php");
$sql=mysql_query("select* from b1");
while($res=mysql_fetch_array($sql))
{
$img=$res["img"];
$url=$res["url"];
?>
<tr>
<td><script>document.body.innerHTML="<a href='"+<?php echo '$url' ; ?>.value+"'><img src='"+<?php echo '$img' ; ?>+"' / ></a>" ;</script></td>
</tr>
<?php
}
?>
</table>

Why don't you just do this?
<table width="100%" border="0" id="table2">
<?php
include("connection.php");
$sql=mysql_query("select* from b1");
while($res=mysql_fetch_array($sql))
{
$img=$res["img"];
$url=$res["url"];
?>
<tr>
<td><img src="<?php echo $img; ?>" / ></td>
</tr>
<?php
}
?>
</table>

How to redesign a table when there isn't some data

I have a table that shows some data from database. I want if there isn't data in some <td> , the column from next row, to be displayed in its place. This is what I mean:
If I have this kind of table:
When there is no data for example for $data['created_at'], it should be displayed $data['due_date'] in its place.
How could I do that?
<table>
<tr>
<td colspan="3">
<?php if(!empty($data['created_at'])){ ?>
<strong><?php echo "Created Date:";?>:</strong> <?php echo $data['created_at']; ?>
<?php } ?>
</td>
<td colspan="3">
<?php if(!empty($data['username'])){ ?>
<strong><?php echo "Username:";?>:</strong> <?php echo $data['username']; ?>
<?php } ?>
</td>
</tr>
<tr>
<td colspan="3">
<?php if(!empty($data['due_date'])){ ?>
<strong><?php echo "Date delivery:";?>:</strong> <?php echo $data['due_date']; ?>
<?php } ?>
</td>
<td colspan="3">
<?php if(!empty($data['copmany'])){ ?>
<strong><?php echo "Company:";?>:</strong> <?php echo $data['copmany']; ?>
<?php } ?>
</td>
</tr>
</table>

Are you looking to just omit a row if the result is empty? Simply change the place of your if statement to encompass the td
<table>
<tr>
<?php if(!empty($data['created_at'])){ ?>
<td colspan="3">
<strong><?php echo "Created Date:";?>:</strong> <?php echo $data['created_at']; ?>
</td>
<?php } ?>
<?php if(!empty($data['username'])){ ?>
<td colspan="3">
<strong><?php echo "Username:";?>:</strong> <?php echo $data['username']; ?>
</td>
<?php } ?>
</tr>
<tr>
<?php if(!empty($data['due_date'])){ ?>
<td colspan="3">
<strong><?php echo "Date delivery:";?>:</strong> <?php echo $data['due_date']; ?>
</td>
<?php } ?>
<?php if(!empty($data['copmany'])){ ?>
<td colspan="3">
<strong><?php echo "Company:";?>:</strong> <?php echo $data['copmany']; ?>
</td>
<?php } ?>
</tr>
</table>

Css works on dreamweaver but not on chrome

i'm trying to make a table with html and php code which displays dynamically data, above that i use css for this table, and when i use live mode on dreamweaver it displays perfectly the table with css but empty, but not on chrome or whatever is the web browser, and actually i try to integrate the whole html and css in a ready template.
for the information this is the html code that i used:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="background">Placez ici le contenu de class "background"
<center>
<h1>VOS SOUMISSIONS</h1>
<table width="1327" height="128" border="2" cellpadding="20" cellspacing="10">
<tr>
<th width="208">SENDER</th>
<th width="258">TYPE</th>
<th width="258">TITRE</th>
<th width="290">AUTEUR</th>
<th width="289">ABSTRACT</th>
<th width="289">KEYWORDS</th>
<th width="289">DATE</th>
<th width="289">FICHIER</th>
</tr>
<?php
//On recupere les identifiants, les pseudos et les emails des utilisateurs
$result = mysql_query("SELECT * FROM manusrit where id='".$_SESSION["id"]."'");
while($row = mysql_fetch_array($result))
{
?>
<tr>
<td class="left"><?php echo $row['sender']; ?></td>
<td class="left"><?php echo $row['type']; ?></td>
<td class="left"><?php echo htmlentities($row['titre'], ENT_QUOTES, 'UTF-8'); ?></td>
<td class="left"><?php echo htmlentities($row['auteur'], ENT_QUOTES, 'UTF-8'); ?></td>
<td class="left"><?php echo $row['abstract']; ?></td>
<td class="left"><?php echo $row['keywords']; ?></td>
<td class="left"><?php echo $row['date']; ?></td>
<td class="left"><?php echo $row['file']; ?></td>
<td class="left"><form action="/Application/soumissions/<?php echo $row['file']; ?>" method="post">
<input type="submit" value="Download" />
</form></td>
<?php
}
?>
</tr>
</table>
<p> </p><h2><strong>LES AUTRES SOUMISSIONS</strong></h2>';
<table width="1346" height="128" border="2" cellpadding="20" cellspacing="10">
<tr>
<th width="208">SENDER</th>
<th width="258">TYPE</th>
<th width="258">TITRE</th>
<th width="290">AUTEUR</th>
<th width="289">ABSTRACT</th>
<th width="289">KEYWORDS</th>
<th width="289">DATE</th>
<th width="289">FICHIER</th>
<th width="41">ETAT</th>
<th width="84">DECISION</th>
<th width="101">RAPPORT</th>
<th width="120">TELECHARGER</th>
</tr>
<?php
//On recupere les identifiants, les pseudos et les emails des utilisateurs
$req = mysql_query("SELECT * FROM manusrit where id2='1' AND id3='".$_SESSION["id3"]."'");
while (($rows=mysql_fetch_array($req)))
{
?>
<tr>
<td class="left"><?php echo $rows['sender']; ?></td>
<td class="left"><?php echo $rows['type']; ?></a></td>
<td class="left"><?php echo htmlentities($rows['titre'], ENT_QUOTES, 'UTF-8'); ?></td>
<td class="left"><?php echo htmlentities($rows['auteur'], ENT_QUOTES, 'UTF-8'); ?></a></td>
<td class="left"><?php echo $rows['abstract']; ?></td>
<td class="left"><?php echo $rows['keywords']; ?></td>
<td class="left"><?php echo $rows['date']; ?></td>
<td class="left"><?php echo $rows['file']; ?></td>
<td class="left"><?php echo $rows['etat']; ?></td>
<td class="left"><?php echo $rows['decision']; ?></td>
<td class="left"><form action="/Application/rapport/<?php echo $row['rapport']; ?>" method="post">
<input type="submit" value="Voir le rapport" />
</form></td>
<td class="left"><form action="/Application/soumissions/<?php echo $rows['file']; ?>" method="post">
<input type="submit" value="Download" />
</form></td>
<?php
}
?>
</tr>
</table>
</center>
</div>
</body>
</html>
And this is the css code:
.background {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
font-style: italic;
color: #FFF;
background-color: #666;
background-repeat: repeat;
width: 1327px;
}
Thnx for your help!

Presuming that the html provided is your full document, you don't have the css file included. You will need to add
<link rel="stylesheet" type="text/css" href="style.css">
before the end of the head tag. Also the href attribute must be whatever your css file is actually named.

evenment onclick javascript

I have a problem with my code
<tr>
<td id="<?php echo; $id ?>" onclick="addrow(?php echo $id; ?>)">...</td>
</tr>
<tr id="<?php echo $id; ?>" class="ndisplay">...</tr>
<tr id="<?php echo $id; ?>" class="ndisplay">...</tr>
<tr id="<?php echo $id; ?>" class="ndisplay">...</tr>
css:
.ndisplay {
display: none;
}
JS:
function addrow($id) {
var id = document.getElementById($id);
if (id.hasClass("ndisplay")) {
id.removeClass("ndisplay");
} else {
id.addClass("ndisplay");
}
}
That's work but just for the first tr ...
The problem it's $id is the same value for each tr but i'm forced to use the same id for each <tr>
I have testing with a div between the tr but it doesn't work.

The person who forced to use same ID for all tr elements, say him/her to purchase a beginners book for html and js, in other words it is not valid in HTML specification, you will have to use same classes rather then same id's , :)

At least, with $id1, $id2, $id3, $id4 being different :
<tr>
<td id="<?php echo; $id1 ?>" onclick="addrow(?php echo $id1; ?>)">...</td>
</tr>
<tr id="<?php echo $id2; ?>" class="ndisplay">...</tr>
<tr id="<?php echo $id3; ?>" class="ndisplay">...</tr>
<tr id="<?php echo $id4; ?>" class="ndisplay">...</tr>

try this it should work (Open to corrections)
<tr id="1" onClick="addrow()" class="ndisplay">...</tr>
<tr id="2" class="ndisplay">...</tr>
<tr id="3" class="ndisplay">...</tr>
<tr id="4" class="ndisplay">...</tr>
<style type="text/css">
.ndisplay {
display:none;
}
</style>
<script>
function addrow(e) {
var div = e.target;
if(div.hasClass("ndisplay")) {
div.removeClass("ndisplay");
}
else {
div.addClass("ndisplay");
}
}
</script>