comment faire jquery-ui.dialog annuler un formulaire sur annuler

Question

Le javascript suivant permet à un ensemble de radiobutton de contrôler la visibilité alternée de 2 <fieldset> s. J'ai ajouté une fonction provwarning pour intercepter un clic sur les radiobuttons et déterminer si un changement entraînerait une suppression d'enregistrement. Si cela était possible, la fonction affiche un message d'avertissement et continue (sur "Continuer") ou rétablit le réglage d'origine du commutateur radio sur "Annuler". Malheureusement, la réversion "Annuler" ne se produit pas. Qu'est-ce que je fais mal?

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

Et le code 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> 

Answer 1

Vérifiez la working jsFiddle demo qui change "Annuler" pour ceci:

"Cancel" : function() { 

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

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

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

} 

Answer 2

C'est ce que je suis venu avec , peu plus lent que Scott, mais la même idée ...

Votre seule erreur réelle était de savoir comment vous allez sur le réglage de la valeur cochée sur votre bouton radio:

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

devrait être plus comme ceci:

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

travail démo ici: http://jsfiddle.net/ryleyb/Zh5ma/