I am using angular.element to dynamically inject table data into my table. Onload my table already has data, when I double click on the content it hides the old tbody and shows the new tbody where the dynamic data needs to be added and this tbody contains a form as well to send the edited data.
here's the html:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-center"><b>Code</b></td>
<td class="text-center"><b>Particulars</b></td>
<td class="text-center"><b>Amount(Rs. in lakh)</b></td>
</tr>
</thead>
<tbody ng-if="loading == false && iseditstmt == false">
<tr ng-repeat="b in blsheetinfo">
<td class="text-left"><b>{{b.key}}</b></td>
<td class="text-left">{{b.particular}}</td>
<td class="text-right" ng-dblclick="editstmt();editRec(blsheetinfo,'edit','stmtupdate');">{{b.amt}}</td>
</tr>
<tr ng-if="blsheetinfo == null">
<td class="text-center" colspan="3">No data found.</td>
</tr>
</tbody>
<tbody ng-if="iseditstmt == true">
<form role="form" ng-submit="updatestmt(data)" name="updatedata" id="updatedata" >
</form>
</tbody>
<tr ng-if="loading == 1"><td class="text-center" colspan="3">Loading...</td></tr>
</table>
This is the js code:
var HTMLcontent = "";
angular.forEach($scope.blsheetinfo, function (d) {
HTMLcontent += `<tr class="form-group">
<td class="text-left " ng-model="frmdata.key" name="key" id="key" ><b> `+d.key+`</b></td>
<td class="text-left" ng-model="frmdata.particular" name="particular" id="particular" >`+d.particular+`</td>
<td class="text-right" ng-model="frmdata.amt" name="amt" id="amt" ><input class="form-control" type="text">`+d.amt+`</td>
</tr>`
});
setTimeout(function(
)
{
// angular.element("#updatedata").html(HTMLcontent);
// tried both of these options
angular.element("#updatedata").append(HTMLcontent);
},2000);
The problems that I am facing are that it looks like my data is being added to the DOM but i am not able to see it. The tbody element has height set to 0
Related
I have an ajax function that gets an array of data from the backend and when I try to append those data in the blade it only shows 1 row instead of an array of rows.
Issues
Only 1 row append by ajax
Select option will be empty when results return while I don't have any code to clear my select option.
Code
$(function() {
// get cities
$('#province').on('change', function(e) {
e.preventDefault();
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});
var hospitalId = $(this).val();
$.ajax({
url: '{{ url('hospitals') }}/'+encodeURI(hospitalId),
dataType: "json",
type: 'GET',
success: function(data) {
console.log('dd: ', data.data);
if(data.data != null) {
$('.resError').hide();
$('.result').show();
// data to append
$.each(data.data, function(key, value) {
$('#code').html(value.code);
$('#name').html(value.name);
$('#type').html(value.type);
$('#class').html(value.class);
$('#beds').html(value.beds);
$('#owner').html(value.owner);
$('#province').html(value.province);
$('#city').html(value.city);
$('#address').html(value.address);
});
} else {
$('.resError').show();
$('.result').hide();
$('.resError').html('something went wrong, try again!');
}
},
error:function(err) {
$('.resError').show();
$('.resError').html('You need to select province!');
$('.result').hide();
$('#code').html('');
$('#name').html('');
$('#type').html('');
$('#class').html('');
$('#beds').html('');
$('#owner').html('');
$('#province').html('');
$('#city').html('');
$('#address').html('');
}
});
});
});
results
Update
<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
<table class="mb-3 table table-bordered table-hover">
<tbody>
<tr>
<th width="50">Code</th>
<td id="code"></td>
</tr>
<tr>
<th width="50">Name</th>
<td id="name"></td>
</tr>
<tr>
<th width="50">Type</th>
<td id="type"></td>
</tr>
<tr>
<th width="50">Class</th>
<td id="class"></td>
</tr>
<tr>
<th width="50">Beds</th>
<td id="beds"></td>
</tr>
<tr>
<th width="50">Owner</th>
<td id="owner"></td>
</tr>
<tr>
<th width="50">Province</th>
<td id="province"></td>
</tr>
<tr>
<th width="50">City</th>
<td id="city"></td>
</tr>
<tr>
<th width="50">Address</th>
<td id="address"></td>
</tr>
</tbody>
</table>
</div>
in blade
<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
<table class="mb-3 table table-bordered table-hover">
<tbody id="body">
</tbody>
</table>
</div>
in javascript
$.each(data.data, function(key, value) {
var element = `
<tr>
<th width="50">Code</th>
<td id="code">${value.code}</td>
</tr>
<tr>
<th width="50">Name</th>
<td id="name">${value.name}</td>
</tr>
<tr>
<th width="50">Type</th>
<td id="type">${value.type}</td>
</tr>
<tr>
<th width="50">Class</th>
<td id="class">${value.class}</td>
</tr>
<tr>
<th width="50">Beds</th>
<td id="beds">${value.beds}</td>
</tr>
<tr>
<th width="50">Owner</th>
<td id="owner">${value.owner}</td>
</tr>
<tr>
<th width="50">Province</th>
<td id="province">${value.province}</td>
</tr>
<tr>
<th width="50">City</th>
<td id="city">${value.city}</td>
</tr>
<tr>
<th width="50">Address</th>
<td id="address">${value.address}</td>
</tr>
`;
$('#body')append(element);
});
In your below code, you are appending value by the fieldId, that's why it is only appending only the last row(each iteration, the value is being updated in background) values are being set.
$('#code').html(value.code);
$('#name').html(value.name);
$('#type').html(value.type);
$('#class').html(value.class);
$('#beds').html(value.beds);
$('#owner').html(value.owner);
$('#province').html(value.province);
$('#city').html(value.city);
$('#address').html(value.address);
So, to achieve your purpose, you have to append these as a complete row and insert into the table, not just appending fieldwise value but rowwise and insert that row into the table. I hope you get my point.
The problem is that you are always changing the same elements of the same table. I think you will need to append one table per row:
$.each(data.data, function(key, value) {
$(".result").append('<table class="mb-3 table table-bordered table-hover">...</table>')
});
However, you may want to use Handlebars or some other templating library to avoid creating a long string with the table.
I have a problem with adding a button that will generate a PDF file for a specific table row. I can do this for whole table but not for a specific row.
My "Execute" view (create PDF file for entire table):
<div id="Grid">
<table class="table table-hover table-bordered" id="ExeTable">
<thead>
<tr>
<th class="text-center">Order nr</th>
<th class="text-center">Mat nr</th>
<th class="text-center">SAP nr</th>
<th class="text-center">Batch nr</th>
<th class="text-center">Tank</th>
</tr>
</thead>
<tbody id="myTable">
#foreach (var item in Model.ib)
{
<tr>
<td class="text-center">#item.OrderNr</td>
<td class="text-center">#item.MatNr</td>
<td class="text-center">#item.SapNr</td>
<td class="text-center">#item.BatchNr</td>
<td class="text-center">#item.TankName</td>
</tr>
}
</tbody>
</table>
</div>
#using (Html.BeginForm("Export", "Order", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" id="btnSubmit" value="Export" />
}
<script>
$(function (print) {
$("#btnSubmit").click(function () {
$("input[name='GridHtml']").val($("#Grid").html());
});
});
</script>
But I want to have a new column in the table where there will be a button to generate a PDF for a specific row. I tried something but without success.
// I tried this
<table class="table table-hover table-bordered" id="ExeTable">
<thead>
<tr>
<th>Create PDF</th>
<th class="text-center">Order nr</th>
<th class="text-center">Mat nr</th>
<th class="text-center">SAP nr</th>
<th class="text-center">Batch nr</th>
<th class="text-center">Tank</th>
</tr>
</thead>
<tbody id="myTable">
#foreach (var item in Model.ib)
{
<tr>
<td class="text-center">
#using (Html.BeginForm("Export", "Order", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" id="btnSubmit" value="Export" />
}
</td>
<td class="text-center">#item.OrderNr</td>
<td class="text-center">#item.MatNr</td>
<td class="text-center">#item.SapNr</td>
<td class="text-center">#item.BatchNr</td>
<td class="text-center">#item.TankName</td>
</tr>
}
</tbody>
</table>
My method that generete PDF file in "Order" controller:
[HttpPost]
[ValidateInput(false)]
public FileResult Export(string GridHtml)
{
using (MemoryStream stream = new System.IO.MemoryStream())
{
StringReader sr = new StringReader(GridHtml);
Document pdfDoc = new Document(PageSize.A4);
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, stream);
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr);
pdfDoc.Close();
return File(stream.ToArray(), "application/pdf", "Grid.pdf");
}
}
Your initial example pulls the inner contents of the Grid element. There does not appear to be a surrounding identifiable element from which to pull the contents for a row. A simple fix would be to add an id to each row, change the button id to a class to add the eventlistener, and add a data- attribute to hold info on which row was clicked:
#foreach (var item in Model.ib)
{
<tr id="#item.OrdrNr">
<td class="text-center">
#using (Html.BeginForm("Export", "Order", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" class="btnSubmit" data-row="##item.OrdeNr" value="Export" />
}
</td>
<td class="text-center">#item.OrderNr</td>
<td class="text-center">#item.MatNr</td>
<td class="text-center">#item.SapNr</td>
<td class="text-center">#item.BatchNr</td>
<td class="text-center">#item.TankName</td>
</tr>
}
And the JavaScript:
$(".btnSubmit").click(function (event) {
var target = $(event.currentTarget).data('row');
$("input[name='GridHtml']").val($(target).html());
});
What this will send to your Controller is just the contents of the clicked row:
<td class="text-center">
#using (Html.BeginForm("Export", "Order", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" class="btnSubmit" data-row="##item.OrdeNr" value="Export" />
}
</td>
<td class="text-center">#item.OrderNr</td>
<td class="text-center">#item.MatNr</td>
<td class="text-center">#item.SapNr</td>
<td class="text-center">#item.BatchNr</td>
<td class="text-center">#item.TankName</td>
In the controller, you can remove the button, wrap that in the rest of your table tags, and then convert to PDF.
I have a table I'm wanting to check the checkbox & add a class to a div when the user clicks on the table row, I can't get it to add the class.
can anyone show me where i'm going wrong.
HTML BELOW:
<div class="widgit">
<table id="QR_table">
<thead>
<tr class="QR_table-row">
<th class="qr_action">Checkbox</th>
<th class="qr_action">Action</th>
<th class="qr_from">FROM</th>
<th class="qr_to">TO</th>
<th class="qr_trans">Transport</th>
</tr>
</thead>
<tbody>
<tr class="QR-row">
<td class="checkbox">
<input class="modal-state" id="modal-1" type="checkbox" />
</td>
<td class="qr_action">PT</td>
<td class="qr_from">4</td>
<td class="qr_to">21</td>
<td class="qr_trans">WC</td>
</tr>
<tr class="QR-row">
<td class="checkbox">
<input class="modal-state" id="modal-1" type="checkbox" />
</td>
<td class="qr_action">PT</td>
<td class="qr_from">8</td>
<td class="qr_to">2</td>
<td class="qr_trans">T</td>
</tr>
</tbody>
JQUERY BLOW:
$(function() {
$(".QR-row").click(function() {
var $chk = $(this).find('input[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
if($($chk).is(':checked')){
$(".widgit").addClass("modal-open");
} else {
$(".widgit").removeClass("modal-open");
}
});
});
JSFIDDLE
From my point of View everything works fine.
In your fiddle the only div that you have is around your table and it seems to be the one you try to give a class.
<div class="widgit">
<table id="QR_table">
And everything works fine. Fiddle
If you want it to do something else then you have to be a bit more specific about what you try to achive
I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript
jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/
This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?
This is my html table
<table>
<thead>
<tr>
<td class="td20"><h3>Patient Name</h3></td>
<td class="td20"><h3>Summary</h3></td>
<td class="td20"> <h3>Created</h3></td>
<td class="td20"><h3>Last visit</h3></td>
<td class="td20"> <h3>Refer to a Doctor</h3></td>
</tr>
</thead>
<tbody id="patient_table">
<tr id="1">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
<tr id="2">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
</tbody>
</table>
This is my script:
$("#patient_table").click(function(e) {
var id = $(this).children('tr').attr('id');
alert(id);
});
The <tr> is generated dynamically inside the <tbody>.
I need to find the id of <tr> on click of <tr> itself.
With the script I'm always getting the first <tr> id only irrespective of the second <tr> click.
Use this instead:
$("#patient_table").on('click','td',function (e) {
var id = $(this).closest('tr').attr('id');
alert(id);
});
jsFiddle example
Since you mentioned the rows being generated dynamically you want to use .on() to delegate the event handling to the table cells.