I got a while loop that shows some old data. I recently added a new tablerow to the database that contains a string thats exploded into an array at every comma.
I then use a for loop to show the array values into a list and use the variable that contains the list in the echoed while loop data.
My code (only relevant parts):
while($row_items = mysqli_fetch_array($res_items, MYSQLI_ASSOC)) {
if($row_items['checkpoints'] != ''){
$check = explode(',', $row_items['checkpoints']);
}else{
$check = '';
}
foreach($check as $list){
$checklist .= '<li>'.$list.'</li>';
}
echo '
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 portf">
<a class="fancybox" href="../../catalogus/'.$row_items['afbeelding'].'">
<div class="gallery-item">
<div class="image">
<img src="../../catalogus_icons/'.$row_items['afbeelding'].'.jpg" alt="" style="border:1px solid #ccc;" class="img-responsive" />
</div>
<div class="bottom-info">
<div class="name">'.$row_items['naam'].'</div>
<div>'.$checklist.'</div>
<button class="contact_button buttoncontact btn-primary" style="border-radius:2px;">
Contact
<span class="icon-mail-alt"></span>
</button>
</div>
</div>
</a>
</div>';
}
But this shows the same list on every div output (while loop result). I added 1 list to test, and it adds that list to every item, not only the item that has a list. How can I make sure it only adds the list to the correct result?
$row_items['checkpoints']; contains: 'goedkoop,snel,test'
It's likely because you are not clearing the $checklist variable between iterations of the loop. You are simply adding to the same list every iteration.
while ($row_items = mysqli_fetch_assoc($res_items)) {
$checklist = '';
if ($row_items['checkpoints'] != '') {
$check = explode(',', $row_items['checkpoints']);
foreach($check as $list) {
$checklist .= '<li>'.$list.'</li>';
}
}
echo '
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 portf">
<a class="fancybox" href="../../catalogus/'.$row_items['afbeelding'].'">
<div class="gallery-item">
<div class="image">
<img src="../../catalogus_icons/'.$row_items['afbeelding'].'.jpg" alt="" style="border:1px solid #ccc;" class="img-responsive" />
</div>
<div class="bottom-info">
<div class="name">'.$row_items['naam'].'</div>
<div>'.$checklist.'</div>
<button class="contact_button buttoncontact btn-primary" style="border-radius:2px;">
Contact
<span class="icon-mail-alt"></span>
</button>
</div>
</div>
</a>
</div>';
}
Related
So I have succeeded in passing the variables from one modal to another.The problem is they are multiple variables and I am looping them with the PHP foreach function, all the items are displayed but when I click on any item only the first variable is passed and not the specific one I chose. How do I fix this
here is the code for the initial modal
<div class="modal fade bs-modal-md" id="cardmodal" tabindex="-1" role="dialog" aria-
labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">SELECT A CARD</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="mini-carousel">
<ul class="mini-item">
<?php
$cards = $card->load_category('WOMEN','WR');
$category_products=$cards['category_products'];
$num_rows = count($category_products);
if ($num_rows < 1) {
echo '<div class="info">We shall update you when this is back in Stock</div>';
?>
<a onClick="pageModel(this);" href="javascript:void(0);" id="<?php echo
site_url('home/getview/contact_form/'.$categorynameID); ?>" >Click here to submit your
contact to be updated</a>
<?php
} else {
foreach($category_products as $cp)
{
$status = $cp["status"];
$product_quantity = $cp["quantity"];
$notify_quantity = $cp["reorder_level"];
$images = $this->home_m->get_product_images($cp['inventory_id'],true);
if($images){
$image = $images[0];
$image_name = $image["thumb"].'.'. $image["extension"];
$image_source = $image['source'];
$check_pic = DEFAULT_UPLOAD.'/'.$image_source.'/'.$image_name;
$product_image = $image_name;
}else{
$product_image = '';
}
?>
<li class="product-item col-xs-12 col-sm-4 col-md-3">
<div class="product-inner">
<div class="product-thumb has-back-image zoom">
<a id="testd" data-id="<?php echo base_url($check_pic); ?>" data-
dismiss="modal" data-toggle="modal" onclick="addModalDetails()" href="#single_card_view">
<? php
if(($product_image != "") || (($product_image != NULL))) {
if (file_exists($check_pic)) { ?>
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image" ></img>
<?php } else {
echo "<img class=\"img-fluid\"
src=\"http://geestar.co.tz/images/category/product.png\" alt=\"Product Image\" />";
}
} else {
echo "<img class=\"img-fluid\" src=\"http://geestar.co.tz/images/category/product.png\"
alt=\"Product Image\" />";
}
?>
</a>
</div>
<div class="product-info">
<h6 id="cardname" class="product-name"><?=$cp["product_name"];?></a>
</h6>
<span class="price">
<ins id="cardprice">TZS <?=number_format($cp["selling_price"]);?
>
</ins>
</span>
</div>
</div>
</li>
<?php
}
}
?>
this is the JS Code where i pass the values to the other modal
function addModalDetails(){
var name = $('#cardname').html();
var image= $('#cardimage').html();
var price =$('#cardprice').html();
$('#heading').html(name);
$('#cost').html(price);
var imgsrc = $('#testd').data('id');
$('#picture').attr('src',imgsrc);
}
And this is the code of the modal where i want the data to be passed
<div class="modal fade product_view" id="single_card_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon
glyphicon-remove"></span></a>
<h3 id="heading" class="modal-title"></h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 product_img">
<img id="picture" src="" class="img-responsive">
</div>
<div class="col-md-6 product_content">
<p> <input id="gift_message" class="form-control" rows="5" placeholder="<?
php _l('Gift Message'); ?>" name="gift_message" > </input></p>
<h3 id="cost" class="cost"></span>TZS
<? =number_format($cp["selling_price"]);?></h3>
<div class="row">
<!-- end col -->
<!-- end col -->
<!-- end col -->
</div>
<div class="space-ten"></div>
<div class="btn-ground">
<button type="button" class="button" data-dismiss="modal"
onClick="addCardDetails()"> Add Card</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You're currently using a foreach loop to assign the same ID to multiple html tags. For simplicity of this answer, I will be taking your <img> tag with the ID cardimage as example. Furthermore I'd like to note that your ID's should always be unique!
The problem
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
Every team you're looping through the $category_products array, you're adding another one of those tags, identical to the last one.
For example if you loop 3 times through the $category_products array, you will get 3 times the same ID.
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
When there are multiple identical ID's on a webpage, your javascript will pick the first one it can find, and run your script on that, as it only expects one result. To fix this, you should make all your ID's unique.
A possible solution
First of all, make all of your ID attributes unique. In your loop you're looping through $category_products as $cp, and you appearantly have the variable $cp['inventory_id']. I'll be taking that as unique id for this answer for now.
You could append this unique ID behind your ID like this:
foreach($category_products as $cp) { ?>
<img id="cardimage-<?=$cp['inventory_id']?>" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<?php }
Then change your addModalDetails() like this:
function addModalDetails(id){
var name = $('#cardname-'+id).html();
var image= $('#cardimage-'+id).html();
var price =$('#cardprice-'+id).html();
$('#heading-'+id).html(name);
$('#cost-'+id).html(price);
var imgsrc = $('#testd-'+id).data('id');
$('#picture-'+id).attr('src',imgsrc);
}
and call it like this:
addModalDetails(<?=$cp['inventory_id']?>);
Hello guys!
I'm trying to use a foreach cicle to show some images from my disk but something is getting wrong. It show and error saying
Message: Array to string conversion
Line Number: 306
Here is my foreach cicle
<div class="col-lg-9">
<div class="row">
{foreach $products as $product}
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top border-bottom" src="{$product.image}" alt="">
<div class="card-body">
<h6 class="card-title">
<p class="text-dark">{$product.name}</p>
</h6>
</div>
<button type="button" class="btn btn-secondary"><i class="material-icons">local_grocery_store</i><span class="float-right mr-4">Adicionar ao carrinho</span></button>
</div>
</div>
{/foreach}
</div>
</div>
My error said the problem is on this line
$data['products'] = '.base_url(' . $this->Cart_model->get_img() . ').';
Also my model with get_img() is this
public function get_img(){
$sql = "SELECT * FROM products";
$query = $this->db->query($sql);
return $query->result();
}
and this is my database
Data base example
I think the issue is that you're using base_url to call the model, remove the base_url and then call the model. Like this -
$data['products'] = $this->Cart_model->get_img(); // returns array of objects
In your view file, use foreach to traverse the data then you'll have to do something like
<?php echo base_url()."path/to/folder/$product->table_image_column"; ?>
View (in php) // this is how I'd do.
<?php foreach($products as $product) { ?>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top border-bottom" src="<?php echo base_url()."your/path/$product->image"; ?>" alt="">
<div class="card-body">
<h6 class="card-title">
<p class="text-dark"><?php echo $product->name; ?></p>
</h6>
</div>
<button type="button" class="btn btn-secondary"><i class="material-icons">local_grocery_store</i><span class="float-right mr-4">Adicionar ao carrinho</span></button>
</div>
</div>
<?php } ?>
or if you're using any framework and don't want to mingle php in it. Use foreach in the controller itself and add base_url() to the image. You don't have to make any changes in the view for this-
Controller
$i= 0;
foreach($products as $product) {
$products[$i]->image = base_url()."path/to/image/$product->image"; // change the products array with new values
$i++;
}
See if it helps you.
The answer is add src="<?php echo base_url('{$product.image}'); ?>" in the Views
<div class="row">
{foreach $products as $product}
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top border-bottom" src="<?php echo base_url('{$product.image}'); ?>" alt="" style="width:30px;height:30px;">
<div class="card-body">
<h6 class="card-title">
<p class="text-dark">{$product.name}</p>
</h6>
<div class="text-danger"><b><span>{$product.price}€ </span></b><span class="text-secondary float-right"><del>{number_format((float)$product.price*1.5, 2, '.', '')}€</del></span></div>
</div>
<button type="button" class="btn btn-secondary"><i class="material-icons">local_grocery_store</i><span class="float-right mr-4">Adicionar ao carrinho</span></button>
</div>
</div>
{/foreach}
</div>
code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping
I just took a quick look and it looks like you are not closing the "carousel-inner" div
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql = "SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn = mysql_query( $recent_projects_sql ) or die( mysql_error() );
$i = 0;
$split = 0;
while ( $projects = mysql_fetch_array( $recent_projects_conn ) ) {
$i ++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>"
alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php $split ++;
if ( $split % 4 == 0 ) {
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
Add a Boolean check for the execution of loop, such as $check = true;, add this within the loop.
after the loop add this
if($check){
echo " </div></div>";
}
That's because at the end of iteration (in case of mod 4 and even without it), you keep 2 divs opened
echo '</div></div><div class="item"><div class="row">';
Help i uses this code PHP and bootstrap please see image.
<?php
$sql = "SELECT * FROM article ORDER BY article_id DESC";
$r = page_query($link, $sql, 10);
while ($a = mysqli_fetch_array($r)) {
$src = "images/cover-image.jpg";
if ($a['image_id'] != 0) {
$src = "read-image.php?id={$a['image_id']}";
}
echo '
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="thumbnail">
<div class="thumb">
<img src="' . $src . '" alt="">
<div class="caption-overflow">
<span>
<i class="icon-plus3"></i>
<i class="icon-link2"></i>
</span>
</div>
</div>
<div class="caption">
<h6 class="no-margin-top text-semibold">
Not rapturous
<i class="icon-download pull-right"></i>
</h6>
' . mb_substr($a['article_text'], 0, 120, 'utf-8') . '...<br>' . '
</div>
</div>
</div>';
}
if (page_total() > 1) {
echo '<p id="page">';
page_echo_pagenums();
echo '</p>';
}
?>
Image
I use this code PHP and bootstrap see images
The problem of this sort on the part of the how to had to modify how it displays the correct result.
What I found Is:
You opened <div class="row">. But, not closed. (It may be one of the reason for alignment not coming properly)
And, My suggestion is not to use <div class="row"> inside while loop. Place it above while loop. Because every occurrence in while loop, it will take single row as whole div. Putting it before while loop, it will help you to place all col-lg-3 rows inside <div class="row"> in proper alignment.
Updated Code:
<div class="row">
<?php
$sql = "SELECT * FROM article ORDER BY article_id DESC";
$r = page_query($link, $sql, 10);
while ($a = mysqli_fetch_array($r)) {
$src = "images/cover-image.jpg";
if ($a['image_id'] != 0) {
$src = "read-image.php?id={$a['image_id']}";
}
echo '
<div class="col-lg-3 col-sm-6">
<div class="thumbnail">
<div class="thumb">
<img src="' . $src . '" alt="">
<div class="caption-overflow">
<span>
<i class="icon-plus3"></i>
<i class="icon-link2"></i>
</span>
</div>
</div>
<div class="caption">
<h6 class="no-margin-top text-semibold">
Not rapturous
<i class="icon-download pull-right"></i>
</h6>
' . mb_substr($a['article_text'], 0, 120, 'utf-8') . '...<br>' . '
</div>
</div>
</div>';
}
?>
</div>
When, I did these changes in my desktop. It works fine for me. Keep calm. Have patience. And, Try once again. It will work.
I am working on a PHP based website which is using Twitter Bootstrap 2. I am pulling the users from MySQL database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using while loop.
This is what my carousel looks like at present, as you will notice user 5 is not supposed to appear the way it is right now and is only supposed to appear when i click on arrow on right side of the carousel.
This is what my php code looks like
<div class="carousel slide" id="myCarousel">
<h4 class="carousel-title">Text title</h4>
<div class="carousel-inner">
<?php
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
?>
<div class="item active">
<div class="span3 mef-3">
<div class="about portrait">
<div class="tooltip-demo">
<a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
data-title="">
<img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
alt="270x280"
style="" src="assets/img/adviser.png"></a>
</div>
<div class="caption">
<h3 class="name" style="text-align: center"><?php echo $row['fname']." ".$row['lname'] ?></h3>
<p style="text-align: center">
Specialities</p>
</div>
<div class="mefradio">
<input type="radio" name="adviser" id="adviser" value='<?php echo $row['user_id']."|".$row['fname']." ".$row['lname'] ?>'><br>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
<a data-slide="prev" href="#textCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#textCarousel" class="right carousel-control">›</a>
</div>
I will really appreciate any guidance on how to get it to work
UPDATE
This is the updated code that is working, thanks to #I can Has Kittenz
<div class="carousel slide" id="myCarousel">
<h4 class="carousel-title">Text title</h4>
<div class="carousel-inner">
<?php
$i = 1;
$next_item = true;
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
if ($i == 1) {
echo '<div class="item active">';
} elseif ($next_item == true) {
echo '<div class="item">';
}
?>
<div class="span3 mef-3">
<div class="about portrait">
<div class="tooltip-demo">
<a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
data-title="">
<img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
alt="270x280"
style="" src="assets/img/adviser.png"></a>
</div>
<div class="caption">
<h3 class="name"
style="text-align: center"><?php echo $row['fname'] . " " . $row['lname'] ?></h3>
<p style="text-align: center">
Specialities</p>
</div>
<div class="mefradio">
<input type="radio" name="adviser" id="adviser"
value='<?php echo $row['user_id'] . "|" . $row['fname'] . " " . $row['lname'] ?>'><br>
</div>
</div>
</div>
<?php
$next_item = false;
if ($i % 4 == 0) {
echo '</div>';
$next_item = true;
}
$i++;
}
?>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
The JS that needs to go with this is as following
<script>
$(document).ready(function(){
$('#myCarousel').carousel({
pause: true,
interval: false
});
});
$('#myCarousel').on('slid', '', function() {
var $this = $(this);
$this.find('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.find('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.find('.right.carousel-control').hide();
}
});
</script>
Updated:
As per the way Bootstrap 2.3 carousel works, multiple items like the way you have done won't show 4 items in a row and only one .item class can have an .active class to it, so here's what we would do:
<div class="item active">
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
</div>
<div class="item">
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
</div>
That's how we are going to structure your elements to look like. So code in:
<!-- code follows -->
<div class="carousel-inner">
<?php
$i = 1;
$next_item = true;
while ($i < 10)
{
if ($i == 1)
{
echo '<div class="item active">';
}
elseif ($next_item == true)
{
echo '<div class="item">';
}
?>
<div class="span3 mef-3">
<!-- code follows -->
</div>
<?php
$next_item = false;
if ($i % 4 == 0)
{
echo '</div>';
$next_item = true;
}
$i++;
}
?>
Also, since you name your carousel as id=myCarousel, your prev and next button's href should be href="#myCarousel" and not href="#textCarousel".
Here's a demo of what it looks like.