Ajouter une case à cocher à une boîte de dialogue dans jQuery

Question

Je suis totalement nouveau à jQuery et JavaScript et je dois modifier du code. Je dois ajouter une case à cocher à cette boîte de dialogue et prendre une décision basée sur le choix. Aucune suggestion?

function deleteFacets() 
{ 
    // button click 
    $("#b_facetsDelete").button().click(function(){ 
     // selected fIds 
     var $fIds=checkSfALOneSelectedFId(); 
     if(!$fIds) 
     { 
      return; 
     } 
     $('#deleteFacetsDialog').dialog('open');   
     return; 

    }); 

    // dialog 
    $("#deleteFacetsDialog").dialog({ 
     autoOpen: false, 
     resizable: false, 
     height:160, 
     modal: true, 
     buttons: { 
      "Cancel": function() { 
       $(this).dialog('close'); 
      }, 
      "Delete selected facets": function() { 
       $(this).dialog('close'); 

       // get the selected fIds 
       var $fIds=getSfSelectedFIds(); 

       //update database 
       $.ajax({ 
        url: 'ajax/ajax_facetsDelete.php', 
        type: 'POST', 
        data: {"fIds":$fIds}, 
        async: false, 
        dataType: 'xml', 
        error: function(){ 
         alert('Error loading XML document'); 
        }, 
        success: function(data){ 
         //check error 
         var $error=$(data).find('error').text(); 
         if($error!="0") 
         { 
          messageBox("Error",$error); 
          return; 
         } 
         //content 
         var $content=$(data).find('content').text(); 
         //refresh source facets tab 
         var $srcTabIndex=$("#srcFacetsTab").tabs('option', 'selected'); 
         if($content=="0") 
         { 
          messageBox("Succeed!","Delete successfully!"); 
          if($srcTabIndex==0) 
          { // for navigation 
           sfNavRefreshUntilParent(); 
          } 
          else if($srcTabIndex==1) 
          { //for search 
           sfSearchGridRefreshAll(); 
          } 
         } 
         else 
         {              
          messageBox("Warning!", $content+" can not be deleted since they have child facets or terms. <br/>Please empty them first(Move the child facets and move all the terms)."); 
          if($srcTabIndex==0) 
          { // for navigation (refresh and highlight the invalid fIds) 
           sfNavRefreshWithHighlightFIds($content); 
          } 
          else if($srcTabIndex==1) 
          { //for search 
           sfSearchGridRefreshWithHighlightFIds($content); 
          } 
         } 
        } 
       }); 
       return; 
      } 
     } 
    }); 

} 

HTML

<!-- delete facets confirmation dialog --> 
<div id="deleteFacetsDialog" title="Sure to delete?"> 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These facets will be permanently deleted and cannot be recovered. Are you sure?</p> 
</div> 

Answer 1

L'ID que vous appelez .dialog sur, deleteFacetsDialog, est l'endroit où tout le code pour le corps de la boîte de dialogue existe. Donc, ce que vous devez faire est de trouver cet ID dans la source HTML et d'y ajouter une case à cocher (et quel que soit le texte/l'étiquette dont vous avez besoin pour l'entourer).

Ensuite, dans le rappel de votre fonction de suppression, vous pouvez accéder à cette case à cocher, rechercher sa valeur et faire tout ce dont vous avez besoin en fonction de sa sélection. Par exemple:

<div id="deleteFacetsDialog"> 
... 
<label><input type="checkbox" id="permaDelete" />Perminantly delete this facet?</label> 
... 
</div> 

Et:

... 
"Delete selected facets": function() { 
    ... 
    if ($('#permaDelete').is(':checked')) { 

    } else { 

    } 
    ... 
} 

Assurez-vous que l'ID que vous utilisez dans le code HTML pour les lignes d'entrée avec ce que vous appelez JS.