如何使jquery-ui.dialog恢復表單取消

以下JavaScript允許設置一個單選按鈕來控制2 <fieldset>的備用可見性。我添加了一個函數provwarning來攔截單選按鈕上的單擊並確定更改是否會導致刪除記錄。如果可能，該功能會顯示一條警告消息並繼續（在「繼續」上）或將單選按鈕恢復爲「取消」上的原始設置。不幸的是，「取消」回覆沒有發生。我究竟做錯了什麼？如何使jquery-ui.dialog恢復表單取消

$(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：

<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>

來源

2011-05-17 dnagirl

時退房working jsFiddle demo改變你的「取消」按鈕，這樣的：

"Cancel" : function() { 

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

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

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

}

來源

2011-05-17 15:19:48

這是我想出了，比斯科特慢一點，但同樣的想法...

你唯一真正的錯誤是你如何去了解你的單選按鈕設置檢查值：

$("input[name='provenance']:checked").val(prov_was);

應該更像這樣：

$("input[name='prov'][value='"+prov_was+"']").attr('checked','checked');

工作演示在這裏：http://jsfiddle.net/ryleyb/Zh5ma/

來源

2011-05-17 15:29:36 Ryley

如何使jquery-ui.dialog恢復表單取消

回答

相關問題