Положение диалога jquery сильно зависит от действия скрытия / показа - PullRequest
Новая
       12

Положение диалога jquery сильно зависит от действия скрытия / показа

2 голосов
/ 06 октября 2011

Следующий код перехватывает щелчок на наборе радиокнопок, предупреждает, приведет ли изменение к удалению данных, а затем скрывает подчиненную форму и показывает другую подчиненную форму. Все действия выполняются, но на положение диалогового окна отрицательно влияет скрытие и отображение различных элементов div. Этот эффект зависит от того, какая радиопереключатель нажата первой. При нажатии кнопки «Повторное использование» в первый раз диалоговое окно отображается за пределами страницы.

Если я отключу скрытие / показ, положение диалогового окна в порядке.

Как мне это исправить? 

$(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');
                }
            }
        });
    };
});

1 Ответ

1 голос
/ 06 октября 2011

Похоже, что ответ лежит в порядке событий. В исходном коде функция provwarning вызывается изнутри функции. provwarning отображает диалоговое окно. Но тем временем вызывающая функция уже выполнила действие скрытия / показа. Если пользователь нажимает «Продолжить», диалоговое окно исчезает. Если пользователь нажимает кнопку «Отмена», диалоговое окно сбрасывает установленный переключатель и снова запускает исходную функцию.

Чтобы на действия в диалоговом окне не влияли действия скрытия / показа, эти действия должны произойти после диалоговое окно закрывается. Единственный способ убедиться, что это произойдет, это поместить вызовы Hide / Show в , чтобы диалоговая кнопка функционировала так: 

// 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
                       };
        });
 });

Хотелось бы знать, почему исходный код не ждет завершения диалогового окна, прежде чем применять Hide-Show.

...