jquery dialog position badly affected by hide/show action

The following code intercepts a click on a radiobutton set, warns if the change will cause data deletion, and then hides a subform and shows another subform. All the actions occur, but the position of the dialog box is adversely affected by the hiding and showing of the various divs. This effect varies depending on which radiobutton is pressed first. The 'reuse' button, when clicked first, causes the dialog box to display off the page.

If I turn off the hide/show, the dialog box position is fine.

How do I fix this?

$(document).ready(function() {
$("input[name='provenance']").ready(function(){ 
        var v=$("input[name='provenance']:checked").val();
        $('div#prov_container div.optcol2').not('#'+v).hide();
        $('#'+v).show(); 
    });

    // toggle hide/show of provenance field
    $("input[name='provenance']").live("click", function(){
        v=$(this).val();
        provwarning(v); //intercept choice and check for conflicts
        v=$(this).val();//may have changed due to provwarning

        $('div#prov_container div.optcol2').not('#'+v).hide();//AFFECTS dialog POSITION

        $('#'+v).show();//AFFECTS dialog POSITION

    });

     //determine if user choice will clobber existing data
     //warn user
     //continue or revert user choice to previous value
    provwarning=function(changingto){
        c= $('input[name="cross_id"]').val()? 'Cross': false; 
        d=$开发者_如何学运维('input#del_id').val()? 'Delivery':false;
        r=$('input#reuse_id').val()? 'Reuse': false;
        prov_was= c||d||r;
        if(!prov_was)return; //prov_was is 'Unknown', so there is no conflict
        if(prov_was==changingto) return; //no change, so no worries

        cw=(changingto=='Provenance')? 'unknown' : (changingto=='Delivery') ? 'delivered' : (changingto=='Reuse') ? 'reused' : 'bred onsite';
        ww=(prov_was=='Provenance')? 'unknown' : (prov_was=='Delivery') ? 'delivered' : (prov_was=='Reuse') ? 'reused' : 'bred onsite';
        msg="If you change the provenance to '"+cw+"' the current provenance, '"+ ww +"', will be deleted.";

        m='<div id="modalpop">'+msg+'</div>'; 
        $(m).dialog({
            resizable: false,
            modal: true,
            title: 'Conflict with current Provenance',
            buttons: {
                "Continue": function() {
                    $(this).dialog('close');
                },
                "Cancel": function() {
                    var $radio = $('input[name="provenance"]');
                    $radio
                        .removeAttr("checked")
                        .filter('[value="' + prov_was + '"]')
                        .prop("checked", true)
                        .click();

                    $(this).dialog('close');
                }
            }
        });
    };
});

---

It appears that the answer lies in the order of events. In the original code, the provwarning function is called from inside a function. provwarning displays a dialog box. But in the meantime the calling function has already done the hide/show action. If the user clicks 'Continue', the dialog box goes away. If the user clicks 'Cancel', the dialog box resets the radio button set and triggers the original function again.

For the dialog position not to be affected by the hide/show actions, those actions must happen after the dialog box closes. The only way I could ensure that this happens was by putting the hide/show calls inside the dialog button functions like this:

// toggle hide/show of provenance field
$("input[name='provenance']").live("click", function(){
        changingto=$(this).val();

        c= $('input[name="cross_id"]').val()? 'Cross': false; 
        d=$('input#del_id').val()? 'Delivery':false;
        r=$('input#reuse_id').val()? 'Reuse': false;
        prov_was= c||d||r;
        if(prov_was==changingto) return; //no change, so no worries
        if(!prov_was) {
           $('#'+changingto).show().siblings('.optcol2').hide();
           return; //prov_was is 'Unknown', so there is no conflict
        }

        cw=(changingto=='Provenance')? 'unknown' : (changingto=='Delivery') ? 'delivered' : (changingto=='Reuse') ? 'reused' : 'bred onsite';
        ww=(prov_was=='Provenance')? 'unknown' : (prov_was=='Delivery') ? 'delivered' : (prov_was=='Reuse') ? 'reused' : 'bred onsite';
        msg="If you change the provenance to <strong>'"+cw+"'</strong> the current provenance, <strong>'"+ ww +"'</strong>, will be deleted.";


        m=modalpop(msg); //make or reuse a div to show the dialog
        $(m).dialog({
            resizable: false,
            modal: true,
            title: 'Conflict with current Provenance',
            buttons: {
               'Continue': function() {
                           $(this).dialog('close');
                           $('#'+changingto).show().siblings('.optcol2').hide(); //hide-show IN BUTTON
                        },

               'Cancel': function() {
                            var $radio = $('input[name="provenance"]');
                            $radio
                                .removeAttr("checked")
                                .filter('[value="' + prov_was + '"]')
                                .prop("checked", true);
                            $(this).dialog('close');
                            $('#'+prov_was).show().siblings('.optcol2').hide();//hide-show IN BUTTON
                       };
        });
 });

I wish I knew why the original code doesn't wait for the dialog to complete before applying the hide-show.