Question

I got very strange bug on IE. I used the code below to make a ajax request to get data from database and create drop down option <option> with that data. The thing is on IE the data didn’t appear properly, it’s only showing first character of data, but on other browser the data are showing correctly. I tried printing out the data as well, data are correct.
So I suspected either of my Jquery selection or append is wrong and tried appending outside the ajax call with some junk data and data are showing correctly but then again I put that code inside the ajax and its not showing again… I really out of clue now.. Can you guy plz help me with this? I have tested with FF, Chrome and safari they all working fine…

$.ajax({

    cache: false,
    type: "POST",
    url: "<?php echo $this->baseUrl(); ?>/rewards/getdiscounttype/",
    data: { esid: estore_id }

}).done(function( data ) {

    var obj = jQuery.parseJSON(data);
    jQuery.each(obj, function (i, app) {

        //alert(i+app['discount_type']);
        var sel = $('select[name=discount_type'+id+']');
        sel.append('<option value="'+app['id']+'">'+app['discount_type']+'</option>');

    });

});

Answer 1

Working now with JavaScript!

$.ajax({

cache: false,
type: "POST",
url: "<?php echo $this->baseUrl(); ?>/rewards/getdiscounttype/",
data: { esid: estore_id } 

}).done(function( data ) {
    var obj = jQuery.parseJSON(data);

    /* clearing options with JS since jQuery cleare the select in the DOM but enter code   herenot on screen. */
    $('select[name=discount_type'+id+']')[0].options.length = 0;
    $('select[name=discount_type'+id+']').children().remove().end().append('');

    jQuery.each(obj, function (i, app) {
       var sel = $('select[name=discount_type'+id+']');
       sel.append('<option value="'+app.id+'">'+app.discount_type+'</option>');
    });
});