set radio button in jquery dialog

Question

I have the following if/else on another form and it works perfectly. I've now put it on a form which shows as a jquery dialog. Every alert along the way shows the correct assignment, but when the dialog opens, neither button is selected.

        $("#create-company").click(function() {
            alert($('#primary_company').val().length);
            if ($('#primary_company').val().length > 0) {
                alert("if secondary");
                $('#secondary').attr('checked', 'true');
                var id = $("input:radio[name='companyType']:checked").attr('id');
                alert(id);
            }
            else {
                alert("else primary");
                $('#primary').attr('checked', 'true');
                $('#sec').hide();
                var id = $("input:radio[name='companyType']:checked").attr('id');
                alert(id);
            }
            var id = $("input:radio[name='companyType']:checked").attr('id');
            alert(id);
            $('#popupCreateCompany').dialog('open');
        });

Dialog:

        $('#popupCreateCompany').dialog(
        {
            autoOpen: false,
            modal: true,
            buttons:
            {
                'Add': function() {
                    var dialog = $(this);
                    var form = dialog.find('input:text, select');
                    $.post('/company/post', $(form).serialize(), function(data) {
                        if (data.Result == "success") {
                            var id = $("input:radio[name='companyType']:checked").attr('id');
                            if (id == "primary") {
                                $('#company').append($('<option></option>').val(data.company_id).html(data.company_name).attr("selected", true));
                                $('#primary_company').append($('<option></option>').val(data.company_id).html(data.company_name).attr("selected", true));
                                $('#company_id').append($('<option></option>').val(data.company_id).html(data.company_name).attr("selected", true));
                            }
                            else {
                                $('#company_id').append($('<option></option>').val(data.company_id).html(data.company_name));
                            }
                            dialog.dialog('close');
                            alert("Company " + data.company_name + " successfully added.");

                        }
                        else {
                            alert(data.Result);
                        };
                    }, "json")
                },
                'Cancel': function() {
                    $(this).dialog('close');
                }
            }
        });

Radio buttons:

<label>Company Type:</label>
        <label for="primary"><input onclick="javascript: $('#sec').hide('slow');$('#primary_company').find('option:first').attr('selected','selected');" type="radio" name="companyType" id="primary" />Primary</label>
        <label for="secondary"><input onclick="javascript: $('#sec').show('slow');" type="radio" name="companyType" id="secondary" />Subsidiary</label>
        <div id="sec">
            <fieldset>
            <label for="primary_company">Primary Company:</label>
            <%= Html.DropDownList("primary_company", Model.SelectPrimaryCompanies, "** Select Primary Company **") %>
            </fieldset>
        </div>

Answer 1

The DOM has changed on loading of the dialog so you need to use a callback method to re-initialize your form values.

Try the "open" or "focus" callback events of the dialog:

$('#popupCreateCompany').dialog({
      open: function(event, ui) { ... }
});