-1

I have the following _renderItem function in jquery where it has <img> tags with inline attributes height and width. However these attributes are NOT working in internet explorer as IE would require them to be written in CSS.
So, how do I insert that styling in here?

Following is renderItemfunction.

.data('autocomplete')._renderItem = function(ul, item) {
         return $('<li>')                                  
        .data('item.autocomplete', item)
        .append("<a>"+"<img src ='/account/"+item.id+"/icon/logo' onerror='$(this).hide()' height='40' width='40' alt=''/>" + " " + " " +item.label+"</a>")
        .appendTo(ul); 

 }; 
9
  • so you're saying that height='40' width='40' works everywhere except IE? Feb 18, 2015 at 4:29
  • yes, inline attributes won't tend to work in IE, unfortunately
    – Dee
    Feb 18, 2015 at 4:31
  • IE would require them to be written in CSS means? Feb 18, 2015 at 4:35
  • 2
    why can't you write style='height:40px;width:40px' instead of inline attributes. Feb 18, 2015 at 4:37
  • Here I am using inline attributes for resizing image (which normally works in chrome, mozilla etc) but in case of IE, they should be written as inline STYLING like <img style ="height:30px; width:40px"> in order to work. But this is javascript, I am not sure who to write styling.
    – Dee
    Feb 18, 2015 at 4:39

2 Answers 2

1

This should work for you.

.data('autocomplete')._renderItem = function (ul, item) {
    var imgLink = $('<a>' + item.label + '</a>')
        .append($('<img />', {
            'src': '/account/' + item.id + '/icon/logo',
            'style': 'width:40px; height:40px;',
            onerror: function() {
                $(this).hide();
            }
        }));

    return $('<li>')
        .data('item.autocomplete', item)
        .append(imgLink)
        .appendTo(ul);

};
2
  • This is picking up the parsing error at 'onerror': '$(this).hide()', line
    – Dee
    Feb 18, 2015 at 4:44
  • It is because I missed the comma before onerror function, fixed now
    – icaru12
    Feb 18, 2015 at 4:49
0

You can replace inline attributes

  height='40' width='40' 

with inline css like this

    .data('autocomplete')._renderItem = function(ul, item) {
             return $('<li>')                                  
            .data('item.autocomplete', item)
            .append("<a>"+"<img src ='/account/"+item.id+"/icon/logo' onerror='$(this).hide()' style='width:40px;height:40px' alt=''/>" + " " + " " +item.label+"</a>")
            .appendTo(ul); 

     }; 
1
  • 1
    This is working! Thanks! I just didn't know how to use those inline styling in javascript.
    – Dee
    Feb 18, 2015 at 4:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.