jQuery Boîte de dialogue, cases à cocher et valeurs de réglage en dehors du modal

Question

Problèmes avec la boîte de dialogue de l'interface utilisateur jQuery et utilisation des valeurs de case à cocher. Ce que j'ai est un formulaire avec les premières sélections et un lien qui dit "plus". Lorsqu'un utilisateur clique dessus, il ouvre une boîte de dialogue et peut choisir parmi une liste complète d'options.

Avec le premier lot de cases à cocher (pas dans la boîte de dialogue) Je suis en train de leur valeur à un champ caché quand on clique dessus que je l'utilise ensuite soumettre le formulaire:

HTML

<div class="col cuisines cuisineSelect"> 
<ul> 
<li><input name="cuisine" value="165" type="checkbox" id="c-165"><label for="c-165">British</label></li> 
<li><input name="cuisine" value="911" type="checkbox" id="c-911"><label for="c-911">Chinese</label></li> 
<li><input name="cuisine" value="1047" type="checkbox" id="c-1047"><label for="c-1047">European</label></li> 
</ul> 
</div> 

Javascript pour ajouter au champ caché

$(function() { 
    $('.cuisineSelect input').click(updateHiddenCuisineValues); 
    updateHiddenCuisineValues(); 
}); 

function updateHiddenCuisineValues() { 
    var allVals = []; 
    $('.cuisineSelect :checked').each(function() { 
    allVals.push($(this).val()); 
    }); 
    $('#cuisineString').val(allVals) 
} 

Cela fonctionne très bien, et je peux voir dans mon #cuisineString qu'il est en train de peupler.

Cependant ma boîte de dialogue, que je suis fraie par:

Dialog Javascript

$("#moreCuisines").click(function(){ 
    $("#cuisineExtra").dialog({ 
     width: '200', 
     dialogClass: 'cuisineSelect', 
     buttons: { 
      "Refresh Search": function() {(
       $(this).dialog("close") 
      );} 
     }, 
    }); 
    return false; 
}) 

Dialog DIV HTML

<div id="cuisineExtra" class="hiddenSearchPanel" title="Available Cuisines"> 
<div class="col"> 
<ul> 
<li><input name="cuisine" value="165" type="checkbox" id="ch-165"><label for="c-165">British</label></li> 
<li><input name="cuisine" value="911" type="checkbox" id="ch-911"><label for="c-911">Chinese</label></li> 
<li><input name="cuisine" value="1047" type="checkbox" id="ch-1047"><label for="c-1047">European</label></li> 
<li><input name="cuisine" value="166" type="checkbox" id="ch-166"><label for="c-166">French</label></li> 
<li><input name="cuisine" value="167" type="checkbox" id="ch-167"><label for="c-167">Indian</label></li> 
<li><input name="cuisine" value="1027" type="checkbox" id="ch-1027"><label for="c-1027">Indonesian</label></li> 
</ul> 
</div> 
</div> 

Ce que je ne vois pas faire est si je clique sur une case à cocher ici, il ne remplit pas dans la DIV, mais si je ferme ceci et cliquez sur o En dehors de la boîte de dialogue, il ne remplit pas seulement #cuisineString avec le dernier clic, mais tous ceux que j'ai cochés dans la boîte de dialogue.

Je suis sûr que j'ai besoin d'ajouter quelque chose mais en train de déchirer nos cheveux à ce que c'est! Enfin, je devrais probablement commencer une nouvelle question, mais si quelqu'un a une idée, ce que je veux aussi faire est de dire si quelqu'un clique sur "British" soit dans la boîte de dialogue, soit sur la page, puis cochez la case le dialogue et l'original, et ajouter la valeur à la #cuisineString comme je double les premières options.

Answer 1

EDIT: Parce que la boîte de dialogue JQuery copie votre "popup" -div dans son propre contenant div les cases à cocher perdre la fonction que vous avez lié à l'événement click. Si vous utilisez plutôt la fonction en direct comme cela, il devrait fonctionner comme vous le voulais:

$(function() { 
    $('.cuisineSelect input').live('change',updateHiddenCuisineValues); 
    updateHiddenCuisineValues(); 
}); 

Au lieu de:

$('.cuisineSelect input').click(updateHiddenCuisineValues); 

---

Pour répondre à la dernière partie de votre question sur la façon de synchroniser les cases à l'intérieur et à l'extérieur de la boîte de dialogue, je suis venu avec cette solution:

function updateHiddenCuisineValues() { 
    //the next four lines checks or de-checks any checkboxes with same name and value as the one just clicked 
    if($(this).is(':checked')) 
    $('[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').attr('checked','checked'); 
    else 
    $('[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').removeAttr('checked'); 
    var allVals = []; 
    $('.cuisineSelect :checked').each(function() { 
    if($.inArray($(this).val(),allVals) == -1) //this ensures that the same value won't be added more than once 
     allVals.push($(this).val()); 
    }); 
    $('#cuisineString').val(allVals) 
} 

Il ne peut pas être assez, mais il fait le travail;)