{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 你好瞎i 的问题《How to get data from a line and move to a modal? L》','https://www.manongdao.com/q-861474.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have a table where listo products from my database, in it I have ID, name, description, among other data types. I created a button that would call a modal to display more details about the product, however the modal always displays details of the first product in the table and not the ID related to it.
My table:
My table code:
<table class="table table-striped table-bordered" id="table1" class="table table-bordered">
<thread>
<th><center>Imagem</center></th>
<th>SKU</th>
<th><center>Produto</center></th>
<th>Custo</th>
<th>Preço</th>
<th>Atualização</th>
<th>Status</th>
<th>Estoque</th>
<th>Distruibuidor</th>
<th>Categoria</th>
<th id="acoes">Ações</th>
</thread>
@foreach($product as $prod)
<thread>
<tbody>
<td><img src="{{$prod->image->erp_image}}" style="width: 50px; height: 50px;" alt="" id="ProdImage"></td>
<td>{{$prod->erp_model}}</td>
<td>{{$prod->description->erp_name}}</td>
<td>R$ {{$prod->erp_cost}}</td>
<td>R$ {{$prod->erp_price}}</td>
<td>{{ $prod->erp_modifieddate}}</td>
<td style="max-width: 45px">
@if($prod->status == 1)
<span class="label label-success">Ativo</span>
@else
<span class="label label-danger">Inativo</span>
@endif
</td>
<td>{{ $prod->erp_quantity}}</td>
<td>@if($prod->erp_distributor == 'A')
<span class="label label-default">Aldo</span>
@elseif($prod->erp_distributor == 'AN')
<span class="label label-default">All Nations</span>
@elseif($prod->erp_distributor == 'H')
<span class="label label-default">Hayamax</span>
@elseif($prod->erp_distributor == 'O')
<span class="label label-default">Oderço</span>
@elseif($prod->erp_distributor == 'R')
<span class="label label-default">Rico Peças</span>
@endif
</td>
<td>
@foreach($prod->category as $category)
{{$category->erp_name}}
@endforeach
</td>
<td>
<button href="#" data-toggle="modal" data-target="#view" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></button>
<div class="modal fade" id="view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Detalhes</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Informações do produto</h3>
</div>
<div class="panel-body">
<h5>Nome</h5>
<input class="form-control" type="text" placeholder="{{$prod->description->erp_name}}" readonly>
<h5>SKU</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_model}}" readonly>
<h5>EAN</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_ean}}" readonly>
<h5>NCM</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_ncm}}" readonly>
<h5>CST</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_cstid}}" readonly>
<h5>Marca</h5>
<input class="form-control" type="text" placeholder="{{$prod->brand->erp_name}}" readonly>
<h5>Categoria</h5>
@foreach($prod->category as $category)
<input class="form-control" type="text" placeholder="{{$category->erp_name}}" readonly>
@endforeach
<h5>Distribuidor</h5>
<input class="form-control" type="text" placeholder="{{ App\Helpers\ProductDistributorHelper::$distributor[$prod->erp_distributor]}}" readonly>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Informações dos preços</h3>
</div>
<div class="panel-body">
<h5>Preço custo</h5>
<input class="form-control" type="text" placeholder="R$ {{$prod->erp_cost}}" readonly>
<h5>Preço venda</h5>
<input class="form-control" type="text" placeholder="R$ {{$prod->erp_price}}" readonly>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Informações de peso e medida</h3>
</div>
<div class="panel-body">
<h5>Peso</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_weight}} kg" readonly>
<h5>Comprimento</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_lenght}} cm" readonly>
<h5>Largura</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_width}} cm" readonly>
<h5>Altura</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_height}} cm" readonly>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Informações de estoque</h3>
</div>
<div class="panel-body">
<h5>Quantidade</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_quantity}}" readonly>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Informações técnicas e descrição</h3>
</div>
<div class="panel-body">
<h5>Descrição</h5>
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
</td>
<style>
td{
max-width: 100px;
min-width: 80px;
}
</style>
</tbody>
</thread>
@endforeach
</table>
My Controller
public function showView($name=null){
if(View::exists('admin/'.$name))
{
$product = Product::paginate(10);
if(Sentinel::check())
return view('admin.'.$name)->with('product', $product);
else
return redirect('admin/signin')->with('error', 'You must be logged in!');
}
else
{
return view('admin.404');
}}
Any Suggestion?
Your way of creating modal for each row is not good, because it will decrease the page performance, slow page load and increase the size of the page and will take long time to load. For this there is a simple solution.
Create a global modal popup with id of
view-productor any other id you want to keep. Using this id we will open modal.Add a link in each product row and add class
view-product. Usingview-productclass we will bind click event to get each product details and open modal. Assign each product id to the below link to identify which product details you want to view.Add click event on
view-productclass and use AJAX to get product details usingdata-idwe have passed in the link of each product. Check below. After response from ajax you can assign values to each fields you want to set values.This is the simple and global solution. We can use this everywhere, this will increase page load and send request to get details separately.
I think this is not a good way to render modal in foreach loop. Just think if you have lots of product so your modal code also render depending on your products count.
Here is a solution from my side which i personally use. you can try this one.
Step 1: Add a your button with with a class named 'modal-global' and add specific URL in to the href attribute.
Example:
Step 2: Add a bootstrap modal named id "modal-global" in to your project before closing your body tag. And no need to put this modal code in your foreach loop.
Example:
Step 3: Now you have to write some javascript code for opening your modal and send an ajax request to your server and wait until its response.
Example:
Step 4: Here is an example of your controller method which will return an html content with a specific product details and our ajax will receive this html content as response
Example:
Its showing you first modal everytime because every modal is having same id view.
so do below change in your code and it will work.
This will create different IDs for each modal.
This is not good way to make it work.
You should have only one modal for every row and change data dynamically using jQuery on click event of modal show button.
Because so many records will make your HTML file larger and because of that performance would be slow.