jQuery диалог, флажки и настройки значений за пределами модального - PullRequest
Новая
       9

jQuery диалог, флажки и настройки значений за пределами модального

0 голосов
/ 17 мая 2010

Возникли проблемы с диалоговым окном jQuery UI и использованы значения флажков внутри него.То, что у меня есть, это форма с несколькими первыми выборками и ссылкой, которая говорит «больше».Когда пользователь нажимает эту кнопку, он открывает диалоговое окно и может выбирать из полного списка параметров.

С первой партией флажков (не в диалоге) я устанавливаю их значение в скрытом поле при нажатии, которое затем использую при отправке формы:

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 для добавления в скрытое поле 

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

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

Это прекрасно работает, и я вижу в моем #cuisineString, что он заполняется.

Однако мой Диалоговое окно, которое я порождаю:

Диалог Javascript 

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

Диалог 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>

Чего я не вижу, так это если я поставлю здесь флажок, он не заполняется в DIV, однако, если я закрою его и нажму на один вне диалогового окна, он не только заполняется #cuisineString с последним щелчком мыши, но все те, которые я проверил в диалоговом окне.

Я уверен, что мне нужно что-то добавить, но мы рвали на себе то, что есть!

Наконец, ядолжен начать новый вопрос, но если у кого-то есть идея, я тоже хочу сделать, если кто-то скажет, что нажимает «британец» на циферблате.og или на странице, тогда он должен установить флажок как в диалоговом окне, так и в оригинале, и добавить значение к #cuisineString, когда я удваиваю несколько первых опций.

1 Ответ

3 голосов
/ 17 мая 2010

EDIT: Поскольку диалоговое окно JQuery копирует ваш «всплывающий» -div внутри собственного, содержащего div, флажки теряют функцию, которую вы привязали к событию click. Если вы вместо этого используете живую функцию, как это, она должна работать так, как вы хотели: 

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

Вместо: 

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

Чтобы ответить на последнюю часть вашего вопроса о том, как синхронизировать флажки внутри и снаружи диалогового окна, я предложил следующее решение: 

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)
}

Это может быть не красиво, но это делает работу;)

...