Object doesn't support this property or method

Question

I am having an issue where IE is not working with the following code. The code basically hides a div if elements are empty, you will notice it works in all but IE.

//hide webapp item if empty
if ($("#features").html().trim()) {} else {
    $("#f-h").hide()
}
if ($("#application").html().trim()) {} else {
    $("#a-h").hide()
}
if ($("#tech-specs").html().trim()) {} else {
    $("#t-h").hide()
}
if ($("#downloads").html().trim()) {} else {
    $("#d-h").hide()
}
if ($("#custom-field").html().trim()) {} else {
    $("#c-f").hide()
}

The pages to see it in action is webpage

Any hints to why ie doesnt like this or a better method would be appreciated.

Answer 1

My guess is that Internet Explorer is parsing the lines differently, resulting in an error. The solution to this is to always use semicolons to mark the ends of your lines. I also cleaned up the code a bit, replacing the empty if/else blocks with if-nots.

//hide webapp item if empty

if (!$("#features").html().trim()) {
  $("#f-h").hide();
}

if (!$("#application").html().trim()) {
  $("#a-h").hide();
}

if (!$("#tech-specs").html().trim()) {
  $("#t-h").hide();
}

if (!$("#downloads").html().trim()) {
  $("#d-h").hide();
}

if (!$("#custom-field").html().trim()) {
  $("#c-f").hide();
}

Answer 2

jQuery html() method just returns a string containing the HTML.

JavaScript strings don't have a trim() method.

If you want to introduce one to the javascript's String object. You can do so with:

String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

^^^ didn't test this, but I am pretty sure it will do the job.

Answer 3

You could probably greatly simplify your JavaScript depending on the structure of your HTML. If the elements you wanted to hide were positioned consistently near/next to each other, you could assign classes to the sections ("features", "application", "tech-specs", etc.), e.g. "section", and the elements you wish to hide ("f-h", "a-h", "t-h", etc.), e.g. "hide-me", and use a single function to do the work:

$('.section').each(function() {
    if ($(this).is(':empty')) {
        $(this).closest('.hide-me').hide();
    }
});

I don't necessarily love this solution, but you could also use a map of the sections you want to test and hide if they are in random places in your HTML:

var items = [
    { key: '#features', value: '#f-h' },
    { key: '#application', value: '#a-h' },
    { key: '#tech-specs', value: '#t-h' },
    { key: '#downloads', value: '#d-h' },
    { key: '#custom-field', value: '#c-h' }
];

$.each(items, function(index, element) {
    if ($(element.key).is(':empty')) {
        $(element.value).hide();
    }
});

Here's a working example of the above code.

I know this doesn't answer your question but I just wanted to give my $0.02.