Question

我正在尝试将我的表单的不同部分隐藏在fancybox模式中，这样我就不必显示表单的可选部分。这实际上在它呈现UI的方式非常好，并且令人惊讶地提交表单没有问题。当我尝试更改其中一个模态中的复选框或单选按钮值时，会出现问题。该值不会更改，它会导致模式重新打开。有没有人有任何建议，因为我甚至不知道从哪里开始。

我发现以下网站描述了相同的设置：http://duckranger.com/2012/01/fancybox-problems-make-sure-you-validate/

根据那里的建议，我已经验证了我的代码，一切都过去了，问题仍然存在。

我也使用jqTransform插件来设置我的表单样式，但是我已经将其关闭并仍然遇到同样的问题，因此我认为它与此无关。我曾经多次使用fancybox在单个模态中创建表单，但从不跨越多个模式。我在下面包含了我的jsp标记和javascript。

提前致谢！

<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

您的fancybox自定义脚本是

$('.filters').fancybox()

...所以我猜你隐藏的divs不应该像

中的class="filters"一样

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

因为它也将它们绑定到fancybox（目标也成为触发器）所以当你点击它们内部时（复选框）它会再次触发fancybox。

FancyBox模式中的表单部分

1 个答案: