JQuery message code snippet works in Chrome / Firefox, not in IE8

Question

I am having some difficulties here with some javascript. This snippet of code seems to work correctly in Firefox and Chrome (if the search term length is < 2 characters, it displays an error message), but for the life of me I cannot figure out WHY this will not render the error message in IE8.

I have tried changing the things mentioned in: (see: jQuery issue in Internet Explorer 8)

thinking it might be a jquery nuance, but i'm starting to think there might be something wrong with the code or it might have to have some IE8 specific logic in it, but I'm out of ideas. The JQuery actually works for other methods, it's just this one block of code that seems to not render the error message on IE.

$(document).ready(function() {
$('#countrySelectionSubmitButton').on('click',function(){   
    $.cookie("locale","en_US");
});

$('#countrySelectionCancelButton').on('click',function(){
    alert($.cookie("locale"));
});

$('#countrySelectionDisplayLocale').text($.cookie("locale"));


var showError = false;
if ($( "#mainSearch" ).length > 0) {
    $( "#mainSearch" ).autocomplete({
        minLength: 0,
        source: function(request, response) {
            var term = $("#mainSearch").val();
            if ( term.length < 2 || term === $("#mainSearch").attr('title')) {
                response([SiteSearch.ErrorMessage]);
                if ( !showError) {
                    $( "#mainSearch" ).autocomplete('close');
                }
                showError = false;
            } else {
                if (term.length >= 3) {
                    $( "#mainSearch" ).autocomplete('enable');
                    $.ajax({
                        url: SiteSearch.LookAheadURL +"?term=" + $('#mainSearch').val() + "&countryCode=" + SiteSearch.CountryCode,
                        type: 'GET',
                        //dataType: 'jsonp',
                        //jsonp: 'callback', 
                        //jsonpCallback: 'autocomplete_callback',
                        error: function(xhr, status, error) {
                            throw new Error ("Autocomplete Service Error");
                        },
                        success: function(data) {
                            //console.log('ajax success');
                            var dataset = [];

                             $.each(data.suggestions, function(i,v) {
                                dataset.push($('<div/>').html(v.value).text()); // Original
                              });
                             response(dataset);
                        }
                    });
                }
            }
        },
        select: function (event, ui) {
            if (ui.item.value === SiteSearch.ErrorMessage) {
                event.preventDefault();
            } else {
                $(this).val(ui.item.value);
                $('#sitesearchform').submit();
            }
        }// Point of the list (DDL ErrorMessage being created / populated) IE doesn't render correctly.
    }).data("autocomplete")._renderItem = function(ul, item) {
        var re = new RegExp("(" + RegExp.escape(this.term) + ")", 'gi') ;
        var match = item.label;
        if (item.value !== SiteSearch.ErrorMessage) {
            match = item.label.replace(re, "<span class='autocompleteMatch'>$1</span>");
        }
        return $( "<li></li>" )
            .data("item.autocomplete", item)
            .append( "<a>" + match + "</a>" )
            .appendTo(ul);
    };
} else {
    throw new Error("Could not find $('#mainSearch')");
}      
$("#sitesearchform").submit(function(){
    var term = $("#mainSearch").val();
    if ( term.length < 2 || term === $("#mainSearch").attr('title')) {
        showError = true;            
        $( "#mainSearch" ).autocomplete('search');
        return false;
    }
    return true;
});

EDIT: I have also commented out the console.log line

Any ideas or thoughts would be greatly appreciated. Thank you all in advance.

Rr

what did you get in developer tool? what did you get in IE9 developer tool with IE8 compatibility? — Leandro Bardelli, Nov 07 '13 at 20:44
Leandro, I'm using IE10 with IE8 Browse / Standards. No exceptions are being thrown. It appears that when I click on the form submit button, if the character amount is under '2' in the search bar, nothing is happening. What get's me is this works flawlessly in Chrome and FF. — ResourceReaper, Nov 08 '13 at 13:49

score 0 · Accepted Answer · answered Nov 08 '13 at 17:46

I actually ended up modifying the method to show the error message that was placed inside if a tag.

$("#sitesearchform").submit(function(){
var term = $("#mainSearch").val();
if ( term.length < 2 || term === $("#mainSearch").attr('title')) {
    showError = true;            
    $( "#mainSearch" ).autocomplete('search');
    $('#headerSearch > ul').show();
    return false;
}
return true;
});

JQuery message code snippet works in Chrome / Firefox, not in IE8

1 Answers1