如何让jquery-ui.dialog在取消时还原表单 [英] how to make jquery-ui.dialog revert a form on cancel

问题描述

以下javascript允许设置单选按钮来控制2 < fieldset> s的替代可见性。我添加了一个函数 provwarning 来拦截单选按钮上的一个单击，并确定更改是否会导致记录删除。如果可能，该功能会显示一条警告消息，并继续（在继续上）或将单选按钮恢复为取消上的原始设置。不幸的是，取消回复没有发生。我究竟做错了什么？

The following javascript allows a radiobutton set to control the alternate visibility of 2 <fieldset>s. I added a function provwarning to intercept a click on the radiobuttons and determine if a change would lead to a record deletion. If that were possible, the function displays a warning message and either continues (on "Continue") or reverts the radiobutton set to the original setting on "Cancel". Unfortunately, the "Cancel" reversion is not happening. What am I doing wrong?

$(document).ready(function() {
    // initial visibility of provenance option fields
    $("input[name='provenance']").ready(function(){ 
        var v=$(this +":checked").val();
        if(v=='del'){
            $('#del').show();
            $('#cross').hide();
        } else if (v=='cross'){
            $('#cross').show();
            $('#del').hide();
        } else{
            $('#cross').hide();
            $('#del').hide();
        }
    });

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

        if(v=='del'){
            $('#del').show();
            $('#cross').hide();
        } else if (v=='cross'){
            $('#cross').show();
            $('#del').hide();
        } else{
            $('#cross').hide();
            $('#del').hide();
        }
    });

     //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();
        d=$('input[name="del_id"]').val();
        if(!(c||d))return; //prov_was is 'Unknown', so there is no conflict

        cw=(changingto=='unknown')? 'Unknown' : (changingto=='del') ? 'Delivered' : 'Bred Onsite';
        if(d){
            prov_was='del';
            msg="If you change the provenance to '"+cw+"' the current provenance, 'Delivered', will be deleted.";
        }else{
            prov_was='cross';
            msg="If you change the provenance to '"+cw+"' the current provenance, 'Bred Onsite', will be deleted.";
        }
        if(changingto==prov_was) return; //no change, so no worries

        m=modalpop(msg); //make a div to show the dialog
        $(m).dialog({
            resizable: false,
            height:140,
            modal: true,
            title: 'Conflict with current Provenance',
            buttons: {
                "Continue": function() {
                    $(this).dialog('close');
                },
                "Cancel": function() {
                    //not changing the form setting. WHY?
                    $("input[name='provenance']:checked").val(prov_was);                        $(this).dialog('close');
                }
            }
        });
    };
});

//create or empty a div with id='modalpop' for use as an alert box with jquery-ui.dialog()
function modalpop(msg){
    var m=$('#modalpop');
    if($(m).length==0){
        m='<div id="modalpop">'+msg+'</div>';
    }else{
        $(m).text(msg);
    }
    return m;
}

和HTML：

And the HTML:

<fieldset><legend>Provenance</legend>
    <fieldset class='col1'>
    <ul>
        <li><input type='radio' name='provenance' id='provenance0' value='unknown'  ><label for='provenance0' class='lilab'>Unknown</label></li>
        <li><input type='radio' name='provenance' id='provenance1' value='del'  ><label for='provenance1' class='lilab'>Delivered</label></li>
        <li><input type='radio' name='provenance' id='provenance2' value='cross' checked="checked" ><label for='provenance2' class='lilab'>Bred onsite</label></li>
    </ul>
    </fieldset>

    <fieldset class='optcol2' id='cross'>
        <div><label for='dam'>Dam</label><input name='dam_fish_name' id='dam' value='100730'/></div>
        <div><label for='dam_count'>Dam Count</label><input name='dam_count' id='dam_count' value='6'/></div>
        <div><label for='sire'>Sire</label><input name='sire_fish_name' id='sire' value='100715'/></div>
        <div><label for='sire_count'>Sire Count</label><input name='sire_count' id='sire_count' value='6'/></div>
        <div><label for='cross_date'>Cross Date</label><input name='cross_date' id='cross_date' value='2011-02-08'/></div>
        <div><label for='crossnotes'>Notes</label><textarea name='cross_notes' id='crossnotes'></textarea></div>
        <input name='cross_id' type="hidden" value="39" />
    </fieldset>

    <fieldset class='optcol2' id='del'>
        <div><label for='del_date'>Delivery Date</label><input name='delivery_date' id='del_date' type='text' value=''></div>
        <div><label for='del_count'>Delivery Count</label><input name='delivery_count' id='del_count' class='valcount' type='text' value='0'></div>
        <div><label for='supplier'>Supplier</label><select name='supplier_id' id='supp_name'>
            <option value='1' >ZIRC</option>
        </select></div>
        <div><label for='delnotes'>Notes</label><textarea name='delivery_notes' id='delnotes'></textarea></div>
        <input name='del_id' type="hidden" value="" />
    </fieldset>
</fieldset>

推荐答案

查看 正在运行jsFiddle演示 将您的取消按钮更改为：

Check out the working jsFiddle demo that changes your "Cancel" button to this:

"Cancel" : function() {

    var $radio = $('input[name="provenance"]');

    $radio
        .removeAttr("checked")
        .filter('[value="' + prov_was + '"]')
        .prop("checked", true)
        .click();

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

}

这篇关于如何让jquery-ui.dialog在取消时还原表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！