Form Sections Within A FancyBox Modal

Question

I'm trying to have different sections of my form hidden in fancybox modals, so that I don't have to display optional parts of the form. This actually works pretty well in the way it renders the UI and amazingly submitting the form works no problem. The issue comes when I try to change checkbox or radio button values in on one of the modals. The value does not change and it causes the modal to reopen. Does anyone have any suggestions as I don't even know where to begin.

I've found the following site describing the same setup: http://duckranger.com/2012/01/fancybox-problems-make-sure-you-validate/

Following the advice on there I have validated my code and everything passes, still the problem remains.

I am also using the jqTransform plugin to style my form, but I have turned that off and still get the same problem so I don't think it is related to that. I have used fancybox many times before to create forms in a single modal, but never across multiple ones. I've included my jsp markup and javascript below.

Thanks in advance!

<div id="searchPage">

<form:form action="Search" method="post" modelAttribute="search">

<div id="search-text">      
    <form:label path="searchString">Search</form:label>
    <form:errors path="searchString" cssClass="error"/>
    <form:input path="searchString" />
    <input type="submit" name="search" value="Search"></input>          
</div>

<div id="filter-controls">
    <a class="filters" href="#museum-filters">Museums</a>
    <a class="filters" href="#period-filters">Periods</a>
    <a class="filters" href="#extras-filters">Extras</a>
</div>

<div id="search-results">
    No Results
</div>

<div class="clear"></div>

<div id="museum-filters" class="filters" style="display:none;">
    <c:forEach items="${search.museums}" var="museum" varStatus="museumIndex">
        <label for="${fn:replace(museum, ' ', '-')}">${museum}</label>
        <form:checkbox path="periods[${museumIndex.count - 1}]" id="${fn:replace(museum, ' ', '-')}" checked="checked" value="${museum}"/>
    </c:forEach>
</div>
<div id="period-filters" class="filters" style="display:none;">
    <c:forEach items="${search.periods}" var="period" varStatus="periodIndex">
        <label for="${fn:replace(period.name, ' ', '-')}">${period.displayName}</label>
        <form:checkbox path="periods[${periodIndex.count - 1}]" id="${fn:replace(period.name, ' ', '-')}" checked="checked" value="${period.name}"/>

        <div id="exp${period.name}">
            <%-- <c:forEach items="${period.subPeriods}" var="subPeriod" varStatus="periodSubIndex">

                <label for="${subPeriod.name}">${subPeriod.displayName}</label>
                <form:checkbox path="periods[${periodSubIndex.count - 1}].subPeriods" cssClass="${period.name}" id="${subPeriod.name}" name="${subPeriod.name}" checked="true" value="${period.name}"/>

            </c:forEach> --%>
        </div>

    </c:forEach>
</div>
<div id="extras-filters" class="filters" style="display:none;">
    <label for="searchDescription">Search Description</label>
    <form:checkbox path="searchDescription" id="searchDescription" checked="checked"></form:checkbox>
    <label for="hasImage">Has An Image</label>
    <form:checkbox path="hasImage" id="hasImage" checked="checked"></form:checkbox>
    <div class="clear"></div>
    <label for="hasPaper">Has Paper Data</label>
    <form:checkbox path="hasPaper" id="hasPaper" checked="checked"></form:checkbox>
    <label for="hasExtended">Has Extended Info</label>
    <form:checkbox path="hasExtended" id="hasExtended" checked="checked"></form:checkbox>
    <div class="clear"></div>
</div>

<div class="clear"></div>

</form:form>    

</div>

<script type="text/javascript">

$(document).ready( function()
{
    $('.filters').fancybox({
    width       : 800,
    height      : 500,
    fitToView   : false,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'elastic',
    closeEffect : 'fade',
    padding     : '20'
    });
});

</script>

Answer 1

Your fancybox custom script is

$('.filters').fancybox()

...so I guess your hidden divs shouldn't have the class="filters" like in

<div id="museum-filters" class="filters" style="display:none;"> 

because that bound them to fancybox as well (the target also becomes the trigger) so when you click inside of them (checkbox) it triggers fancybox again.