I'm using SQL and PHP to create a table filled with data in a simple html table. It all works fine but I am trying to include each item in its own div in a bootstrap 3 column layout. The issue here is this requires adding rows/columns in a non-repetitive order. Please see the jsfiddle to see the grid layout I am trying to achieve.
Using foreach I get the data to display nicely in a simple table. My question is what would be the best route make the output format like the jsfiddle? Any tips would be greatly appreciated! I am assuming I will need some JS to achieve this? Thank you for your time.
NOTE Make the Javascript tab thin to see the actual effect otherwise it wraps.
Layout I am looking for
<!-- CODE FOR TABLE LAYOUT -->
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h2>
Database Item 1
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Database Item 2
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Database Item 3
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>
Database Item 4
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Database Item 5
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>
Database Item 6
</h2>
<p>
Detials about this item
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
</div>
You don't need any javascript, you just need to iterate and close the row div according to number of iteration
echo '<div class="container-fluid">';
for($i=1; $i < count($array) + 1; $i++) {
if(is_int(($i - 1) / 3) || ($i - 1) == 0) {
echo '<div class="row">';
}
echo '<div class="col-md-4">';
echo '<h2>'. $array[$i]['item_name'].'</h2>';
echo '<p>'.$array[$i]['item_descrption'].'</p>';
echo '<p><a class="btn" href="#">View details »</a></p>';
echo '</div>';
if(is_int($i/3) {
echo '</div>';
}
}
echo '</div>';
Related
if you need more details you can ask. Thanks in advance
In laravel 8 I have a button called, create app when I click it, it takes me to the page adds some data. When i add data it shows me many app lata in listview. In every list view, I have an animated kebab menu . But the problem is when i create new app dropdown list only works for last enter apps. so it means if i create 10 apps dropdown list will work for only last app i have enterd it will not work for other 9.
here is some code of my index.blade.php which can create multipul kebab menu but not works for dropdown
#foreach ($products as $product)
<div class="col-xs-12 col-sm-12 col-md-12">
{{-- <div class="card-body row"> --}}
<form action="{{ route('products.destroy', $product->id) }}" method="POST">
{{-- <ul class="nav"> --}}
<a class="btn btn-outline-info" href="{{ route('products.edit', $product->id) }}">
<br>
<img src="/logo/{{ $product->logo }}" width="100px" class="col-4">
<div class="col-2" style="color: #1d2124">
<strong >App Name:- {{ $product->name }}</strong>
<br>
<strong>App Id:- {{ $product->id }}</strong>
</div>
</a>
<div class="pull-right">
<div class="kebab">
<figure></figure>
<figure class="middle"></figure>
<p class="cross">x</p>
<figure></figure>
<ul class="dropdown">
#csrf
#method('DELETE')
<li><button type="submit" class="btn btn-danger">Delete</button></li>
<li>All Json</li>
<li>JsonById</li>
<li>JsonByName</li>
</ul>
</div>
</div>
{{-- </ul> --}}
</form>
{{-- </div> --}}
</div>
#endforeach
here is javescript code which can create kabeb menu for all app but dropdown for last inserted app in app.js
require('./bootstrap');
require('alpinejs');
var kebab = document.querySelector(".kebab"),
middle = document.querySelector(".middle"),
cross = document.querySelector(".cross"),
dropdown = document.querySelector(".dropdown");
kebab.addEventListener("click", function() {
middle.classList.toggle("active");
cross.classList.toggle("active");
dropdown.classList.toggle("active");
});
document.querySelector only returns the last DOM element matching your selector. If you want to apply a dropdown menu for every kebab, you have to use
kebabs = document.querySelectorAll(".kebab")
...
kebabs.foreach(this.addEventListener("click", function(){
//do what you want
})
The model is having a unique id for every while loop call as the id's are generated randomly. For each call of while loop the button is having a unique id and is calling a unique model. But the model is not showing by clicking on the button. The model shows up if i exclude giving unique id to each model and button and give them a common id but in this case it is opening the same model for every button click.
"<div class='modal fade' id='myModal[$id]' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h4 class='modal-title' id='myModalLabel'>More About $name</h4>
</div>
<div class='modal-body'>
<center>
<img src='img.jpg' name='dogimage' width='140' height='140' border='0' class='img-circle'>
<h3 class='media-heading'>$name</h3>
<hr>
<center>
<p class='text-left'><strong>Age(in months): </strong> $age
</p>
<p class='text-left'><strong>Weight(in kg): </strong>
$weight.</p>
<p class='text-left'><strong>Breed: </strong>
$breed.</p>
<p class='text-left'><strong>Gender: </strong>
$gender.</p>
</center>
</div>
<div class='modal-footer'>
<center>
<button type='button' class='btn btn-default' data-dismiss='modal'>Know enough about $name</button>
</center>
</div>
</div>
</div>
</div>
<div class='container'>
<div class='row'>
<div class='col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6'>
<div class='well profile'>
<div class='col-xs-12'>
<div class='col-xs-12 col-sm-8'>
<div id='dogrequestmessage'></div>
<h2>$name</h2>
<p><strong>Breed: </strong> $breed </p>
<p><strong>Weight(in kg): </strong> $weight </p>
<p><strong>Gender: </strong> $gender </p>
<p><strong>Age:(in months): </strong> $age </p>
</div>
</div>
<div class='col-xs-12 divider text-center'>
<div class='col-xs-12 col-sm-4 emphasis'>
<button class='btn btn-info btn-block' href='#aboutModal' data-toggle='modal' data-target='#myModal[$id]' name = 'viewprofile[$id]' id= 'view_profile'><span class='fa fa-user'></span> View Profile </button>
</div>
</div>
</div>
</div>
</div>
</div>"
"<div class='modal fade' id='myModal[$id]'
The problem is with the square brackets used in the ID value. Those would need to be escaped, to create a valid CSS selector, but the library used for the functionality probably doesn’t do that.
Use an ID format like modal_$id instead. Assuming the $id values are numeric, that will give you IDs that can be used inside a CSS selector without any additional escaping.
I am building a web App using Angular 2 and want to loop the button with the list items but outside of list items, how can I get the functionality using *ngFor, please help.
My HTML code:
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)" *ngFor="let buying of buy">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right" >
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6"> <-----I WANT TO LOOP THIS BUTTON
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
Try this code snippet. I have created a div tag above linking both content and then added the loop inside that, so it will refer to both elements (item and button).
<div *ngFor="let buying of buy">
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right">
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6">
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
</div>
I have two collections, one is a Posts collection which has posts, with an id.
And the other is a Sets collection which has an array called ArticleId that can be updated by the user by inserting a post id from the Posts collection into it via a click function with the button toggle-addToSet.
The user Creates the Array called ArticleId, gives it a name and saves articles in it periodically. Think Pinterest Boards or G+ collections.
I have a button on the post item that when a user clicks the icon, all the Sets he has created come up in a dialogue and the user chooses which Set he want to save the post id into.
<template name="summeryArticle">
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</template>
Graphically it looks like this
And when the user clicks the icon modal-trigger to bring up the Sets he created, it looks like this
As you can see, the user has three Sets, Lifestyle, Love, Business, they can choose to save the posts id into any one of those three.
## GOAL ##
I want to be able to choose a Set, click the add button of my chosen Set, and somehow capture the post Id of the current post in my foreach loop, and insert it into that via the click function, at the moment all I have is this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
}
});
and when I console log that, I just get the Set id instead of the post id.
Question
How can I capture the post id of the current post,
Choose a Set of my liking, then insert the post id into my chosen set?
And if there is a better way to achieve this, please let me know.
EDIT AFTER FEEDBACK
I did the second option like this
<template name="summeryArticle">
{{#let article=this}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button> {{/each}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
my helper is like this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
console.log(sid);
console.log(aid);
}
});
However, this is what I'm getting.
and the log looks like this
where 7MgLCEnTWjXFRhLg6 is the Sets_id depending on which of the three buttons I clicked
SECOND EDIT. CONTEXT
when i do this
<template name="summeryArticle">
{{#let article=_id}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{> likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each s in set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
I get this
What's going on here is that I have the articles organised in categories, so what's going on now is that the article=_idbeing captured is the last article in the category, no matter what articles I try to add, it's just one article being caught, and its always the one at the bottom. I have no idea why
There are several ways. One would be something like this:
I would but article id and set id to toggle-addToSet button's data-attributes:
<button type="button" class="btn toggle-addToSet" name="button" data-setid="SETID" data-articleid="ARTID">add Article Id to this Set!</button>
If you call your summeryArticle like this:
{{#each article in articles}}
{{>summeryArticle article=article}}
{{/each}}
(another opotion is use let-helper:
<template name="summeryArticle">
{{#let article=this}}
...
{{/let}}
</template>
Then in your summeryArticle-template you can get article id in sets-loop:
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}>add Article Id to this Set!</button>
{{/each}}
Then in template events:
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
Sets.update({_id: sid}, {$addToSet: {ArticlesId: aid}});
}
});
Note!
This assumes you can update your collection directly from client side! Depending on your situation, but usually it is not recommended. Normally you should deny client side updates and use methods for updating collections:
Method.call('mymethd', sid, aid, function(e, r) {
if (!e) {
console.log(r);
} else {
console.error(e);
}
});
Below is my code, basically it pulls information from the database and displays the stock associated, from here I have a details button which I want to use to send data to another html page to display more information on the product, add to cart etc.
My question is what is considered "Best practice" to send this information, should I simply make a form that gets the ID from the array and sends it on click? Or is there a more efficient way say using jquery?
I assume best practice would be to have a function which the value is passed to from the button form?
<section>
<div class="row">
<div class="col-md-12">
<div class="heading">
<h1>New Mag Wheel Arrivals</h1>
</div>
</div>
</div>
<div class="row products">
<?php while ($product = mysqli_fetch_assoc($wheelResult)) : ?>
<div class="col-md-3 col-sm-6">
<div class="product border">
<div class="image">
<a href="#"><img src=" <?= "images/wheels/wheelphotos/" . $product["bigpic"]; ?>"
alt="<?= $product["manufacturer"]; ?>" class="img-responsive img-demo"></a>
</div>
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<div class="ribbon ribbon-quick-view logo">
<div class="theribbon"><img src="images/wheels/logos_small/Vs2.png"></div>
<div class="ribbon-background"></div>
</div>
<div class="text text-background">
<h4><?= $product["diam"] . "\" " . $product['manufacturer'] ?></h4>
<p class="brand"><?= "Model " . $product["part_no"]; ?></p>
<button class="btn btn-default btn-sm btn-primary" href="detail.php">Details</button>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</section>
Sudo code form example
EG
<form action=details.php method="GET">
<button class="btn btn-default btn-sm btn-primary" href="detail.php">Details</button>
hidden-value = $product["recid"]
</form>
As you need to load an entirely new page, so Ajax isn't going to bring any big improvements in terms of user friendliness. I'd suggest you to do this simply like below:
On product listing page (in while loop), place your button like this:
<button class="btn btn-default btn-sm btn-primary" >Details</button>
On detail.php page, simply take the id from $_GET request and then fetch detail for the product from database:
i.e. "SELECT * FROM `products` WHERE `product_id` = ?"
Hint: Use $_GET['id'] for ? as it will contain id of product passed from previous page.