I have a table that sorts line items by invoice, and am using bootstrap collapse to show/hide by invoice. The whole invoice row acts as a toggle for the table.
/-----------------------------------------------------\
| #547 | 2017-10-10 | $65.00 | Invoice | PAID |
|------|------------|--------|-----------------|------|
| | 2017-10-10 | $35.00 | seeded for test | |
| | 2017-10-10 | $15.00 | seeded for test | |
| | 2017-10-10 | $15.00 | seeded for test | |
|------|------------|--------|-----------------|------|
| #548 | 2017-10-13 | $46.00 | Invoice | OPEN |
|------|------------|--------|-----------------|------|
| | 2017-10-12 | $23.00 | Test form | |
| | 2017-10-12 | $23.00 | Test form | |
\-----------------------------------------------------/
The problem comes when I try to make the id number link to a details page. It simply doesn't work. Hover works fine, and the element inspector confirms the link exisits, but click on it just opens/closes the line items.
<table class="table table-striped" id="accordion">
<?php foreach($invoices as $invoice): ?>
<thead class="accordion-table" data-toggle="collapse" data-parent="#accordion" href="#collapse<?=$invoice['id']?>" aria-expanded="true" aria-controls="collapse<?=$invoice['id']?>">
<tr>
<th>#<?=$invoice['id']?></th>
<th><?=date('Y-m-d',strtotime($invoice['created']))?></th>
<th>$<?=number_format($invoice['amount'],2)?></th>
<th><?=$invoice['description']?></th>
<th><?=$invoice['invoiceStatus']?></th>
</tr>
</thead>
<tbody id="collapse<?=$invoice['id']?>" class="collapse accordion-body" role="tabpanel" >
<?php foreach($transactions[$invoice['id']] as $transaction): ?>
<tr>
<td></td>
<td><?=date('Y-m-d',strtotime($transaction['created']))?></td>
<td>$<?=number_format(abs($transaction['amount']),2)?></td>
<td><?=$transaction['description']?></td>
<td></td>
</tr>
<?php endforeach; ?>
</tbody>
<?php endforeach; ?>
</table>
The toggle is in the <thead> and the link is around the id in the first <th>.
Here is a JSFiddle that displays the current functionality.
Is there any way of getting the link to work without removing it from the row or making the row no longer toggle the collapse?
The solution to my problem was found here.
I added an event listener to the <a> tag and used jQuery's stopPropagation() method to prevent the Bootstrap Collapse from taking over.
$("a.invoice-link").click(function(event){
event.stopPropagation();
});
Use Javascript or jQuery redirection
<script>
$('#accordion a').click(function(){
window.location = $(this).attr('href');
return false;
});
</script>
Related
in this case I want to block the table cells with color according the booking status and check in / check out date. For example I have this on databases:
reservationID | guestName | villaName | roomName | checkIn | checkOut | status
----------------------------------------------------------------------------------------
RSV01 | John | Villa ABCD | Unit 1 | 2019-04-01 | 2019-04-05 | Confirmed
RSV02 | Mike | Villa ABCD | Unit 1 | 2019-04-05 | 2019-04-09 | On Hold
I want to show that reservation data on the some table with block color in each cells date according to check in / check out date and the status. This is the example of what I want to show:
Red color indicates the booking status is Confirmed and check in date is 2019-04-01 and check out date is 2019-04-05. Yellow color indicates the booking status is On Hold and check in date is 2019-04-05 and check out date is 2019-04-09.
This is my code I have done:
<table id="example1" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Villa ABCD</td>
<?php for($i=0;$i<=30;$i++) { ?>
<td><?=$i?></td>
<?php } ?>
</tr>
</thead>
<tbody>
<?php foreach($unit as $row) : ?>
<tr>
<?php foreach($reservation as $row1) : ?>
<td>Test</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Please anyone help me to solve this problem with PHP, HTML, or JQuery. Thank you.
I am struggling with this issue for a while and really appreciate if someone can give some idea on how I can move forward with.
The idea is to reduce the number of rows in the table by grouping the relevant data in the below format.
I need to convert the JSON response coming from server (non-grouped data) to a particular format so that I can paint the table with the grouped data.
**Initial Layout**
+------------+-----------+--------+------------+
| Category | Product | Size | Shipping
+------------+-----------+--------+------------+
| Category 1 | Product 1 | Big | Free |
| Category 1 | Product 2 | Small | Free |
| Category 1 | Product 3 | Big | Free |
| Category 1 | Product 4 | Small | Free |
+------------+-----------+--------+-------------
**Expected Result**
+------------+----------------------+--------+-----------
| Category | Product | Size | Shipping
+------------+----------------------+--------+------------
| Category 1 | Product 1, Product 3 | Big | Free |
| | Product 2, Product 4 | Small | Free |
+------------+----------------------+--------+----------
More details in the jsfiddle:
https://jsfiddle.net/zy8kj2tb/2/
// please see the code in jsfiddle
<h3>
Initial layout:
</h3>
<h6>
<p>
Category = Category 1, Category 2, etc or "blank"
</p>
<p>
Product = Product 1, Product 2, etc or "blank"
</p>
<p>
Size = Big, Small, XL, etc or "blank"
</p>
<p>
Shipping = Free, Standard, Expedited, etc or "blank"
</p>
<p>
dont group blank rows with cat, prod, size = make it as individual row
</p>
</h6>
<div id="initialLayout">
</div>
<h3>Expected result:</h3>
<table id="expectedTable" border="1" cellpadding="3" cellspacing="0">
<tr>
<th>Category</th>
<th>Product</th>
<th>Size</th>
<th>Shipping</th>
</tr>
<tr>
<td rowspan=2>Category 1</td>
<td rowspan="2">Product 1, Product 3 <br>Product 2, Product 4</td>
<td rowspan="2">Big <br>Small</td>
<td rowspan="2">Free</td>
</tr>
</table>
<br/>
Just replace your HTML with this one, I did two things -
Changed first row with -
<td rowspan="2">Product 1, Product 3 <br>Product 2, Product 4</td>
<td rowspan="2">Big <br>Small
</td>
Removed respective td tags from the second row
I just looked at your code
where you have written
<td rowspan=2>Category 1</td>
<td>Product 1, Product 3</td>
<td>Big</td>
<td rowspan=2>Free</td>
It should be
<td rowspan="2">Category 1</td>
<td>Product 1, Product 3</td>
<td>Big</td>
<td rowspan="2">Free</td>
you have just missed some quotes
I'm having trouble for almost 3 days now with the code I have .I'm hoping that somebody could help me give any idea or right solution here.
what i want is upon clicking the view info button, it should display all the images in the modal but in my code, only one image has been displayed.In my javascipt code, i dont have any more idea how to loop
inside the script even if i've tried few ways.
Transaction
tran_id | title
1 | allownce
2 | food
3 | tuition fee
Database table 2
Image
image_id | tran_id | image_title
1 | 1 | receipt.png
2 | 1 | |receipt2.png
3 | 1 | receipt3.png
4 | 1 | receipt4.png
5 | 2 | receipt.png
6 | 2 | receipt2.png
7 | 2 | receipt3.png
8 | 3 | receipt.png
9 | 3 | receipt2.png
This is the modal Output
controller
public function index()
{
$trans = Transaction::with('listImage')->get();
return view('pages.test',compact('trans'));
}
Relationship
public function listImage(){
return $this->hasMany('App\Image','tran_id','tran_id');
}
Table list
<div class="box-body table-responsive no-padding">
<table class="table table-bordered">
<tr>
<th>title Name</th>
<th>View</th>
</tr>
#foreach($trans as $tran)
<tr>
<td>{!! $tran->title !!}</td>
<td><a class="btn" href="#" data-image-id="" data-toggle="modal" data-title="{!! $tran->title !!}" #foreach($tran['listImage'] as $image) data-image="../Transaction/{!! $image->tran_file !!}" #endforeach data-target="#image-gallery"><button>View Info</button></a></td>
</tr>
#endforeach
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
loadGallery(true, 'a.btn');
function loadGallery(setIDs, setClickAttr){
var current_image,
selector,
counter = 0;
function updateGallery(selector) {
var $sel = selector;
var thisImage = $(this).data('image');
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if(setIDs == true){
$('[data-image-id]').each(function(){
counter++;
$(this).attr('data-image-id',counter);
});
}
$(setClickAttr).on('click',function(){
updateGallery($(this));
});
}
});
</script>
here the modal image
I have multiple ngRepeats generate table contents, depending on the view the user wants to see, a different ngRepeat is used to generate the table. When the user switches their view, and one of the following is removed from the DOM and another added, the new ngRepeat does not reference to the same pagination.filteredData array.
Example: Main is my controller, using controller as syntax.
<tr ng-if="Main.tableConfig.programGranularity == 'overall'" ng-repeat="item in Main.pagination.filteredData = ( Main.data.overallData | filterByDateRange | filter: Main.tableConfig.generalSearch | orderBy: ['Date', 'Name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize">
<td ng-repeat="column in Main.tableConfig.columnsConfig | selectColumnsByGranularity: Main.tableConfig.programGranularity">
<span ng-if="!column.isDate" ng-bind="item[column.dataValue] | ifEmpty: 0"></span>
<span ng-if="column.isDate" ng-bind="item[column.dataValue] | date:'MM/dd/yyyy': 'UTC' | ifEmpty: 0"></span>
</td>
</tr>
<tr ng-if="Main.tableConfig.programGranularity == 'team'" ng-repeat="item in Main.pagination.filteredData = ( Main.data.teamData | filterByDateRange | filter: Main.tableConfig.generalSearch | orderBy: ['Date', 'Name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize">
<td ng-repeat="column in Main.tableConfig.columnsConfig | selectColumnsByGranularity: Main.tableConfig.programGranularity">
<span ng-if="!column.isDate" ng-bind="item[column.dataValue] | ifEmpty: 0"></span>
<span ng-if="column.isDate" ng-bind="item[column.dataValue] | date:'MM/dd/yyyy': 'UTC' | ifEmpty: 0"></span>
</td>
</tr>
<tr ng-if="Main.tableConfig.programGranularity == 'colleague'" ng-repeat="item in Main.pagination.filteredData = ( Main.data.parsedData | filterByDateRange | filter: Main.tableConfig.generalSearch | orderBy: ['Date', 'Name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize">
<td ng-repeat="column in Main.tableConfig.columnsConfig | selectColumnsByGranularity: Main.tableConfig.programGranularity">
<span ng-if="!column.isDate" ng-bind="item[column.dataValue] | ifEmpty: 0"></span>
<span ng-if="column.isDate" ng-bind="item[column.dataValue] | date:'MM/dd/yyyy': 'UTC' | ifEmpty: 0"></span>
</td>
</tr>
I want the same pagination.filteredData array to be set by each of the ngRepeat directives. However, only the first ngRepeat that runs sets the value and no other ngRepeat will set it again.
I've tried ngInit and initializing an object with pagination inside of it, and referencing that in my ngRepeat. I have also tried using $parent.pagination.filteredData.
Using AngularJS v1.5.0
How do I get this to work?
Similar to https://stackoverflow.com/questions/38235907/angularjs-service-variable-not-being-set-inside-of-ngrepeat but reworded and fundamentally different. Solving the same problem though.
Edit: Refactored to utilize the controller as syntax, the problem still persists. To me it seems that when I switch to a different ngRepeat, a new array and reference is created, instead of overwriting the current arrays values.
Okay, I have spent some time putting together a demo replicating (as best I could) the code that you have provided <-- Broken, and I think I understand your issue. You say "the first ng-repeat that runs sets the value", and I think it's actually the LAST ng-repeat that runs that is setting it. It's not having a problem setting the value, the problem is that all 3 ng-repeats run every time, so it's always the last one that wins.
The reason this happens is because ng-repeat executes BEFORE ng-if for the common case of <element ng-if="item.showMe" ng-repeat="item in Main.items"></element>
That being said, even though your ng-if condition is false, so the <tr> does not get displayed, the ng-repeat has already run, and already set Main.pagination.filteredData
I think your best course of action would be to move your ng-if up one level to the <tbody>. It would look like the following:
WORKING DEMO <-- Working
<table>
<thead>
<tr>
<th>Name</th>
<th>Data</th>
<th>Date</th>
</tr>
</thead>
<tbody ng-if="Main.tableConfig.programGranularity == 'overall'" >
<tr ng-repeat="item in Main.pagination.filteredData = (Main.data.overallData | filterByDateRange | orderBy: ['date', 'name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize">
<td ng-bind="item.name"></td>
<td ng-bind="item.overall"></td>
<td ng-bind="item.date"></td>
</tr>
</tbody>
<tbody ng-if="Main.tableConfig.programGranularity == 'team'" >
<tr ng-repeat="item in Main.pagination.filteredData = (Main.data.teamData | filterByDateRange | orderBy: ['date', 'name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize">
<td ng-bind="item.name"></td>
<td ng-bind="item.team"></td>
<td ng-bind="item.date"></td>
</tr>
</tbody>
</table>
I am trying to insert rows within a cell in HTML Table using jquery, I want something like this:
--------------
ID | Sec | Div
--------------
1 | S1 | D1
| S2 | D2
| S3 | D3
--------------
2 | S3 | D3
| S4 | D4
| S5 | D5
--------------
Here is what I have so far:
function insertRows(this){
var Rows1 = '<tr><td> S1 </td></tr><tr><td> S2 </td></tr><tr><td> S3 </td></tr>'
var Rows2 = '<tr><td> S3 </td></tr><tr><td> S4 </td></tr><tr><td> S5 </td></tr>'
this.srcElement.parentElement.nextSibling.outerHTML = Rows1
this.srcElement.parentElement.nextSibling.nextSibling.outerHTML = Rows2
}
What is does is, it inserts all in the same Row, something like this:
---------------------
ID | Sec | Div
---------------------
1 | S1S2S3 | D1D2D3
---------------------
2 | S3S4S5 | D3D4D5
---------------------
How can I make this to work?
You Can Fullfill your requirement without using jquery
just Paste this Code inside body tag
<table>
<tr>
<td >ID</td>
<td>SEC</td>
<td>DIV</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>S1</td>
<td>D1</td>
</tr>
<tr>
<td>S2</td>
<td>D2</td>
</tr>
<tr>
<td>S3</td>
<td>D3</td>
</tr>
<tr><td colspan="3">---------------------</td></tr>
<tr>
<td>ID</td>
<td>SEC</td>
<td>DIV</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>S1</td>
<td>D1</td>
</tr>
<tr>
<td>S2</td>
<td>D2</td>
</tr>
<tr>
<td>S3</td>
<td>D3</td>
</tr>
</table>
here you can find live example http://jsfiddle.net/Anujyadav123/AdQy3/
.innerHTML is rather broken when dealing with tables, at least under IE.
Your choices are:
Restrict the use of .innerHTML to only change the contents of a td element.
Use .innerHTML to replace the ENTIRE table structure
Use DOM methods to manipulate table rows and table cells.
https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
take a look here Add colspan and rowspan on table on the fly
OR
is it important to add row, if not you are able to add your values into cell
Example:
function showP(){
txt1 = $($('#myTable').find('TR').find('TD')[1]).html()+'</br>S1'
txt3 = $($('#myTable').find('TR').find('TD')[3]).html()+'</br>D1'
$($('#myTable').find('TR').find('TD')[1]).html(txt1 )
$($('#myTable').find('TR').find('TD')[3]).html(txt3 )
}