FancyBox模式中的表单部分

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。