How do i get two xml results in one column as output. Now i get for evru output an column.
pub += '<td valign="top" class="col1">' + roepnaam + '</td>' + '\n';
pub += '<td valign="top" class="col2">' + naamMedewerker + '</td>' + '\n';
Can anyone help em out. I want those together. I tried this:
pub += '<td valign="top" class="col1">' + roepnaam + + naamMedewerker + '</td>' + '\n';
But didn't work. Please help me out?
Here: Remove +
pub += '<td valign="top" class="col1">' + roepnaam + naamMedewerker + '</td>' + '\n';
Related
I have an AJAX call, and on success, a HTML <img> element is appended to the tbody.
Here is the code:
for (var i = 0; i <= list.length - 1; i++) {
var patientsList = ' <td class="point">' +
(i+1) +
'</td>' +
'<td class="title"> ' +
list[i].dateOfBirthday +
'</td>' +
'<td class="title"> ' +
list[i].lastName +
'</td>' +
'<td class="title"> ' +
list[i].firstName +
'</td>' + '<td>' + '</td>'
+ '<td>' + '</td>'
+ '<td>' + '</td>'
+ '<td style="text-align:end;>' + ' <img src="~/images/doc 50.png" />'+ '</td>';
$("#patients").append('<tr>' + patientsList + '</tr>');
};
The problem is, the image does not appear in the table.
The path is correct.
Why is it not appending?
Path is not correct. Try ./ instead of ~/ .
Your image name contains whitespace: doc 50.png. Try to rename the file and replace the code with something like this:
<img src="./images/doc-50.png" />'
And if your images folder is at the same level as the file, which code you have provided, use ./, not ~/.
This is a simplified Bootstrap table created in JavaScript for a shopping cart. I have one row with four columns. The problem is when I open it in Chrome all the data for columns 2, 3 and 4 are all placed in column 1.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="productsList">
</div>
<script>
var productsList = document.getElementById('productsList');
productsList.innerHTML += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
productsList.innerHTML += '<tr>' +
'<td><div><img style="width:200px; height:300px;" src="nopicture.jpg" /></div></td>' +
'<td>' +
'<h6 id="productname"> Nice Product</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs. 5000/=</div></td>' +
'<td><div id="productquantity">3</div></td>' +
'</tr>';
productsList.innerHTML += '</tbody>' +
'</table>';
</script>
</body>
function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');
productsList.innerHTML += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for(var i in products) {
var picture = products[i].picture;
var name = products[i].name;
var price = products[i].price;
var quantity = products[i].quantity;
productsList.innerHTML += '<tr>' +
'<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
'<td>' +
'<h6 id="productname">' + name + '</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
'<td><div id="productquantity">' + quantity + '</div></td>' +
'</tr>';
}
productsList.innerHTML += '</tbody>' +
'</table>';
}
You can't append to the innerHTML of an element like that. When you do it the first time, Chrome tries to close out your table for you and make it valid HTML. The second+ time you are appending HTML after your table is closed with </table>. Put the HTML into a local variable instead and then assign innerHTML once at the end.
function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');
var content = '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for (var i in products) {
var picture = products[i].picture;
var name = products[i].name;
var price = products[i].price;
var quantity = products[i].quantity;
content += '<tr>' +
'<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
'<td>' +
'<h6 id="productname">' + name + '</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
'<td><div id="productquantity">' + quantity + '</div></td>' +
'</tr>';
}
content += '</tbody>' + '</table>';
productsList.innerHTML = content;
}
I am getting table data from ajax response as json.Some json datas am not displaying but I want it on a button click for other purpose.How can I get it?Please help me.
function leaveTable() {
for (var i = 0; i < leaveList.length; i++) {
var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn dltLev fa fa-times" onclick="cancelLeave(this)" data-dismiss="modal" value="Cancelled"></i></td><tr>';
$('#levListTable').append(tab)
}
}
from ajax response I want leaveTypeId and pass it into sendCancelReq() function.
Complete code :https://jsfiddle.net/tytzuckz/18/
It is complicated to know exactly what you want. I hope that helps you:
The first, I would change, is not to produce the JavaScript events in your html code var tab = .... I think, it is more clear and readable, when you add your event after the creation of the new dom elements. For example:
var tab = $('<tr id="' + i + '">' +
'<td>' + (i + 1) + '</td>' +
'<td class="appliedOn">' + leaveList[i].appliedOn + '</td>' +
'<td class="levType" >' + leaveList[i].levType + '</td>' +
'<td class="leaveOn" >' + leaveList[i].leaveOn + '</td>' +
'<td class="duration">' + leaveList[i].duration + '</td>' +
'<td class="status">' + leaveList[i].status + '</td>' +
'<td class="approvedOn">' + leaveList[i].approvedOn + '</td>' +
'<td class="approvedBy">' + leaveList[i].approvedBy + '</td>' +
'<td><i class="btn dltLev fa fa-times" data-dismiss="modal" value="Cancelled"></i></td>' +
'<tr>');
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
Then, you are able to send your necessary information more clearly, e.g.:
Instead of the last code
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
you can write
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this, leaveList[i].leaveTypeId); });
and extend your method cancelLeave to:
function cancelLeave(elem, leaveTypeId) {
var id = $(elem).closest('tr').attr('id')
alert(id)
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
sendCancelReq(leaveTypeId);
}
Got solutionPlease check this:https://jsfiddle.net/tytzuckz/19/
function cancelLeave(elem) {
var levTypeId = $(elem).attr('id')
var id = $(elem).closest('tr').attr('id')
$('.currentLevTypeId').val(levTypeId);
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
}
function sendCancelReq() {
var a= $('.currentLevTypeId').val();
alert(a)
}
I have this piece of code where content is generated dynamically and it's executed each time a SELECT change it's value:
var htmlFabricanteBody = '',
htmlSelFabricanteBody;
htmlFabricanteBody += '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
htmlFabricanteBody += '</tr>';
htmlSelFabricanteBody = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlSelFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlSelFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlSelFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlSelFabricanteBody += '</tr>';
$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");
The only difference between htmlFabricanteBody and htmlSelFabricanteBody is this line:
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
In order to avoid DRY, it's possible to remove the line above from htmlFabricanteBody before append to #selFabricanteBody? In other words #fabricanteBody should have the content of htmlFabricanteBody intact as it's, #selFabricanteBody should have the same content of htmlFabricanteBody minus the line I'm talking about, any advice? Workaround?
can combine into a simple function that determines whether to add link or not. Seems a lot easier to read also since your variable names are very similar.
The other benefit is you can move the function out of the logic flow in your script and put it anywhere
function getRowHtml(data, showLink) {
var row = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
row += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
row += '<td>' + data.ent.nombre + '</td>';
row += '<td>' + data.ent.direccion + '</td>';
row += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
row += '<td>' + data.ent.telefono + '</td>';
/* only variation */
if (showLink) {
row += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
}
row += '</tr>';
return row;
}
$(getRowHtml(data,true)).appendTo("#fabricanteBody");
$(getRowHtml(data,false)).appendTo("#selFabricanteBody");
The simplest way, while maintaining your code structure, is this:
var htmlFabricanteBase = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBase += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBase += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBase += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.telefono + '</td>';
var htmlFabricanteBody = htmlSelFabricanteBody = htmlFabricanteBase;
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
htmlFabricanteBody += '</tr>';
htmlSelFabricanteBody += '</tr>';
$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");
However, a more elegant and powerful solution would be to leverage a templating language, like handlebars. If you anticipate the complexity of this increasing, then a template language will become increasingly more useful.
I am building a table row in a jQuery $.ajax() call that builds a row on successful execution of a PHP script.
I'm calling a function that builds a new table row based on the script results. Here is the function:
function addNewRow(addDocs, newClassID, classNumberAdd, classNameAdd) {
var newRow = '';
newRow += $('#classesTable tbody:last').after('<tbody>' +
'<tr bgcolor="#EFE5D3" style="font-weight: bold;">' +
'<td width="35px"><a class="classEditLink" name="' + newClassID + '" href="#">Edit</a></td>' +
'<td width="20px"><input type="checkbox" class="chkSelectToDelete" name="deleteClasses[]" value="' + newClassID + '" /></td>' +
'<td>' + classNumberAdd + '</td>' +
'<td>' + classNameAdd + '</td>' +
'</tr>');
if (addDocs == 'true') {
$('#docsTable input[type="checkbox"]:checked').each(function() {
var $row = $(this).parents('tr');
var docID = $row.find('td:eq(0) input').val();
var docName = $row.find('td:eq(1)').html();
var docDescription = $row.find('td:eq(2)').text();
newRow += $('#classesTable tbody:last').append('<tr class="classDocsRow">' +
'<td></td>' +
'<td align="right"><input type="checkbox" class="chkRemoveDocs" name="removeDocs[]" value="' + docID + '-' newClassID + '" /></td>' +
'<td width="245px">' + docName + '</td>' +
'<td width="600px">' + docDescription + '</td>' +
'</tr>');
});
//$('#classesTable tbody:last').append('<tr class="classDocsRow"><td></td><td align="right"><input type="checkbox" class="chkRemoveDocs" name="removeDocs[]" value="' + docID + '-' newClassID + '" /></td><td width="245px">' + docName + '</td><td width="600px">' + docDescription + '</td></tr>');
} else {
newRow += $('#classesTable tbody:last').append('<tr class="classDocsRow">' +
'<td colspan="4">' +
'<strong>No documents are currently associated with this class.</strong>' +
'</td>' +
'</tr>');
}
return newRow;
}
Aptana Eclipse IDE is reporting an error in two places in the "if (addDocs == 'true')" section: The first error, "missing ) after argument list", is on the second line after "newRow += ..." and the second error "missing ; before statement" is two lines after that. Note that I also have that entire section in one line (not broken up with string concats) commented out shortly after that. That shows only one error, the error about missing a right paren.
If I comment out everything in the if clause and pass addDocs as false, the else clause returns a new row as expected.
This must be simply a js syntactic problem, but I can't see what I'm doing wrong.
Any help will be greatly appreciated!
You are missing the + here:
' + docID + '-' + newClassID + '" /></td>' +
^
The second error is probably just a result of the first error.