Append element in IE7

Question

Hi there,

I append a select-element to a DOM-Node and fill it dynamically, which works good in Firefox and Safari. Unfortunately, when I click on the select-box, it simple does not drop down in Internet Explorer. Any ideas what goes wrong here?

    $('<select size="1">').appendTo(
      $('#mytable tbody')
      .find('tr:last')
      .find('th.col1')
      )
            .attr('id', 'select_' + counter)
      .append('<option>New Option</option>')
      .click(function() {

       var t = $(this);

        // Get matching alternatives as json
        $.getJSON(Drupal.settings.basePath + 'mymodule/product_cat/' + data['product_category'], function(cat_data) {
         t.find('option').remove();
         $.each(cat_data, function(i,item){
          t.append($("<option value='" + JSON.stringify(item) + "'>" + item.name + "</option>"));
         });
         t.find('option:first').attr('selected', 'selected');
        });

      })
      .change(function() {
       tmparr = $(this).attr('id').split('_');
       set_row_data($(this).parent().parent(), $(this).val());
      });
}

-- UPDATE --

I inspected the code that the selectbox contains in IE7 after updating - the options it got via json seeem to be inserted in the dom-tree correctly, so it looks like the issue is somewhere else. Any ideas appreciated.

-- UPDATE 2 --

The Problem of IE7 seems to be in the .click()-function:

If I place some code like this:

$('#myelement').append('<option>foo</option>');

it works fine even in IE7.

If i place it into a click-function like this:

$('#myelement').click(function() {
  $(this).append('<option>foo</option>');
});

the problem appears.

-- SOLUTION --

What nobody noticed (above all: me), was, that my first line is buggy:

$('<select size="1">').appendTo(...

should be

$('<select size="1"></select>').appendTo(...

Works now, thanks anyway everybody.

Answer 1

Disable caching in your json. There is many programmers facing this problem such as this one.

EDIT

from codecouch:

A workaround is to use a ‘cache buster’ parameter in your GET request. Something like this:

var urlToFetch = 'whatever?randNum=' + new Date().getTime();

This works very well, but can have drawbacks, depending on your server setup. For example, if your application server sits behind a caching layer, you wouldn’t want the URL to be different every time for idempotent requests, as the cached version would never get used, and so your application server would get a direct hit every time.

Answer 2

I don't think '<select size="1" id="select_' + counter + '">' is a valid selector...

try it with '#select_'+counter

Answer 3

Don't know if it makes any difference but try changing:

$('<select size="1">').appendTo($('#mytable tbody')
            .find('tr:last')
            .find('th.col1')).attr('id', 'select_' + counter)

to

$('#mytable tbody').find('tr:last').find('th.col1')
                   .append($('<select size="1">')
                   .attr('id', 'select_' + counter);

$('#select_' + counter).append.....

..fredrik

Answer 4

see solution update