jquery et modification de deux champs de saisie masqués

Question

J'ai une table où j'affiche des informations pour qu'un utilisateur "approuve" ou "refuse" certains projets. J'ai créé deux images: un signe de croix pour les refus, et un signe de vérification pour les approbations. À chaque clic, j'ajoute l'identifiant unique à son champ de formulaire caché respectif (rejectedProjs et approvedProjs). De plus, si un utilisateur clique sur "refuser", j'affiche une zone de texte pour qu'il puisse entrer une raison. C'est ce que j'ai jusqu'à présent:

$("a[name^=reject-]").each(function() { 

    var name = $(this).attr('name');  
    var p_project_number = name.split('-')[1]; 
    $("a[name=reject-"+p_project_number+"]").tipbox("Reject pricing for "+p_project_number, 0, "reject-"+p_project_number); 
    $(this).click(function() { 
$("textarea[name=rejReason-"+p_project_number+"]").show(); 
rP = $("#rejectedProjs").val(); 
$("#rejectedProjs").val(rP+','+p_project_number); 
alert('rejects: '+$("#rejectedProjs").val()); 
    }); 
}); 

Il y a deux problèmes. Tout d'abord, si je clique deux fois sur le bouton Refuser pour le même projet, la boîte d'alerte affichera deux fois le numéro de projet. Comment puis-je vérifier le $ ("# rejectProjs"). Val() pour voir si ce numéro de projet est déjà là? Deuxièmement, si je dis d'abord refuser puis approuver, j'ai besoin de supprimer ce projet de $ ("# rejectProjs"). Val(). Je ne sais pas comment faire cela. Merci d'avance.

Answer 1

J'utiliserais un tableau au lieu d'une entrée cachée. De cette façon, vous pouvez facilement rechercher dans le tableau des valeurs déjà existantes, ajouter de nouvelles valeurs et supprimer des valeurs. Puis, après la manipulation est ensemble complet de la valeur d'une entrée cachée au tableau à l'aide array.join()

Un exemple très simple ressemble à quelque chose comme ceci:

var accepted = new Array(); 
var rejected = new Array(); 

function process(action, id) { 
    if(action == "accept") { 
     // look for item in accepted array, add if doesnt exist 
     if(findInArray(accepted, id) == -1) { 
      accepted.push(id); 
     } 

     // look for item in rejected array, remove if exists 

     var rejectedIdx = findInArray(rejected, id); 
     if(rejectedIdx == -1) { 
      accepted.splice(rejectedIdx, 1); 
     } 
    } else { 
     // The same, but for rejected ids. Not included for brevity... 
    } 

    // update hidden inputs 
    $("hiddenAccepted").val(accepted.join(",")); 
    $("hiddenRejected").val(rejectedaccepted.join(",")); 
} 

function findInArray(array, value) { 
    for(var i = 0; i < array.length; ++i) { 
     if(array[i] == value] return i; 
    } 
    return -1; 
} 

et ne pas oublier d'inclure réellement les entrées cachées dans votre page:

<input type="hidden" name="hiddenAccepted" /> 
<input type="hidden" name="hiddenRejected" /> 

Answer 2

Une option est d'avoir au lieu d'avoir 1 entrée que vous manipulez, d'inclure des entrées cachées uniques pour chacun des projets. Puis changez seulement cette entrée quand le bouton est pressé. Vous avez alors plusieurs options: les agréger du côté client sur submit, les agréger automatiquement côté serveur (cela dépend de votre serveur).

Answer 3

Je l'approche suivante à la tâche:

<div class="project"> 
    <span>some project elements</span> 
    <input name="number" type="hidden" value="1"/> 
    <a class="reject">Reject</a> 
    <a class="approve">Approve</a> 
</div> 

<script> 
    // Manipulating css classes on reject. 
    $(".reject").click(function(){ 
     $(this).parent().removeClass("approved").addClass("rejected"); 
    }); 

    // How to get all rejected numbers? 
    var rejected_numbers = $.map($(".project.rejected :hidden"), function(){ 
     return $(this).val(); 
    }).join(","); 
</script> 

Answer 4

Utilisez une classe pour par exemple. 'sélectionné' pour identifier les projets qui ont été approuvés. Chaque fois que le bouton est cliqué, exécutez une vérification & puis effectuez les actions en conséquence.