FancyBox 모달 내 양식 섹션

Question

양식의 선택적 부분을 표시 할 필요가 없도록 양식의 다른 섹션을 fancybox 모달에 숨기려고합니다. 이것은 실제로 UI를 렌더링하는 방식으로 꽤 잘 작동하고 놀랍게도 양식을 제출하면 문제가 없습니다. 문제는 모달 중 하나에서 확인란이나 라디오 버튼 값을 변경하려고 할 때입니다. 값이 변경되지 않고 모달이 다시 열립니다. 어디서부터 시작해야할지조차 모르기 때문에 누구에게도 제안이 있습니까?

나도 같은 설정을 설명하는 다음 사이트를 발견했습니다 : 내 코드와 통과 모든 것을 검증 한 거기에 조언에 따라 http://duckranger.com/2012/01/fancybox-problems-make-sure-you-validate/

을, 여전히 문제는 남아있다.

jqTransform 플러그인을 사용하여 양식의 스타일을 지정하고 있지만이 설정을 해제했지만 여전히 동일한 문제가 발생하여 관련이 있다고 생각하지 않습니다. 필자는 fancybox를 여러 번 사용하여 단일 모달로 양식을 작성했지만 여러 양식에는 양식을 작성하지 않았습니다. 내 JSP 마크 업과 자바 스크립트를 아래에 포함했습니다.

미리 감사드립니다.

는

<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() 

당신의 그 같은 fancybox 그들을 구속하기 때문에 divs가에서

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

처럼 class="filters"이 안 숨겨 잘 (대상도 트리거가됩니다.) 그래서 내부를 클릭하면 (확인란) fancybox가 다시 트리거됩니다.