I have a foreach loop that i am using to show the dataset, but i want to show specific dataset under a single button so that button click leads to showing that particular data.
My code is the following:
#foreach($new_records as $new_recordss)
<tr>
<td scope="col">{{ $new_recordss['Mob'] }}</td>
<td scope="col"><div class="btn-group">
<button type="button" class="btn btn-primary btn-xs shownum_class"> <span class=" glyphicon glyphicon-earphone" aria-hidden="true"> </span> show/hide</button><div class="numero_class"><td scope="col">{{ $new_recordss['PreferredDate'] }}</td><td scope="col">{{ $new_recordss['PreferredCity'] }}</td><td scope="col">{{ $new_recordss['BookingId'] }}</td><td scope="col">{{ $new_recordss['Documents'] }}</td><td scope="col">{{ $new_recordss['Age'] }}</td><td scope="col">{{ $new_recordss['Gender'] }}</td></div></div></td>
</tr>
#endforeach
Jquery code :
<script type="text/javascript">
$(document).ready(function() {
$(".numero_class").hide();
$(".shownum_class").click(function(){
$(this).next(".numero_class").toggle();
});
});
</script>
Currently this is not working.Any pointers will be useful.Plz help
Related
Sorry in advance if I messed up. This is my first post here and English is not my native language.
I'm writing a modal in a webapp that needs to display the move history of a product. Previously, the application receives the history through an HttpServletRequest in java.
When clicking on a button, the modal is displayed.
My problem is that I am unable to filter the list in the display.
Here is the jsp code that contains the button as well as the constraint for the filter: data-noRefALivrer="${listeProduitsFinis.refALivrer}"
...
<input type="hidden" name="inputCurrentRefALivrer">
...
<c:forEach var="listeProduitsFinis" items="${LISTPRODUITFINI}">
<tr class="trProduitFini" data-toggle="modal"
data-id="${listeProduitsFinis.detCmd}"
data-noCmd="${listeProduitsFinis.cmd}"
data-noDetCmd="${listeProduitsFinis.detCmd}"
data-noRefALivrer="${listeProduitsFinis.refALivrer}">
<td style="font-size: 18px;" class="text-center" id="detCMDID">${listeProduitsFinis.detCmd}</td>
<td style="font-size: 18px;" class="text-center">${listeProduitsFinis.refALivrer}</td>
<td style="font-size: 18px;" class="text-center">${listeProduitsFinis.location}</td>
<td>
<button class="btn btn-primary btn-lg btn-block"
style="width: 40px; height: 40px;">
<span style="font-size: 1.5em; color: white"
class="glyphicon glyphicon-time">
</span>
</button>
</td>
</tr>
</c:forEach>
...
Here is the javascript code associated with the jsp file and the modal
document.addEventListener('DOMContentLoaded', function()
{
...
$(".table").delegate('tbody tr', 'click', function(e)
{
var trToUse = $(e.target).closest('tr');
var noRefALivrer = trToUse.attr('data-noRefALivrer')
e.preventDefault();
if (e.target.tagName == 'BUTTON' || e.target.tagName == 'SPAN')
{
$("#inputCurrentRefALivrer").attr('value', noRefALivrer);
$("#titreh4").text("Historique de " + noRefALivrer);
$("#modalAfficherHistorique").modal()
}
else
{
$("#modalAfficherImage").modal()
}
});
...
}
Again "refALivrer" is the main constraint to filter the history.
Finally, here is the jsp code of the modal (in a separate file)
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<div id="modalAfficherHistorique" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header" style="background-color: red">
<h4 id="titreh4" class="modal-title text-center"></h4>
</div>
<div class="modal-body text-center">
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th scope="col" class="text-center">DE</th>
<th scope="col" class="text-center">À</th>
<th scope="col" class="text-center">DATE</th>
<th scope="col" class="text-center">QUI</th>
<th scope="col" class="text-center">QUOI</th>
</tr>
</thead>
<tbody>
<c:forEach var="listeHistorique" items="${LISTHISTORIQUE}">
<c:if test="${listeHistorique.refALivrer == param.inputCurrentRefALivrer}">
<tr>
<td style="font-size: 10px;" class="text-center">${listeHistorique.oldLocation}</td>
<td style="font-size: 10px;" class="text-center">${listeHistorique.newLocation}</td>
<td style="font-size: 10px;" class="text-center">${listeHistorique.date}</td>
<td style="font-size: 10px;" class="text-center">${listeHistorique.user}</td>
<td style="font-size: 10px;" class="text-center">${listeHistorique.operation}</td>
</tr>
</c:if>
</c:forEach>
</tbody>
</table>
</div>
<div class="modal-footer" style="background-color: red">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Note that the h4 tag does indeed display the "refALivrer"
Also note that if I remove the "c:if", the history is displayed correctly, but without a filter.
TY all for your help!
I have a datatable with a column that contains values of type integer, but when i show those values on my view numbers arent aligned well, so i have a value in a row = 600 and in another row = 1200 and the 6 of 600 is aligned with the thousand digit (1) instead with the hundreeds.
And this is my view with my data table:
<table id="example1" class="table table-striped table-responsive" width="100%">
<thead class="thead">
<tr>
<th style="display: none">Codigo</th>
<th>ID</th>
<th>Producto</th>
<th>Tipo de Producto</th>
<th>Marca</th>
<th>Modelo</th>
<th>Moneda de Compra</th>
<th class="quitarDecimales">Costo Total</th>
<th>Moneda de Venta</th>
<th class="quitarDecimales">Precio de Lista</th>
<th>Margen Bruto</th>
<th style="width: 12%">Accion</th>
</tr>
</thead>
<tbody>
#foreach($file as $key => $product)
#if($product->status == 1)
<tr>
<td style="display: none">{{ $key+1 }}</td>
<td>{{ $product->id }}</td>
<td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
<td>{{ $product['ptype']['productType']}}</td>
<td>{{ $product->marca->brandName }}</td>
<td>{{ $product->modelo->modelName}}</td>
<td>{{ $product->coin }}</td>
<td>{{ $product->costUSD }}</td>
<td>{{$product->sale_coin}}</td>
<td>{{$product->list_priceUSD}}</td>
<td>{{$product->marginUSD}}</td>
#php
$count_product = App\Model\Purchase::where('product_id',$product->id)->count();
#endphp
<td>
<!--<a title="Download" id="download" class="btn btn-sm btn-success"
href="/products/download/{{ $product->file }}"><i
class="fa fa-download"></i></a>-->
<a title="Edit" class="btn btn-sm text-white"
style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
href="{{ route('products.edit', $product->id) }}"><i
class="fa fa-edit"></i></a>
<a title="Delete" id="delete" class="btn btn-sm btn-danger"
href="{{ route('products.delete', $product->id) }}"><i
class="fa fa-trash"></i></a>
<a title="Info" id="info" class="btn btn-sm btn-info" href="{{route('products.detail', $product->id)}}" ><i class="fa fa-eye" ></i></a>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
So i tried doing this:
div tbody tr{
text-align: center;
}
Which aligns my number digits of the different rows in my table but my thead titles are not aligned. My values go too far to the right.
By default text is aligned to the left in tables which is what you are seeing above. If you want the numbers to be aligned correctly you need to add text-align:right; to the td elements which contain numbers.
It looks like you might be using BootStrap, in which case they already have a class you can use called text-right which will set the text-align to right.
If you are not using BootStrap you can add the class yourself like this:
<style>
.text-right{
text-align: right;
}
</style>
then add the class to the td elements as needed.
My stylesheet:
div tbody tr .numero{
text-align: right;
padding-right: 50px;
}
div tbody tr{
text-align: center;
}
div thead tr{
text-align: center;
}
My view:
<table id="example1" class="table table-striped table-responsive" width="100%">
<thead class="thead">
<tr>
<th style="display: none">Codigo</th>
<th>ID</th>
<th>Producto</th>
<th>Tipo de Producto</th>
<th>Marca</th>
<th>Modelo</th>
<th>Moneda de Compra</th>
<th class="quitarDecimales">Costo Total</th>
<th>Moneda de Venta</th>
<th class="quitarDecimales">Precio de Lista</th>
<th>Margen Bruto</th>
<th style="width: 12%">Accion</th>
</tr>
</thead>
<tbody>
#foreach($file as $key => $product)
#if($product->status == 1)
<tr>
<td style="display: none">{{ $key+1 }}</td>
<td>{{ $product->id }}</td>
<td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
<td>{{ $product['ptype']['productType']}}</td>
<td>{{ $product->marca->brandName }}</td>
<td>{{ $product->modelo->modelName}}</td>
<td >{{ $product->coin }}</td>
<td class="numero">{{ $product->costUSD }}</td>
<td>{{$product->sale_coin}}</td>
<td class="numero">{{$product->list_priceUSD}}</td>
<td class="numero">{{$product->marginUSD}}</td>
#php
$count_product = App\Model\Purchase::where('product_id',$product->id)->count();
#endphp
<td>
<!--<a title="Download" id="download" class="btn btn-sm btn-success"
href="/products/download/{{ $product->file }}"><i
class="fa fa-download"></i></a>-->
<a title="Edit" class="btn btn-sm text-white"
style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
href="{{ route('products.edit', $product->id) }}"><i
class="fa fa-edit"></i></a>
<a title="Delete" id="delete" class="btn btn-sm btn-danger"
href="{{ route('products.delete', $product->id) }}"><i
class="fa fa-trash"></i></a>
<a title="Info" id="info" class="btn btn-sm btn-info" href="{{route('products.detail', $product->id)}}" ><i class="fa fa-eye" ></i></a>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
I am working on a Laravel and Bootstrap project and currently doing the update feature for multiple rows by using a modal at a time.
I have a table with a checkbox in each row :
<?php $No = 1; ?>
<table id="tbl_pengadaan" class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th ><input type="checkbox" name="cb_all" id="checkall"></th>
<th >No</th>
<th >No PR</th>
<th >PR Line</th>
<th >Shopping Cart</th>
<th >PR Received Date</th>
<th >PGr</th>
<th >No Material</th>
<th style="width: 400px">Nama Material</th>
<th >Qty</th>
<th >UoM</th>
<th >Unit Price</th>
<th >Total Budget</th>
<th >PR Currency</th>
<th >No RFx</th>
<th style="width: 250px">Judul RFx</th>
<th >Tgl RFx</th>
<th >Submission Deadline</th>
<th >Tgl Opening Tender</th>
<th >TE Mulai</th>
<th >TE Sampai</th>
<th >Negosiasi Mulai</th>
<th >Negosiasi Sampai</th>
<th >Klarifikasi Mulai</th>
<th >Klarifikasi Sampai</th>
<th >No PO</th>
<th >PO Line</th>
<th >Created at</th>
<th >Updated at</th>
#role('admin')
<th>Action</th>
#endrole
</tr>
</thead>
<tbody>
#foreach($pengadaans as $row)
<tr>
<!-- <td>{{$row->id}}</td> -->
<td>
<input type="checkbox" name="cb_mark" id="cb{{$No}}"
data-target="#modal-edit-pengadaan"
data-pr_no="{{$row->pr_no}}"
>
</td>
<td>{{$No}}</td>
<td>{{$row->pr_no}}</a></td>
<td>{{$row->pr_line}}</td>
<td>{{$row->shopping_cart}}</td>
<td>{{ \Carbon\Carbon::parse($row->transfer_date)->format('d-M-Y') }}</td>
<td>{{$row->pgr}}</td>
<td>{{$row->no_material}}</td>
<td>{{$row->nama_material}}</td>
<td align="right">{{$row->quantity}}</td>
<td>{{$row->uom}}</td>
<td align="right">{{number_format($row->unit_price,2)}}</td>
<td align="right">{{number_format($row->total_budget,2)}}</td>
<td>{{$row->pr_cur}}</td>
<td>{{$row->rfx}}</td>
<td>{{$row->rfx_title}}</td>
<td style="white-space: nowrap">{{ $row->rfx_date ? \Carbon\Carbon::parse($row->rfx_date)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->sub_deadline ? \Carbon\Carbon::parse($row->sub_deadline)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->tgl_opening ? \Carbon\Carbon::parse($row->tgl_opening)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->te_start ? \Carbon\Carbon::parse($row->te_start)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->te_to ? \Carbon\Carbon::parse($row->te_to)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->nego_start ? \Carbon\Carbon::parse($row->nego_start)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->nego_to ? \Carbon\Carbon::parse($row->nego_to)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->clarification_start ? \Carbon\Carbon::parse($row->clarification_start)->format('d-M-Y') : "" }}</td>
<td style="white-space: nowrap">{{ $row->clarification_to ? \Carbon\Carbon::parse($row->clarification_to)->format('d-M-Y') : "" }}</td>
<td>{{$row->po_no}}</td>
<td>{{$row->po_line}}</td>
<td style="white-space: nowrap">{{$row->created_at}}</td>
<td style="white-space: nowrap">{{$row->updated_at}}</td>
<td>
hapus
</td>
</tr>
<?php $No++; ?>
#endforeach
</tbody>
</table>
I want to pass some data from the checked rows to a modal. Here is the code of the modal :
<!-- [start] Modal edit pengadaan -->
<div class="modal fade" id="modal-edit-pengadaan">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content" style="top: 100px">
<form method="post" action="pengadaan/update">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit data pengadaan</h5>
</div>
<div class="modal-body">
{{ csrf_field() }}
<table>
<tr>
<th>No PR</th>
</tr>
<!--
<tr>
<td><input type="text" class="form-control" name="no_pr" id="no_pr" value="no_pr (based on checked row)"></td>
</tr>
-->
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- [end] Modal edit pengadaan -->
Here is my button that trigger the modal
<button type="button" style="float:right; margin-right: 3px" class="btn btn-info" data-toggle="modal" data-target="#modal-edit-pengadaan">
<i class="fa fa-pencil"></i> Edit Selected
</button>
And here is my javascript code :
$('#modal-edit-pengadaan').on('show.bs.modal', function (event) {
var rowCount = ($('#tbl_pengadaan tr').length)-1;
console.log('test' + rowCount);
if ( event.relatedTarget != null) {
var button = $(event.relatedTarget) // Button that triggered the modal
var cbrow = document.getElementById("cb1");
}
var no_pr = cbrow.data('pr_no')
var modal = $(this)
//modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body #jlh_row').text(no_pr)
})
I want to make the table row in the Modal can be generated based on checked rows.
Thanks in advance
So the steps with are this:
Store the modal element to append your rows to in a variable var modalRowContent = //your selector
Find the checked th elements
Find their parent rows tr
Append the rows to modalRowContent
The code may look something like:
var modalRowContent = $('#sectionToAppendTo'); // 1
var checkedRows = $('th input:checked').closest('tr'); //2 + 3
modalRowContent.append(checkedRows);// 4
Or you can chain it all
// 1 // 4 // 2 // 3
$('#sectionToAppendTo').append( $('th input:checked').closest('tr') );
NOTE: I haven't tested this code. Please do not consider this a working answer.
I keep on getting an unwanted span tag with and "s" in it when viewing in Chrome. I've searched online but I am still stumped. Help please?
Stop AngularJS inserting <span class="ng-scope"></span> using ng-include
Looked at that post. Similar problem but I think my issue is caused by something else. I am not using ng-include.
Let me know if I can provide more details!
Here is the code https://github.com/benhbaik/crm
Here is public/views/users/all.html and a screenshot of the issue below it.
<div class="page-header">
<h1>
Users
<a href="/users/create" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
New User
</a>
</h1>
</div>
<div class="jumbotron text-center" ng-show="user.processing">
<span class="glyphicon glyphicon-repeat spinner"></span>
<p>Loading Users...</p>
</div>
<!-- GETTING RANDOM SPAN TAG HERE w/ "s" -->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>_id</th>
<th>Name</th>s
<th>Username</th>
<th class="col-sm-2"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in user.users">
<td>{{ person._id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td class="col-sm-2">
Edit
Delete
</td>
</tr>
</tbody>
</table>
Here is a picture in dev tools.
There's a typo in your code:
<th>Name</th>s
I'm creating a dynamic table using angular.js and it gets populated with results from a study. I need to be able to show more data about each of these studies if a user clicks on that specific row in the table. Here's what the table looks like.. I'm thinking I have to use ngOptions or ngSelect, but I'm not sure. Any help is greatly appreciated.
<table class="table table-condensed table-hover">
<thead>
<tr>
<td class="center" id="table-header">Date</td>
<td class="center" id="table-header">Study</td>
<td class="center" id="table-header">Sample</td>
<td class="center" id="table-header">File</td>
<td class="center" id="table-header">Big Data</td>
<td class="center" id="table-header">Action</td>
</tr>
</thead>
<tbody ng-repeat="study in studies | filter: filter_name">
<tr>
<td class="center">{{ study.created_at }}</td>
<td class="center">{{ study.study }}</td>
<td class="center">{{ study.sample }}</td>
<td class="center">{{ study.fastq }}</td>
<td class="center">{{ study.bigData }}</td>
<td class="center">
<div class="dropdown center">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li id="list-item">Continue</li>
<li id="list-item" data-toggle="modal" data-target="#more-metadata-modal">More Data</li>
<li id="list-item" data-toggle="modal" data-target="#edit-metadata-modal">Edit</li>
<li id="list-item" data-toggle="modal" data-target="#delete-metadata-modal">Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
use ng-Click and pass the object or the id from which you can fetch more values for the selected item.
ng-click=showMore(study);
and using this styudy you can populate a scope object that can be used in a modal panel for that particular study object