Как сохранить контент fancybox при обратном вызове?

Question

У меня есть страница с множеством переключателей, которые скрыты и отображаются при вызове fancybox.

Вот мой код js для вызова контента в fancybox при срабатывании.

 $("#serviceType").change(function() {
    var selectedOption_ID = $("#serviceType option:selected").attr("value");
    if (selectedOption_ID == "7"){
      $.fancybox({
        'content': $("#advancedInspection").html()
      });
    }
  });

Часть кода внутри #advancedInspection:

<div id="advancedInspection" style="display:none;">
    <h3>TITLE</h3>
    <table cellpadding="2" cellspacing="2" width="900">
        <tr style="text-align:left">
            <td>DEVANT</td>
            <td>Oui <input type="radio" name="tlDevant1" value="yes"/></td>
            <td>Non <input type="radio" name="tlDevant1" value="no"/></td>
            <td>DEVANT</td>
            <td>Oui <input type="radio" name="tlDevant2" value="yes"/></td>
            <td>Non <input type="radio" name="tlDevant2" value="no"/></td>
        </tr>
        <tr style="text-align:left">
            <td>DOS</td>
            <td>Oui <input type="radio" name="tlDos1" value="yes"/></td>
            <td>Non <input type="radio" name="tlDos1" value="no"/></td>
            <td>DOS</td>
            <td>Oui <input type="radio" name="tlDos2" value="yes"/></td>
            <td>Non <input type="radio" name="tlDos2" value="no"/></td>
        </tr>
        <tr style="text-align:left">
            <td>HAUT DE DOS</td>
            <td>Oui <input type="radio" name="tlHautDos" value="yes"/></td>
            <td>Non <input type="radio" name="tlHautDos" value="no"/></td>
            <td>TAILLE</td>
            <td>Oui <input type="radio" name="tlTaille" value="yes"/></td>
            <td>Non <input type="radio" name="tlTaille" value="no"/></td>
        </tr>
....
   </table>
</div>

Все работает нормально, за исключением того, что когда я закрываю этот fancybox и перезваниваю снова, все выбранные переключатели исчезают. Мне нужно перепроверить их 1 на 1.

Есть ли способ использовать Fancybox, чтобы загрузить DIV страницы и сохранить изменения, которые вы делаете?

Обратите внимание, что #serviceType - это раскрывающееся меню со всеми параметрами. И когда опция с идентификатором # 7 выбрана, она запускает fancybox с содержимым # advancedInspection.

Answer 1

Вы можете добавить функции к обратным вызовам onComplete и onCleanup для восстановления и сохранения входных значений соответственно. Вот демоверсия и код:

var form = $("#advancedInspection"),
    inputs = form.find('input'),
    saveValues = function() {
        $('#fancybox-content input').each(function(i) {
            inputs.eq(i).attr('checked', this.checked);
        });
    },
    restoreValues = function() {
        $('#fancybox-content input').each(function(i) {
            this.checked = inputs.eq(i).is(':checked');
        });
    };

$('button').click(function() {
    $.fancybox({
        'content': form.html(),
        onComplete: restoreValues,
        onCleanup: saveValues
    });
});