jquery ui dialog loses values on second call (IE8)

Question

I have a page which has 16 buttons. When clicked a dialog opens and a user can select various select elements (an item, an operator, and a value).

This works great in FF but not so good in IE8.

User clicks button 1, enters data, closes the dialog (FF, IE8 Good) User clicks button 2, enters data, closes the dialog (FF, IE8 Good) User clicks button 2 again, enters data, closes the dialog (FF Good), (IE8 fails)

The problem only happens if a user clicks the same button in succession (note two instances are not opened both at the same time: user clicks button 2, processes it, closes it then clicks button 2 a few moments later).

The problem is to do with the script losing the form values.

When the button is clicked the following vars are set:

var item = $("#name-item"),operator = $("#name-operator")

item will be something like "-tNAME", operator something like "eq="

on the second run $("#name-item") and $("#name-operator") are blank so this sounds like a declaration / initialization problem but where?

dialog code:

    $("#dialog-form-name").dialog({autoOpen:false,height:450,width:350,modal:false,position:[675,200],buttons: {
    'Add Name Filter': function() {
        var item = $("#name-item"),operator = $("#name-operator"),value = $("#name-value"),disp=$('#name-item option:selected').text(),join = $("#name-join"),tn = $("#name-item").val().substr(0,2);
        var allFields = $([]).add(item).add(operator).add(value).add(join),tips = $(".validateTips"),bValid = true;
        allFields.removeClass('ui-state-error');
        bValid = bValid && checkLength(value,"value",1,255);
        bValid = bValid && checkRegexp(value,/^([\ \.\,\'\(\)0-9a-z_])+$/i,"Value may consist of a-z, 0-9, underscores, commas, spaces");
        if(bValid) { updateTableRow('name',item,operator,value,join,disp,tn);$(this).dialog('close'); }
    },
    Cancel: function() { if(form_status == 'edit') { form_status = 'new';$('#' + rowid).removeClass('ui-state-highlight'); }$(this).dialog('close');$('#form-name')[0].reset();$('#form-name').removeClass('ui-state-error');}},
    close: function() { if(form_status == 'edit') { form_status = 'new';$('#' + rowid).removeClass('ui-state-highlight'); }$('#form-name')[0].reset();$('#form-name').removeClass('ui-state-error');$(".validateTips").html();}
});

$("#dialog-form-course").dialog({autoOpen:false,height:450,width:350,modal:false,position:[675,200],buttons: {
    'Add Course Filter': function() {
        var item = $("#course-item"),value = $("#course-value"),join = $("#course-join"),disp=$('#course-item option:selected').text(),tn = $("#course-item").val().substr(0,2);
        if(tn == '-n') { var operator = $("#course-operator-n"); } else { var operator = $("#course-operator-t"); }
        var allFields = $([]).add(item).add(operator).add(value).add(join),tips = $(".validateTips"),bValid = true;
        allFields.removeClass('ui-state-error');
        bValid = bValid && checkLength(value,"value",1,255);
        bValid = bValid && checkRegexp(value,/^([\ \.\,\'\(\)0-9a-z_])+$/i,"Value may consist of a-z, 0-9, underscores, commas, spaces");
        if(operator.val() == 'beBetween') { if(checkRegexp(value,/[0-9]\ and\ [0-9]/i,"Value must have ' and ' between a range of numbers. Please see example below.") == false) { bValid = false;$("#example-course").html('<br /><em>Example:</em> ' + disp + ' Between 1 <strong>and</strong> 3'); } }       
        if(bValid) { updateTableRow('course',item,operator,value,join,disp,tn);$(this).dialog('close'); }
    },
    Cancel: function() { if(form_status == 'edit') { form_status = 'new';$('#' + rowid).removeClass('ui-state-highlight'); }$(this).dialog('close');$('#form-course')[0].reset();$('#form-course').removeClass('ui-state-error');}},
    close: function() { if(form_status == 'edit') { form_status = 'new';$('#' + rowid).removeClass('ui-state-highlight'); }$('#form-course')[0].reset();$('#form-course').removeClass('ui-state-error');$(".validateTips").html('Choose an item to filter such as Course, Grade or Direction<br />An operator such as = or a Between range<br />Value such as an individual course, list of courses or value such as Left.');}
});

buttons code:

    $('#add-name').button({icons: {primary:'ui-icon-plus'}}).click(function(){form_status == 'new';$('#dialog-form-name').dialog('open');return false;});
$('#add-course').button({icons: {primary:'ui-icon-plus'}}).click(function(){$("#course-operator-t").show();$("#course-operator-n").hide();$("#course-value").autocomplete("option","disabled",false);$('#dialog-form-course').dialog('open');return false;});

You can see the problem here:

http://tinyurl.com/2uextrk

In IE click on NAME and then enter anything in the value box and save it. Now click on NAME and do the same again. As soon as you enter anything IE fails because it can not read $("#name-operator")

Answer 1

Finally worked this out.

in the close: function I had

$('#form-name')[0].reset();

This is to reset the form back to defaults after data was entered. In IE it totally wipes sets the form to null values, whilst in firefox it just resets it.

Had to change it to:

$('#form-name :text').val('');

for the text fields and reset the select id for the select options.