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
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 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>
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 have a table in which there are three columns i.e. Event id, Event and Counts. There can be multiple rows with same event id having their own counts values under Counts column. I have to find out the distinct Event id and then add up their corresponding count values and display the output table with distinct Event id, Event and Count in which the count value will be total sum of available counts. I tried to show tabular form of what I want to do as following:
+--------+--------------+----------+
| Ashley Janes |
+--------+--------------+----------+
|Eventid | Event | Count |
+--------+--------------+----------+
| 5 | Wash apple | 10 |
| 2 | cook potatoes| 20 |
| 8 | cut chillies | 5 |
+--------+--------------+----------+
| Taylor Perry |
+--------+---------------+---------+
| 2 | cook potatoes | 30 |
| 5 | Wash apple | 40 |
| 8 | cut chillies | 60 |
Now I have to add count values of corresponding event id and display it in a result table as following::
+--------+--------------+----------+
|Eventid | Event | Count |
+--------+--------------+----------+
| 5 | Wash apple | 50 |
| 2 | cook potatoes| 50 |
| 8 | cut chillies | 65 |
+--------+--------------+----------+
so far I have done following:
Response.Write "<div><table><tr>"
Response.Write"<td class='tdcell1'>Event ID</td><td class='tdcell1'>Count</td></tr>"
Response.Write"<tr><td align=center width= '15%'></td><td><div class= 'resultSum'></div></td></tr>"
Response.Write"</table><div>"
<script>
$(function() {
GetEventIds('#displaytable')
});
function GetEventIds(tableIdWithHash) {
var eventIds = [];
var eventSum = Number(0);
var count = Number(0);
$(tableIdWithHash).find('.Idevent').each(function(i){
var eId = $(this).html();
if (eventIds.indexOf(eId) === -1)
eventIds.push($(this).html());
if (eId = eventIds)
count++;
eventSum += Number($(this).html());
$(".resultSum").html(eventSum);
});
alert('EventIds: ' + JSON.stringify(eventIds));
return eventIds;
}
</script>
Code for the table need to be parsed.
<table id= 'displaytable' width='35%' border=1 style= 'margin-bottom:35px; margin-top:35px;'>
<tr>
<td class='tdcell1'>Event ID</td>
<td class='tdcell1'>Event</td>
<td class='tdcell1'>Count</td>
</tr>
<tr style='font-size:13px;'>
<td align='right' class='tdcell1' colspan='3'>Ashley Janes</td>
</tr>
<tr style='font-size:13px;'>
<td align=center class='Idevent' width= '15%'> 5 </td>
<td align=center class='eventNames' width= '35%'> Wash Apple </td>
<td class='eventCounts' align=center width= '15%'>11</td>
</tr>
<tr style='font-size:13px;'>
<td align=center class='Idevent' width= '15%'> 2 </td>
<td align=center class='eventNames' width= '35%'> Cook Potatoes </td>
<td class='eventCounts' align=center width= '15%'>20</td>
</tr>
<tr style='font-size:13px;'>
<td align='right' class='tdcell1' colspan='3'>Taylor Perry</td>
</tr>
<tr style='font-size:13px;'>
<td align=center class='Idevent' width= '15%'> 2 </td>
<td align=center class='eventNames' width= '35%'> Cook Potatoes </td>
<td class='eventCounts' align=center width= '15%'>20</td>
</tr>
<tr style='font-size:13px;'>
<td align=center class='Idevent' width= '15%'> 5 </td>
<td align=center class='eventNames' width= '35%'> Wash Apple </td>
<td class='eventCounts' align=center width= '15%'>106</td>
</tr>
</table>
My code gives me the output for the sum of the event id not the counts. How do I do it using JavaScript? Please help.
Take a look at this code and wether works as you expect it.
$(function() {
GetEventIds('#displaytable')
});
//this is a bad function, because it does way more than it says.
function GetEventIds(tableIdWithHash) {
//a little helper
//convert a value to int32. any non-numeric value -> 0
//only the low 32-bits are kept, if the value exceeds the range
//and removes all bits after the dot (2.9 -> 2 and -2.9 -> -2)
function int(v){ return v|0; }
var eventSum = 0;
var events = {};
$(tableIdWithHash).find('.Idevent').each(function(i){
var $this = $(this);
var eId = $this.text().trim();
//finding the .eventCount-node of this row
var count = int( $this.siblings('.eventCounts').text().trim() );
events[eId] = int( events[eId] ) + count;
//still don't get what #resultSum should contain (logically)
//the total amount of events, independent of the event-id?
eventSum += count;
});
$("#resultSum").html(eventSum);
var eventIds = Object.keys(events);
console.log('EventIds: ', eventIds);
console.log('Event counts by Id: ', JSON.stringify(events));
return eventIds;
}
Still need some info on the purpose/meaning of #resultSum. I made just an assumption on that; am i right?
And as I commented on the function, What is the purpose of this function? It does more than it says. This may lead to confusion/bugs. Maybe you want to split this into multiple functions, or rename it and drop the return-value.
Or maybe you want to parse the table into some data-structure and operate on this? But then again it may be wiser to paste JSON out of the backend, than parsing some markup.
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 )
}