0

我试图将表单的不同部分隐藏在fancybox modals 中，这样我就不必显示表单的可选部分。这实际上在它呈现 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>
4

1 回答 1

1

您的 fancybox 自定义脚本是

$('.filters').fancybox()

...所以我猜你的隐藏divs不应该有class="filters"类似的东西

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

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

于 2012-07-27T22:21:02.700 回答