nelsonm - 1:08 pm on May 18, 2012 (gmt 0)

hi all,

I'm dynamically inserting rows into a table in a for loop. After the table row has been inserted, i get and load the select option contents into the empty select tag field named wi-PLID using the jquery .load method. Everything works fine so far.

The problem occurs after i bind the jquery .html method to replace a select "option value" string in the select tag with "option selected='selected' value". If the for loop inserts 3 table rows each containing a loaded select tag, only the last table row select tag get its option string replaced when all table row select tags should be affected.

If i un-comment the alert('x') method below the jquery .load statement line then every table row select tag gets modified as it should as opposed to just the last one. Am i correct in that the problem appears to be a timing issue? And if so, how do i fix it?

// get all work order items. for(i = 0; i < response.records; i++){ row = response.rows[i]; // row is cell array shortcut. var id = row["cell"]["0"]; // construct and display all category sales lines. $('#sa-table-2 tbody').append('<tr id="'+id+'"><td><select name="wi-PLID" class="wi-PLID"></select></td></tr>'); $('tr#'+id+' select[name="wi-PLID"]').load('php/wo-pricelist-se-script.php?wo.SVID='+SVID, data, function(data){$('tr#'+id+' select[name="wi-PLID"]').html(data.replace('option value="'+row['cell']['3']+'"', 'option selected="selected" value="'+row['cell']['3']+'"'));}); // alert('x'); }

Any help would be greatly appreciated.