jQuery Dialog, checkboxes and setting values outside the modal

Question

Having some problems with the jQuery UI Dialog and using checkbox values within it. What I have is a form with the first few selections in it and a link that says "more". When a user clicks this they open a Dialog box and can choose from a full list of options.

With the first batch of checkboxes (not in the Dialog) I am setting their value to a hidden field when clicked which I then use on submitting the form:

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 to add to hidden field

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

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

This works fine, and I can see in my #cuisineString that it is populating.

However my Dialog box, which I am spawning by:

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>

What I can't see to do is if I click a checkbox in here, it doesn't populate in the DIV, however if I close this and click on one outside the dialog it not only populates #cuisineString with the latest click, but all the ones I checked in the dialog.

I am sure I need to add something but been tearing our hair to what it is!

Lastly, I should prob start a new question but if anyone has an idea, what I also want to do is if someone say clicks "British" either in the dialog or on the page then it should check the box in both the dialog and the original, and add the value to the #cuisineString as I double up the first few options.

Answer 1

EDIT: Because JQuery dialog copies your "popup"-div inside its own containing div the checkboxes loose the function you bound to the click-event. If you instead use the live-function like this it should work as you wanted it to:

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

Instead of:

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

---

To answer the last part of your question about how to sync the checkboxes inside and outside of the dialog I came up with this 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)
}

It may not be pretty but it gets the job done ;)