Question

I use a backend PHP file to gather my data from the database and use jquery to display the information.

All goes well in Firefox and IE9, but in IE8, the first result is not displayed 100%, just the half of the information is being display without any markup.

I checked all the quotes, comma’s and other characters on which IE trips, but nothing so far.
The question is, why doesn’t below code doesn’t work a 100% on IE8?

JS code:

function addInfo(data) {  
    var x = 0;
    var content = '';
    var land;

    $.each(data.gebieden, function(i,info){  
        y = info.id;
        land = landen_array[info.lid];

        content += '<li>';
        content += '<a class="price" href="' +info.url+'" target="_blank">';
        content += '&euro; '+info.prijs+'';
        content += '</a>';
        content += '<img src="/images/accommodatie/small/'+ info.image +'.jpg" alt="'+info.naam+'" class="result_image"/>';
        content += '<h3>'+info.naam+'</h3>';
        content += '<h4 class="au"><img src="/images/'+land+'.png" class="flag_small">  | '+info.gebied+' | '+info.dorp+'</h4>';
        content += '<dl>';
        content += '<dt>Gebied</dt>';
        content += '<dd>';
        content += '<ul>';
        content += '<li>'+info.min_hoogte+' - '+info.max_hoogte+'m</li>';
        content += '<li>'+info.pistes+' km pistes</li>';
        content += '<li>Gaaf gebied</li>';
        content += '</ul>';
        content += '</dd>';
        content += '<dd>';
        content += '<details>';
        content += '<summary>';
        content += '<a class="leesmeer" id="detail_layer1_'+ y +'">Lees Meer</a>';
        content += '</summary>';

        content += '<div class="gebiedinformatie" id="layer1_'+ y +'">';
        content += '</div>';

        content += '</dd>';
        content += '</dl>';

        content += '<dl>';
        content += '<dt>Dorp informatie</dt>';
        content += '<dd>';
        content += '<ul>';
        content += '<li>'+info.afstand_utrecht+' km tot Utrecht</li>';
        content += '<li>Retourneren</li>';
        content += '<li>Klachten</li>';
        content += '<li>Contact</li>';
        content += '</ul>';
        content += '</dd>';
        content += '<dd>';
        content += '<details>';
        content += '<summary>';
        content += '<a class="leesmeer" id="detail_layer2_'+ y +'">Lees Meer</a>';
        content += '</summary>';

        content += '<div class="dorpinformatie" id="layer2_'+ y +'">';
        content += '</div>';            

        content += '</dd>';
        content += '</dl>';

        content += '<dl>';
        content += '<dt>Accomodatie</dt>';
        content += '<dd>';
        content += '<ul>';
        content += '<li>Dorp id '+ y +'</li>';
        content += '<li>Privacystatement</li>';
        content += '<li>Algemene voorwaarden</li>';
        content += '</ul>';
        content += '</dd>';
        content += '<dd>';
        content += '<details>';
        content += '<summary>';
        content += '<a class="leesmeer" id="detail_layer3_'+ y +'">Lees Meer</a>';
        content += '</summary>';

        content += '<div class="accomodatieinformatie" id="layer3_'+ y +'">';
        content += '</div>';

        content += '</dd>';
        content += '</dl>';
        content += '</li>';

        x = x+1;
    })
    $("#results").empty();

    // update pagination information
    //
    var pagina_info = data.pagina;
    if (pagina_info.aantal_resultaten > 0) {
        var tot_aantal = pagina_info.max_per_page * pagina_info.current_pag;
        var vanaf_aantal = ((pagina_info.current_pag-1) * pagina_info.max_per_page) + 1;

        var pag = '<div id="Pagination" class="pagination">';
        for(i=1;i<=pagina_info.totaal_aantal_pag;i++) {
            if (i != pagina_info.current_pag) {
                pag += '<a href="#" id="pag_'+i+'" class="page_no">'+i+'</a>';
            } else {
                pag += '<span class="current">'+ i +'</span>';
            }
        }
        pag += '</div><br>';
    } else {
        var tot_aantal = 0;
        var vanaf_aantal = 0;
    }

    info = "Resultaat "+ vanaf_aantal+ " tot "+ tot_aantal +" van "+pagina_info.aantal_resultaten+" resultaten.";
    $("#results").append(info).append(pag);  
$("#resultaten").append(content);  

}

The Json information that is send back to populate the above:

{
"gebieden":
    [{
        "id":"19",
        "naam":"Appartementen Gletscherpanorama",
        "lid":"1",
        "min_hoogte":"753",
        "max_hoogte":"3029",
        "prijs":"79.00",
        "url":"http:\/\/ds1.nl\/c\/?wi=127251&si=2374&li=146991&dl=oostenrijk\/zell_am_see-kaprun\/kaprun\/appartementen_gletscherpanorama.htm&ws=",
        "pistes_groen":"0",
        "pistes_blauw":"57",
        "pistes_rood":null,
        "pistes_zwart":null,
        "pistes":"138",
        "gebied":"Zell am See - Kaprun",
        "gid":null,
        "dorp":"Kaprun",
        "afstand_utrecht":"966",
        "image":"accom_small_19"
    },
    {
        "id":"30",
        "naam":"Appartementen Mariandl & Dependance",
        "lid":"1",
        "min_hoogte":"753",
        "max_hoogte":"3029",
        "prijs":"94.00",
        "url":"http:\/\/ds1.nl\/c\/?wi=127251&si=2374&li=146991&dl=oostenrijk\/zell_am_see-kaprun\/piesendorf\/appartementen_mariandl__dependance.htm&ws=",
        "pistes_groen":"0",
        "pistes_blauw":"57",
        "pistes_rood":null,
        "pistes_zwart":null,
        "pistes":"138",
        "gebied":"Zell am See - Kaprun",
        "gid":null,
        "dorp":"Piesendorf",
        "afstand_utrecht":"966",
        "image":"accom_small_30"
    }],
"pagina":
    {
        "pages_before":"1",
        "pages_after":0,
        "max_per_page":"10",
        "current_pag":1,
        "totaal_aantal_pag":4,
        "aantal_resultaten":33
    }
}

And as last, the HTML coding:

<ul class="resultaten" id="resultaten"></ul>

Any additional questions/information needed, please let me know.

P.s. any improvements to the code are always welcome.

Answer 1

Are you using something to activate HTML5?

Tags like: <details>, <summary> are not yet supported and will not be shown correctly in <=IE8

See the following link for more information and you can find a HTML5 activator for browsers that do not yet support the tags: http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/