Creating Bootstrap Accordionin in a while loop - php

I'm trying to create a dynamic content field where each data is in a separate accordion and am having a bit of trouble.
Result is the first accordion only works even i am having different id's for each accordion.
Can anyone help me on this
while ($row = mysqli_fetch_assoc($sql_result))
{
$i=1;
?>
<div class="container-fluid border">
<table width=100%>
<tr>
<td><img src="/images/vehicles/<?php echo strtolower($row['vtype']); ?>.jpg" width="75" heigth="75" alt=""></td>
<td align="center"><b><?php echo $row['vtype']; ?> A/C </b> - <?php echo $row['nos']; ?> Seater<br>
<b>₹ <?php if($duration=='8hrs') { $basefare=$row['8hrs']; } elseif($duration=='10hrs') { $basefare=$row['10hrs']; } else { $basefare=$row['12hrs']; } $base=$basefare+($basefare*5/100); echo number_format($base,2,".",","); ?> </b></td>
<td align="right">Book</td>
</tr>
</table>
</div>
<div id="accordionfare<?php echo $i; ?>">
<div class="card">
<div class="card-header" align="right">
<a class="card-link" data-toggle="collapse" href="#collapsefare<?php echo $i; ?>">Fare Details</a>
</div>
<div id="collapsefare<?php echo $i; ?>" class="collapse" data-parent="#accordionfare<?php echo $i; ?>">
<div class="card-body">
<p align="center"><b>Fare Details: </b>Base Fare: ₹ <?php echo number_format($basefare,2,".",","); ?> | GST # 5%: ₹ <?php echo number_format(round($base*5/100),2,".",","); ?> | Extra Hr Fare: ₹ <?php echo number_format($row['extrahr'],2,".",","); ?>/Hr | Extra Km Fare: ₹ <?php echo number_format($row['extrakm'],2,".",","); ?>/Km</p>
<?php $i++; ?>
</div>
</div>
</div>
</div><br>
<?php
}
?>

I've tested your code replacing your data and it works as expected. Check you PHP error log in case there are errors which might brake the loop in some way.
Here is a sandbox where you can Execute my test code and check the HTML result
P.S. You must have accordions with different ids in order to open each one separately.

Related

Limit maximum number of <td> elements of a table per line

I want to build a page where I need to show all the members from a database. But when I print them, it shows them on the same line, no matter how much the members are. And I want to limit the number of members per line to 5. How can I do this?
Thank you in advance!
<table id="members-table">
<tr>
<?php
$queryContent = "SELECT * FROM users WHERE member='yes'";
$result = mysqli_query($db_connection, $queryContent);
while($row = mysqli_fetch_assoc($result)) {
echo '<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>' .$row['ShownName']. '</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</td>';
}
?>
First, you should consider not using table elements to align your content. This is an outdated practice and not recommended. Check out this StackOverflow question for some great advice on the subject. In short, using tables for laying out your page contents comes from the earlier days of the web before we had things like flexbox and grid layouts.
To answer your question, though, you should implement a $loop_count variable, and echo "</tr><tr>" each time $loop_count > 0 AND $loop_count % 5 == 0.
You have to write a <tr> tag on each 5 loops, except for the first loop.
Add $num=0. Then, in the loop, check if $num is greater than 1 (not for the first loop), and the modulo % with five is zero.
<table id="members-table"><tr>
<?php
$queryContent = "SELECT * FROM users WHERE member='yes'";
$result = mysqli_query($db_connection, $queryContent);
$num = 0;
while($row = mysqli_fetch_assoc($result)) {
if ($num++ % 5 == 0 && $num > 1) echo '</tr><tr>'; // Change is here
echo '<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>' .$row['ShownName']. '</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</td>';
}
?></tr></table>
The devil is in the detail on this one. Because you are building a table (which must have an equal number of columns in each row) you need to write conditionals to build a complete structure.
First, a set of conditionals to separate the data into rows of 5 cells
Second, a conditional after the loop to ensure that the final table row contains the correct number of cells.
Code: (Demo)
$resultset=[
['ShownName'=>'A'],
['ShownName'=>'B'],
['ShownName'=>'C'],
['ShownName'=>'D'],
['ShownName'=>'E'],
['ShownName'=>'F'],
['ShownName'=>'G']
];
echo "<table>";
$counter=0;
foreach($resultset as $row){ // you while loop
if($counter%5==0){
if($counter){
echo "</tr>";
}
echo "<tr>"; // start new row
}
echo "<td>";
echo "<div class=\"card\">";
echo "<img src=\"img/img_avatar2.png\" alt=\"Avatar\">";
echo "<div class=\"container\">";
echo "<h4><b>{$row['ShownName']}</b></h4>";
echo "<p style=\"font-family:Roboto;\">Architect & Engineer</p>";
echo "</div>";
echo "</div>";
echo "</td>";
++$counter;
}
if($mod=$counter%5){
$colspan=5-$mod;
echo "<td",($colspan>1?" colspan=\"$colspan\"":""),"></td>"; // complete the row with appropriately sized cell
}
echo "</tr>";
echo "</table>";
Output:
<table>
<tr>
<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>A</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</div>
</td>
<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>B</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</div>
</td>
<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>C</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</div>
</td>
<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>D</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</div>
</td>
<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>E</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>F</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</div>
</td>
<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>G</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</div>
</td>
<td colspan="3"></td>
</tr>
</table>
Using the mod operator (%) will do the trick. This will work and not produce extra unnecessary TR's or /TR's (with the exception of a single empty row if the data is blank):
<table id="members-table">
<?php
$queryContent = "SELECT * FROM users WHERE member='yes'";
$result = mysqli_query($db_connection, $queryContent);
$i = 0;
while($row = mysqli_fetch_assoc($result)) {
if ($i % 5 == 0) {
echo "<tr>";
}
echo '<td>
<div class="card">
<img src="img/img_avatar2.png" alt="Avatar">
<div class="container">
<h4><b>' .$row['ShownName']. '</b></h4>
<p style="font-family:Roboto;">Architect & Engineer</p>
</div>
</td>';
if ($i % 5 == 4 || $i - 1 == count($cols)) {
echo "</tr>";
}
$i++;
}
?>

Display top 10 results in codeigniter and display 1st, 2nd and 3rd top values

I am getting output page like this (Shown in below screenshot)
I want gold image to be display to top scorers and silver to second topper and bronze to others
I am using code like this
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i> ScoreBoard</h3>
</div>
<div class="panel-body">
<div class="col-sm-12">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<tbody>
<?php
$total_exams1 = $this->db->select('title_id')
->from('exam_title')
->count_all_results();
$b1 = $this->db->select('*, (sum(result.result_percent)) / '.$total_exams1.' as percent')
->group_by('users.user_id')
->from('result')
->order_by("percent", "desc" )
->join('users', 'users.user_id = result.user_id', 'left')
->join('states', 'users.state = states.state_id', 'left')
->join('user_zone', 'users.user_zone = user_zone.user_zone_id', 'left')
->limit("10")
->get()
->result();
$j = 1;
foreach($b1 as $z) {
?>
<tr class="<?= ($i & 1) ? 'even' : 'odd'; ?>">
<td style="width:5%;"><?php echo $j; ?></td>
<?php if($z->image == "") { ?>
<td class="hidden-x" style="width:35%;">
<img class="userImgTop10n" src="<?php echo base_url('user-avatar/avatar-placeholder.jpg') ?>" alt="Profile Picture" />
<div class="image_righ">
<b><?php echo $z->user_name; ?></b><br>
<?php echo $z->state_name; ?><br>
<?php echo $z->user_zone_name; ?>
</div>
</td>
<?php } else { ?>
<td class="hidden-x" >
<img class="userImgTop10n" src="<?php echo base_url("user-avatar/".$z->image); ?>" alt="Profile Picture" />
<div class="image_righ">
<b><?php echo $z->user_name; ?></b><br>
<?php echo $z->state_name; ?><br>
<?php echo $z->user_zone_name; ?>
</div>
</td>
<?php } ?>
<?php
$exams_attended1 = $this->db->select('title_id')
->where('user_id', $z->user_id)
->from('result')
->group_by('user_id')
->count_all_results();
?>
<td class="hidden-xxs"><b><?php echo $exams_attended1; ?></b><br>Exams Attended</td>
<td class="hidden-xxs"><b><?php echo $total_exams1; ?></b><br>Total Exams</td>
<td class="hidden-x">
<b><?php echo round($z->percent, 2); ?> %</b><br>Avg Result
<div class="badge_righ">
<?php if($j == 1) { ?>
<span><img class="userBadge" src="<?php echo base_url('Badge_Gold.png') ?>" alt="Badge Gold" /></span>
<?php }
if($j == 2) { ?>
<span><img class="userBadge" src="<?php echo base_url('Badge_Silver.png') ?>" alt="Badge Gold" /></span>
<?php } if($j > 2) { ?>
<span><img class="userBadge" src="<?php echo base_url('Badge_Bronze.png') ?>" alt="Badge Gold" /></span>
<?php } ?>
</div>
</td>
</tr>
<?php
$j++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
in the above screenshot first 3 rows should be gold images (because of same marks).
You can create a temporary array containing unique reverse sorted average scores. Then, when giving medals, instead of checking for places (1st, 2nd, 3rd...), check if the score matches the 1st, 2nd or 3rd score from that temporary array.
For the screenshot you posted, the array would look like:
$scores = [92.5, 90, 87.5];
and the gold medals would be all the scores with the score of $scores[0], the silver ones are $scores[1] and the bronzes would be $scores[2] (unless you want everyone else to get bronze).

Using a PHP foreach - how to create individual divs per each row?

I have a query that selects all the information from a database table and puts it into an array. I then use a PHP foreach statement to display all that in a uniform manner. It's the left table here to get a sense of what I'm talking about.
What I want to do is to make one of the divs (it normally just appears repeatedly under the same name) to have a unique name for each sumbission row. For example, instead of the "response" divs all just being called response, they are "response1", "response2", and so on. Is there any way to do this? (code below)
Any help would be greatly appreciated.
Here's where I call the info from the query:
<?php foreach($images as $image) { ?>
<table id="front_pgs">
<tr>
<td id="front_text">
<div id="imagetitle">
<?php echo $image['name'];?>
</div>
<div id="submission_info">
submitted by <?php echo $image['submitter'];?>
</div>
<div id="ratingcontainer">
<form id="ratingform">
<input name="vote" type="button" onclick="getVote('<?php echo $image['filename'];?>')" value='Like' id="likebutton"/>
<input name="dislike" type="button" value='Disike' id="dislikebutton"/>
</form>
<div id="rate_count">
<div id="response">
<?php echo $image['rating'];?>
</div>
</div>
</div>
</td>
<td id="front_pg_img" valign="center" align="center">
<a onClick="switchImageUrl('<?php echo $image['filename']; ?>', '<?php echo $image['width']; ?>', '<?php echo $image['height']; ?>')"><img src="<?php echo $image['filename'];?>" id="front_pg_thumbnail"/></a>
</td>
</tr>
</table>
<?php } ?>
You can do this by two ways I will show you now
1- add the row id if exists to the id value or any unique column
<div id="response<?php echo $image['id']; ?>">
<?php echo $image['rating'];?>
</div>
2- make a counter
<?php
$i= 1;
foreach($images as $image) { ?>
<table id="front_pgs">
<tr>
<td id="front_text">
<div id="imagetitle">
<?php echo $image['name'];?>
</div>
<div id="submission_info">
submitted by <?php echo $image['submitter'];?>
</div>
<div id="ratingcontainer">
<form id="ratingform">
<input name="vote" type="button" onclick="getVote('<?php echo $image['filename'];?>')" value='Like' id="likebutton"/>
<input name="dislike" type="button" value='Disike' id="dislikebutton"/>
</form>
<div id="rate_count">
<div id="response<?php echo $i; ?>">
<?php echo $image['rating'];?>
</div>
</div>
</div>
</td>
<td id="front_pg_img" valign="center" align="center">
<a onClick="switchImageUrl('<?php echo $image['filename']; ?>', '<?php echo $image['width']; ?>', '<?php echo $image['height']; ?>')"><img src="<?php echo $image['filename'];?>" id="front_pg_thumbnail"/></a>
</td>
</tr>
</table>
<?php
$i++; //increment the $i each iteration
} ?>
<?php $i = 1; foreach($images as $image) { ?>
<table id="front_pgs">
<tr>
<td id="front_text">
<div id="imagetitle">
<?php echo $image['name'];?>
</div>
<div id="submission_info">
submitted by <?php echo $image['submitter'];?>
</div>
<div id="ratingcontainer">
<form id="ratingform">
<input name="vote" type="button" onclick="getVote('<?php echo $image['filename'];?>')" value='Like' id="likebutton"/>
<input name="dislike" type="button" value='Disike' id="dislikebutton"/>
</form>
<div id="rate_count">
<div id="response<?php echo $i; ?>">
<?php echo $image['rating'];?>
</div>
</div>
</div>
</td>
<td id="front_pg_img" valign="center" align="center">
<a onClick="switchImageUrl('<?php echo $image['filename']; ?>', '<?php echo $image['width']; ?>', '<?php echo $image['height']; ?>')"><img src="<?php echo $image['filename'];?>" id="front_pg_thumbnail"/></a>
</td>
</tr>
</table>
<?php $i ++; } ?>
Notice the $i = 1 before the foreach as well as the $i ++ before the closing }. Also, echo $i in the response div id.

How to make each row of array display individually on another page?

I can not figure out how to make one row of my table display on another page. What I want to do make each individual row printable. Here is a screen shot.
Here is the php used to display the table (coupon_index.php):
<?php include template("header");?>
<div id="bdw" class="bdw">
<div id="bd" class="cf">
<div id="coupons">
<div class="dashboard" id="dashboard">
<ul><?php echo current_account('/coupon/index.php'); ?></ul>
</div>
<div id="content" class="coupons-box clear">
<div class="box clear">
<div class="box-top"></div>
<div class="box-content">
<div class="head">
<h2>My <?php echo $INI['system']['couponname']; ?></h2>
<ul class="filter">
<li class="label">Category: </li>
<?php echo current_coupon_sub('index'); ?>
</ul>
</div>
<div class="sect">
<?php if($selector=='index'&&!$coupons){?>
<div class="notice">There is no usable <?php echo $INI['system']['couponname']; ?></div>
<?php }?>
<table id="orders-list" cellspacing="0" cellpadding="0" border="0" class="coupons-table">
<tr><th width="300">Deal Item</th><th width="100" nowrap>Voucher's Number</th><th width="60" nowrap>Voucher's Password</th><th width="100" nowrap>Valid Till</th><th width="40">Email Voucher</th></tr>
<?php if(is_array($coupons)){foreach($coupons AS $index=>$one) { ?>
<tr <?php echo $index%2?'':'class="alt"'; ?>>
<td><a class="deal-title" href="/team.php?id=<?php echo $one['team_id']; ?>" target="_blank"><?php echo $teams[$one['team_id']]['title']; ?></a></td>
<td><?php echo $two['id']; ?></td>
<td><?php echo $two['secret']; ?></td>
<td><?php echo date('Y-m-d', $two['expire_time']); ?></td>
<td>Send</td>
</tr>
<?php }}?>
<tr><td colspan="5"><?php echo $pagestring; ?></td></tr>
</table>
</div>
</div>
<div class="box-bottom"></div>
</div>
</div>
<div id="sidebar">
</div>
</div>
</div> <!-- bd end -->
</div> <!-- bdw end -->
<?php include template("footer");?>
and more (index.php):
<?php
require_once(dirname(dirname(__FILE__)) . '/app.php');
need_login();
$daytime = strtotime(date('Y-m-d'));
$condition = array(
'user_id' => $login_user_id,
'consume' => 'N',
"expire_time >= {$daytime}",
);
$count = Table::Count('coupon', $condition);
list($pagesize, $offset, $pagestring) = pagestring($count, 10);
$coupons = DB::LimitQuery('coupon', array(
'condition' => $condition,
'coupon' => 'ORDER BY create_time DESC',
'size' => $pagesize,
'offset' => $offset,
));
$team_ids = Utility::GetColumn($coupons, 'team_id');
$teams = Table::Fetch('team', $team_ids);
include template('coupon_index');
Here is the html(coupon_index.html):
<!--{include header}-->
<div id="bdw" class="bdw">
<div id="bd" class="cf">
<div id="coupons">
<div class="dashboard" id="dashboard">
<ul>${current_account('/coupon/index.php')}</ul>
</div>
<div id="content" class="coupons-box clear">
<div class="box clear">
<div class="box-top"></div>
<div class="box-content">
<div class="head">
<h2>My {$INI['system']['couponname']}</h2>
<ul class="filter">
<li class="label">Category: </li>
${current_coupon_sub('index')}
</ul>
</div>
<div class="sect">
<!--{if $selector=='index'&&!$coupons}-->
<div class="notice">There is no usable {$INI['system']['couponname']}</div>
<!--{/if}-->
<table id="orders-list" cellspacing="0" cellpadding="0" border="0" class="coupons-table">
<tr><th width="300">Deal Item</th><th width="100" nowrap>Voucher's Number</th><th width="60" nowrap>Voucher's Password</th><th width="100" nowrap>Valid Till</th><th width="40">Print Voucher</th></tr>
<!--{loop $coupons $index $one}-->
<tr ${$index%2?'':'class="alt"'}>
<td><a class="deal-title" href="/team.php?id={$one['team_id']}" target="_blank">{$teams[$one['team_id']]['title']}</a></td>
<td>{$one['id']}</td>
<td>{$one['secret']}</td>
<td>${date('Y-m-d', $one['expire_time'])}</td>
<td></td>
</tr>
<!--{/loop}-->
<tr><td colspan="5">{$pagestring}</td></tr>
</table>
</div>
</div>
<div class="box-bottom"></div>
</div>
</div>
<div id="sidebar">
</div>
</div>
</div> <!-- bd end -->
</div> <!-- bdw end -->
<!--{include footer}-->
The simplest solution to output a row per page when printing is simply to use page-break-before or page-break-after CSS properties. That said, you'll need to supress these on either the first or last tr depending on which route you choose.
e.g.:
<style>
#media print {
table tr {page-break-after:always}
}
</style>
you need to pass the database rowID of the coupon in question, or some variation thereof. I would use some hash of it, maybe the MD5 of it, along with a check on the far side that the session person is the owner of that coupon and the coupon is valid...
so your print link would be:
<td>Send</td>
in coupon_index.php i cant understand what $two refers to.
you probably need to better name and indent that piece of code, find a suitable id for the row you want to display, passing this information to the appropriate controller which will load only the relevant row.

PHP behaves weird, mixing up HTML markup

Thanks for looking on this problem.
I have a page that is totally valid page, and there is a PHP loop that brings in a <li> for each entry of the table.
When i check this page locally it looks 100% OK, but when veiwing the page online the left side bar (which creates this markup is broken randomly mixing <div>'s and <li>'s and i have no clue what the problem is.
This problem is on FF mac and PC (safari looks good)
See page (problem is on the left side)
php code
<?php do { ?>
<li class="clear-block" id="<?php echo $row_Recordset1['penSKU']; ?>">
<a title="Click to view the <?php echo $row_Recordset1['penName']; ?> collection" rel="<?php echo $row_Recordset1['penSKU']; ?>">
<img src="prodImages/small/<?php echo $row_Recordset1['penSKU']; ?>.png" alt="" />
<div class="prodInfoCntnr">
<div class="basicInfo">
<span class="prodName"><?php echo $row_Recordset1['penName']; ?></span>
<span class="prodSku"><?php echo $row_Recordset1['penSKU']; ?></span>
</div>
<div class="secondaryInfo">
<span>As low as .<?php echo $row_Recordset1['price25000']; ?>¢ <!--<em>(R)</em>--></span>
<div class="colorPlacholder" rel="<?php echo $row_Recordset1['penColors']; ?>"></div>
</div>
</div>
<div class="additPenInfo">
<div class="imprintInfo"><span>Imprint area: </span><?php echo $row_Recordset1['imprintArea']; ?></div>
<div class="colorInfo"><span>Available in: </span><?php echo $row_Recordset1['penColors']; ?></div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Amount</th>
<th>500</th>
<th>1,000</th>
<th>2,500</th>
<th>5,000</th>
<th>10,000</th>
<th>20,000</th>
</tr>
<tr>
<td>Price <span>(R)</span></td>
<td><?php echo $row_Recordset1['price500'];?>¢</td>
<td><?php echo $row_Recordset1['price1000'];?>¢</td>
<td><?php echo $row_Recordset1['price2500'];?>¢</td>
<td><?php echo $row_Recordset1['price5000'];?>¢</td>
<td>Please Contact</td>
<td>Please Contact</td>
</tr>
</table>
</div>
</a>
</li>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
You cannot put a <div> inside of <a>.
Divs are block level elements. Anchors are not. Basically, it's like putting <span> outside of <div>. Doesn't make any sense.
Solution: Move the anchors to inside the divs.
(In the future, if different browsers are displaying it differently, it's probably not the PHP but the HTML.)

Categories