Image insertion on fnCreatedRow
Image insertion on fnCreatedRow
This is my fnCreatedRow:
[code]
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$.each(aData, function (i, o) {
if (o.match(/^ADVERT_TYPE_.*/) !== null) {
var advert_type = o.replace(/ADVERT_TYPE_/g, ''),
img = $('')
.attr('src','img/icons/objecttypes/advert_type_' + advert_type + '.png'),
cell = $('td:eq(' + i + ')', nRow);
cell.empty().append(img);
}
});
}
[/code]
As you can see, the purpose of this code is to replace a string (returned på the Ajax call) with an appropriate image signifying the advert type of the row. Although the img element is correctly inserted into the DOM, however, the image itself never gets loaded. I get the same result from putting the equivalent code in fnDrawCallBack. The simple/ugly answer would've been to return the HTML-string for the image to be loaded directly from the server, but I'm not a big fan of that kind of "solutions".
Am I overlooking something stupid/obvious? Please help!
[code]
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$.each(aData, function (i, o) {
if (o.match(/^ADVERT_TYPE_.*/) !== null) {
var advert_type = o.replace(/ADVERT_TYPE_/g, ''),
img = $('')
.attr('src','img/icons/objecttypes/advert_type_' + advert_type + '.png'),
cell = $('td:eq(' + i + ')', nRow);
cell.empty().append(img);
}
});
}
[/code]
As you can see, the purpose of this code is to replace a string (returned på the Ajax call) with an appropriate image signifying the advert type of the row. Although the img element is correctly inserted into the DOM, however, the image itself never gets loaded. I get the same result from putting the equivalent code in fnDrawCallBack. The simple/ugly answer would've been to return the HTML-string for the image to be loaded directly from the server, but I'm not a big fan of that kind of "solutions".
Am I overlooking something stupid/obvious? Please help!
This discussion has been closed.
Replies
[code][/code]
From what I gather, the "display: none; visibility: hidden" part is put there by Chrome because it's missing the referenced image resource. Looking at the image resource list of the network tab in Chrome debugbar, it's obvious the images are never loaded at all... however, right clicking the src path and choosing to open it in a new tab correctly links to the desired image.
[code]
$('td:eq(' + i + ')', nRow).html(
''
);
[/code]
Allan
As I said, the result is exactly the same when loading the HTML directly from the server so there's really something weird going on here. The result is the same in Firefox 15.0 and Chrome 21.0.1180.89, except that in Firefox the "display: none; visibility: none" part isn't "added"...
This is my complete dataTables option list:
[code]
{
"oLanguage": oLanguage,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "ajax/contract.php",
"sPaginationType": "bootstrap",
"sDom": "<'row'<'span12'<'#object_controls'>><'span4'f>r>t<'row'<'span4'i><'span8'p>>",
"sSortAsc": "header headerSortDown",
"sSortDesc": "header headerSortUp",
"sSortable": "header",
"sScrollY": calcDataTableHeight(),
"fnServerParams": function (aoData) {
var sShowAllObjects = $('#objects_agent_filter').val(),
sAdvertType = $('#objects_advert_type').val(),
oShowAllObjects = {
"name":"sShowAllObjects",
"value":sShowAllObjects
},
oAdvertType = {
"name":"sAdvertType",
"value":sAdvertType
};
aoData.push(oShowAllObjects);
aoData.push(oAdvertType);
},
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$.each(aData, function (i, o) {
if (o.match(/^ADVERT_TYPE_.*/) !== null) {
var advert_type = o.replace(/ADVERT_TYPE_/g, ''),
img = $('')
.attr('src','img/icons/objecttypes/advert_type_' + advert_type + '.png'),
cell = $('td:eq(' + i + ')', nRow);
cell.empty().append(img);
}
});
}
}
[/code]
[code]
var debug_images = setInterval(function () {
$('#datatable_test_wrapper td:nth-child(3)').html(
''
}, 600);
[/code]
Still no images. So not even forcing this from outside of dataTables makes any difference... Which would probably mean it's something else, right?
Allan
Added a new DIV to the base HTML of the page and added it to the debug selector above. Just like dataTables it isn't being manipulated in any way. Also, it's not subject to any extra CSS rules (just the basic CSS standardization rules), so that rules out dataTables and CSS as the source of the problem. The search goes on...
Allan
If you've got wireshark handy it might be interesting to view the HTTP communication that is going over the network, checking that the browser is actually making a request for the file. I guess the other thing might be to clear your cache?
Allan
Yup - moving on... :-)
Allan