php- How to foreach mysqli_fetch_rows result in html? - javascript

I want to fetch rows in my mysql DB and show them using html. I am currently using:
$result = mysqli_query($dbc,"SELECT * FROM offers");
$records = mysqli_num_rows($result);
while ($row = mysqli_fetch_row($result)) {
foreach ( $row as $field => $v) {
echo "$field -> $v <br> ";
}
}
It produces the output as:
0 -> 38
1 -> Ashish
2 -> Description yet to put
3 -> http://google.com
4 -> 5
0 -> 12
1 -> David
2 -> Long description goes here...
3 -> http://facebook.com
4 -> 9
I want it to put all the data into as html (with loop) as:
<div class="row">
<div class="col-md-4 portfolio item">
<h3>HERE I WANT TO PUT VALUE OF FIELD 1</h3>
<p>HERE I WANT TO PUT VALUE OF FIELD 2</p>
<p>HERE I WANT TO PUT VALUE OF FIELD 3</p>
<p>HERE I WANT TO PUT VALUE OF FIELD 4</p>
</div>
</div>
How can I do that?

Your code may look this:
$result = mysqli_query($dbc,"SELECT * FROM offers");
$records = mysqli_num_rows($result);
while ($row = mysqli_fetch_row($result)) {
?>
<div class="row">
<div class="col-md-4 portfolio item">
<h3><? echo $row['field-1'] ?></h3>
<p><? echo $row['field-2'] ?></p>
<p><? echo $row['field-3'] ?></p>
<p><? echo $row['field-4'] ?></p>
</div>
</div>
<?
}

try this
$result = mysqli_query($dbc,"SELECT * FROM offers");
$records = mysqli_num_rows($result);
echo '<div class="row">
<div class="col-md-4 portfolio item">';
$bool = true;
while ($row = mysqli_fetch_row($result)) {
foreach ( $row as $field => $v) {
if($bool) echo '<h3>$field -> $v</h3>';
$bool = false;
else echo "<p>$field -> $v </p> ";
}
}

<?php
$result = mysqli_query($dbc,"SELECT * FROM offers");
$records = mysqli_num_rows($result);
while ($row = mysqli_fetch_row($result)) {?>
<div class="row">
<div class="col-md-4 portfolio item">
<h3><?php echo $row[1]; ?></h3>
<p><?php echo $row[2]; ?></p>
<p><?php echo $row[3]; ?></p>
<p><?php echo $row[4]; ?></p>
</div>
</div>
<?php } ?>

Related

Get taxonomy description when filtering custom post type

I'm using a custom post-type and I am doing the filtering using categories.
Each category has a description and I would like to show the description of the category when the category is selected like here
I found a way to show the description of the taxonomy from here
Html used:
<div class="col-lg-9">
<div class="lista-portofoliu">
<div class="row">
<?php while ($pquery->have_posts()) : $pquery->the_post();
$term_obj_list = get_the_terms(get_the_id(), 'portfolio_category');
$term_classes_a = array();
$img_data = array();
$img_string = ""; ?>
<?php foreach ($term_obj_list as $term) {
$term_classes_a[] = $term->slug;
$meniu_triggers[] = $term->slug;
$meniu_labels[] = $term->name;
$img_key = 'imagine_' . $term->slug;
$img_src = wp_get_attachment_image_src(get_field($img_key, get_the_id()), 'thumbnail');
if ($img_src) {
$img_data[] = 'data-' . $img_key . '="' . $img_src[0] . '"';
} else {
$img_data[] = 'data-' . $img_key . '="' . wp_get_attachment_image_src(get_field($img_key, get_the_id()), 'full') . '"';
}
foreach ($img_data as $imagine) :
$img_string .= $imagine;
endforeach;;
} ?>
<?php $term_classes = implode(" ", $term_classes_a); ?>
<div class="col-lg-4 p-1 m-0 item toate <?php echo $term_classes; ?>">
<div class=" item-content" <?php echo $img_string; ?> data-imagine_toate="<?php echo get_the_post_thumbnail_url(get_the_id(), 'thumbnail', true); ?>" style="background-image:url('<?php echo get_the_post_thumbnail_url(get_the_id(), 'thumbnail', true); ?>')">
<a href="<?php the_permalink(); ?>" class=" item-overlay">
<span class="item-title">
<?php the_title(); ?>
<br>
<br>
</span>
</a>
</div>
</div>
<?php endwhile;
?>
<?php
wp_reset_postdata(); ?>
</div>
<button type="button" id="more_posts" class="btn btn-dark loadMore center-block btn-pachete">Mai mult</button>
</div>
</div>
Thank you!
If you want to order everything by portfolio category, then you should first loop over each term in the portfolio_category taxonomy.
With each term, create a new query where you use the tax_query to only get the posts related to the current term we're looping over.
The result will be that each loop contains the category data and the posts related to that category.
You can output the category description by echoing the $term->description value.
<?php
$terms = get_terms('portfolio_category');
if (!is_wp_error($terms)) :
foreach ($terms as $term) : ?>
<div class="row">
<?php
$args = [
'post_type' => 'YOUR_CUSTOM_POST_TYPE',
'post_status' => 'publish',
'posts_per_page' => -1,
'tax_query' => [
[
'taxonomy' => 'portfolio_category',
'field' => 'term_id',
'terms' => $term->term_id
]
]
];
$query = new WP_Query($args);
if ($query->have_posts()) : ?>
<div class="col-lg-4">
<?= $term->name; ?>
<?= $term->description; ?>
</div>
<?php
while ($query->have_posts()) :
$query->the_post(); ?>
<div class="col-lg-4">
<?php the_title(); ?>
</div>
<?php
endwhile
wp_reset_postdata();
endif; ?>
</div>
<?php
endforeach;
endif;

How to auto refresh div contents contain php variables?

I created a page named queries.php
<?php
require("connection.inc.php");
$query = "SELECT SUM(john), SUM(robert), COUNT(school) FROM election";
$result = mysql_db_query($db, $query, $connection) or
die("query error!");
$data = mysql_fetch_array($result);
$john = number_format($data[0], 0,',','.');
$robert = number_format($data[1], 0,',','.');
$school = $data[2];
$total = $john + $robert;
$remaining_school = 524 - $school;
$percentage_john = round(($john*100/$total),2);
$percentage_robert = round(($robert*100/$total),2);
?>
Then I display the data in display.php
The data displayed well and nothing error, I tried a couple of tricks to auto refresh the container using jquery but failed.
Here is my display.php page:
<?php
include("queries.php");
?>
<div id="totaljohn"> // <--- the div id taken from css layout
<h9>John: <?php echo $john; ?> <br> (<?php echo $percentage_john; ?> %)</h9>
</div>
<div id="totalrobert">
<h9>Robert: <?php echo $robert; ?><br> (<?php echo $percentage_robert; ?> %)</h9>
</div>
<div id="totalboth">
<h4>Total : <?php echo $total; ?> Suara</h4>
</div>
<div id="totalschool">
<h4>Total School attending : <?php echo $school; ?> Schools</h4>
</div>
<div id="remaining_schools">
<h4>Remaining Schools: <?php echo $remaining_school; ?> of 524 schools</h4>
</div>
Everything looks good. Is your database connected? Is your SQL correct? Are there records in the database returned for your query?

Dynamically values parse to Popup Model Box from PHP Page

I was trying to parse the php data values which inside the while loop to the popup model .
Sample Code
<?php
include("connect.php");
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data();">
<div id="getid">
<?php echo $id; ?>
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(){
var x = document.getElementById("getid").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> </div>
</div>
Let's say if i have id => 1 to 10 , above code writing last 5 items from the table. which are 6 7 8 9 10 . ( it's working perfectly ) .
my requirement is to when i click the 7 it should parse 7 to the popup model. ( or let's say to the innerHTML of ).
it only parsing the first value ( 5 ) . to all onclick events when i click the each number.
PS : this is test using mysql not mysqli or pdo :) .
Thanks in Advance !
Try this. Hope it helps.
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data(<?php echo $id; ?>);"> <!-- Changed -->
<div id="getid<?php echo $id; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(y){ // Changed
var x = document.getElementById("getid"+y).innerHTML; // Changed
document.getElementById("demo").innerHTML = x;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> </div>
</div>
Try This One.
<?php
include("connect.php");
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data(<?php echo $id; ?>,'<?php echo $name; ?>','<?php echo $imgUrl; ?>');"> <!-- Changed -->
<div id="id<?php echo $id; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
<div id="name<?php echo $name; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
<div id="image<?php echo $id; ?>"> <!-- Changed -->
<img src="<?php echo $imgUrl; ?>" />
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(id, name, imgUrl){ // Changed
document.getElementById("dispID").innerHTML = id;
document.getElementById("dispName").innerHTML = name;
document.getElementById("ImgDisplay").src = imgUrl;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> <!-- Changed -->
<div id="dispID"></div>
<div id="dispName"></div>
<div id="dispImg"><img id="ImgDisplay" src="" /></div>
</div>
</div>

clearing and changing content of div

I'm trying to replace the content of comments div with the new comments by loading it again and replacing the old comments. When i change the content of the div, it replaces the first comment only and repeat the whole comment:
here is the comments div :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div id="comments_div">
<div style="background:#aaaaaa; margin:5px;">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($post_row['user_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
</div>
<?php } ?>
ajax code :
/////////////////////////comment function
function comment(post_id, poster_id)
{
loadXMLDoc("php/comment.php?post_id="+post_id+" content="+document.getElementById("content").value+"&poster_id="+poster_id,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("comments_div").innerHTML = xmlhttp.responseText;
}
});
}
comment.php :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$_GET[post_id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>
Your first code snippet is creating a separate comments_div for each comment. Then your JavaScript code snippet is just replacing the content of the first one.
You can fix it by putting the comments_div outside the the PHP while loop, and then using the same HTML output code inside that loop as you are in your third example (a div.comment per comment).
So, something like this in place of that first code snippet:
<div id="comments_div">
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>
</div>

Auto calculation of div values on blur

I am generating a table of divs from mysql database with code as below :
<?php
$sql = "SELECT * FROM menuitem";
$result = mysql_query($sql); $i =1;
while ($row = mysql_fetch_array($result)) {?>
<div class="orderblock">
<div class="orderlist">
<div class="pimage">
<p></p>
</div>
<div class="pdesc">
<p><?php echo $row['prodname']; ?></p>
<p><?php echo substr($row['proddesc'], 0, 20); ?></p>
</div>
<div class="portion">
<input type="text" onblur="document.getElementById('tot<?php echo $i;?>').value=document.getElementById('por<?php echo $i;?>').value * document.getElementById('pri<?php echo $i;?>').value;" id="por<?php echo $i;?>" name="<?php echo $row['prodname']; ?>" >
</div>
<div class="price">
<p id="pri<?php echo $i;?>"><?php echo $row['price']; ?></p>
</div>
<div class="total">
<p><input style="border: none;" type="text" id="tot<?php echo $i;?>" disabled="disabled" value=""> </p>
</div>
</div>
</div>
<?php $i++; }
?>
this is my final code, finally I got it working but I am getting NaN as result could any please sort it for me.
thanks
Try this now. Before try this remove your blur event from html.I hope this will help you.
$(document).ready(function () {
$("input[type=text]").blur(function () {
var portion = $(this).val();
var price = $(this).parent().parent().find(".price p").text();
if(isNaN(portion)==false)
{
var tot = portion * price;
$(this).parent().parent().find(".total p input").val(tot);
}
else
{
$(this).parent().parent().find(".total p input").val(0);
}
});
});
Demo here

Categories