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 ~/.
Related
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 a predefined table head like this:
<div class="container">
<div class="livsmedelsmall">
<h1>Sökning av livsmedel</h1>
<form class="form">
<div class="form-group">
<label for="livsmedelsSokOrd">Livsmedel</label>
<input type="search" class="form-control" id="livsmedelsSokOrd" placeholder="t ex makaroner">
</div>
<button type="button" class="btn btn-default" id="sok-button">Sök</button>
</form>
<table id="tabell" class="table">
<thead>
<tr>
<th>Livsmedel</th>
<th>Energi (kcal/100g)</th>
<th>Kolhydrater</th>
<th>Protein</th>
<th>Fett</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<br>
And I want to add content to it from an array using this code:
// Work with the response
success: function(response) {
console.log(response); // server response
var livsmedelArray = response.livsmedel;
var table = $("#tabell");
console.log(livsmedelArray);
// Itererar genom samtliga rader i resultatet
$.each(livsmedelArray, function(i, livsmedelArray) {
// Skapar en tabellrad för varje apotek och hämtar ut respektive
// attribut för det aktuella apoteket och lägger in cellerna i tabellraden
$('<tr><td>' + livsmedelArray.namn + '</td>' +
'<td>' + livsmedelArray.energi + '</td>' +
'<td>' + livsmedelArray.kolhydrater + '</td>' +
'<td>' + livsmedelArray.protein + '</td>' +
'<td>' + livsmedelArray.fett + '</td>'
+
'</tr>').appendTo(table);
$("#tabell").show;
});
}
However it does not work and I have no idea of why it doesn't!
Hope your ajax is successful & response is correct. If it is so then you may need to target tbody for appending the tr
You can try this snippet
var trElement = '';
$.each(livsmedelArray, function(i, livsmedelArray) {
// Skapar en tabellrad för varje apotek och hämtar ut respektive
// attribut för det aktuella apoteket och lägger in cellerna i tabellraden
trElement += $('<tr><td>' + livsmedelArray.namn + '</td>' +
'<td>' + livsmedelArray.energi + '</td>' +
'<td>' + livsmedelArray.kolhydrater + '</td>' +
'<td>' + livsmedelArray.protein + '</td>' +
'<td>' + livsmedelArray.fett + '</td>'+
'</tr>').
});
$('#tabell tbody').append(trElement)
Here the trElement variable is outside the each function. You can declare it inside the success function or as a separate variable.
Also dom manipulation is costly so, you can create a the complete object of tr(s) & append it at once.
Hope this will be useful
Try it...
// Work with the response
success: function(response) {
console.log(response); // server response
var livsmedelArray = response.livsmedel;
var table = $("#tabell");
console.log(livsmedelArray);
// Itererar genom samtliga rader i resultatet
$.each(livsmedelArray, function(i, livsmedelArray) {
// Skapar en tabellrad för varje apotek och hämtar ut respektive
// attribut för det aktuella apoteket och lägger in cellerna i tabellraden
$('<tr><td>' + livsmedelArray.namn + '</td>' +
'<td>' + livsmedelArray.energi + '</td>' +
'<td>' + livsmedelArray.kolhydrater + '</td>' +
'<td>' + livsmedelArray.protein + '</td>' +
'<td>' + livsmedelArray.fett + '</td>'
+
'</tr>').appendTo("#tabell");
$("#tabell").show;
});
}
You should be appending to body..
try this
var table = $("#tabell tbody");
***************EDIT***************
I am not sure about the rest of your code so why don't you try this..
var block = "";
$.each(livsmedelArray, function(i, livsmedelArray) {
block+='<tr><td>' + livsmedelArray.namn + '</td>' +
'<td>' + livsmedelArray.energi + '</td>' +
'<td>' + livsmedelArray.kolhydrater + '</td>' +
'<td>' + livsmedelArray.protein + '</td>' +
'<td>' + livsmedelArray.fett + '</td>'+
'</tr>';
});
table.html(block);
In the script, we need to just replace only .appendTo(table); with .appendTo('table');
Either we can replace the above script with below mentioned script:
success: function (response) {
console.log(response);
var livsmedelArray = response.livsmedel;
var table = $("#tabell");
console.log(livsmedelArray);
$.each(livsmedelArray, function (i, livsmedelArray) {
$('<tr><td>' + livsmedelArray.namn + '</td>'
+ '<td>' + livsmedelArray.energi + '</td>'
+ '<td>' + livsmedelArray.kolhydrater + '</td>'
+ '<td>' + livsmedelArray.protein + '</td>'
+ '<td>' + livsmedelArray.fett + '</td>'
+ '</tr>').appendTo('table');
$("#tabell").show;
});
}
I have a problem with my code, So I have an array and I pass to template, the array is like this :
Array
(
[0] => Array
(
[ref_article] => 1903
[ref_fournisseur] => sdsds
[lien_fournisseur] => www.four.com
[prix_ht] => 14.00
[gifts_number] => 3
)
[1] => Array
(
[ref_article] => 1907
[ref_fournisseur] => sdsds
[lien_fournisseur] => www.four.com
[prix_ht] => 12.00
[gifts_number] => 1
)
)
Now in template I do :
for (var item in result) {
document.getElementById('order_information').setAttribute('class','display-on');
document.getElementById('order_information').setAttribute('class','table');
var html = '<td>' + result[item]['ref_article'] + '</td>' +
'<td>' + result[item]['ref_fournisseur'] + '</td>' +
'<td>' + 'description' + '</td>'+
'<td>' + result[item]['lien_fournisseur'] + '</td>' +
'<td>' + result[item]['prix_ht'] + '</td>'+
'<td>' + 'disponibilite' +
'<td>' + result[item]['gifts_number'] + '</td>';
$("#content-order").html(html);
console.log(result[item]['ref_article']);
}
The problem is that only the last <td></td> shows on the page, in this case only the article with [ref_article] = 1907. What am I doing wrong? Can you help me please? Thanks in advance
The issue is because you are using html() to add the content - this will overwrite any pre-existing content in the #content-order element. Instead, try using append():
$("#content-order").append(html);
Also note that you can amend your first two lines to use a jQuery selector and the addClass() method:
$('#order_information').addClass('display-on table');
If you want to clear information added from a previous request you can use .empty() before the for loop that appends new content. Here's a full example:
// $.ajax({...
success: function(result) {
$("#content-order").empty(); // remove existing content
$('#order_information').addClass('display-on table');
for (var item in result) {
var html = '<td>' + result[item]['ref_article'] + '</td>' +
'<td>' + result[item]['ref_fournisseur'] + '</td>' +
'<td>description</td>' + // removed redundant string concatenation
'<td>' + result[item]['lien_fournisseur'] + '</td>' +
'<td>' + result[item]['prix_ht'] + '</td>'+
'<td>disponibilite</td>' + // added missing </td>
'<td>' + result[item]['gifts_number'] + '</td>';
$("#content-order").append(html);
console.log(result[item]['ref_article']);
}
}
Try using this code
var html = '<table>';
for (var item in result) {
html += '<td>' + result[item]['ref_article'] + '</td>' +
'<td>' + result[item]['ref_fournisseur'] + '</td>' +
'<td>description</td>' + // removed redundant string concatenation
'<td>' + result[item]['lien_fournisseur'] + '</td>' +
'<td>' + result[item]['prix_ht'] + '</td>' +
'<td>disponibilite</td>' + // added missing </td>
'<td>' + result[item]['gifts_number'] + '</td>';
console.log(result[item]['ref_article']);
}
html += '</table>';
$("#content-order").html(html);
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';
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.