0

フォームのオプションの部分を表示する必要がないように、フォームのさまざまなセクションをファンシーボックスモーダルに非表示にしようとしています。これは実際、UI をレンダリングする方法で非常にうまく機能し、驚くほどフォームを送信しても問題ありません。この問題は、モーダルの 1 つでチェックボックスまたはラジオ ボタンの値を変更しようとすると発生します。値は変更されず、モーダルが再度開かれます。どこから始めればいいのかわからないので、誰か提案はありますか。

同じセットアップについて説明している次のサイトを見つけました: http://duckranger.com/2012/01/fancybox-problems-make-sure-you-validate/

そこでのアドバイスに従って、コードを検証し、すべてが合格しましたが、それでも問題は残ります。

また、jqTransform プラグインを使用してフォームのスタイルを設定していますが、それをオフにしても同じ問題が発生するため、それに関連しているとは思いません。ファンシーボックスを以前に何度も使用して、単一のモーダルでフォームを作成しましたが、複数のモーダルにまたがることはありませんでした。以下に、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

ファンシーボックスのカスタムスクリプトは

$('.filters').fancybox()

...だから私はあなたの非表示に似たものを入れるdivsべきではないと思いますclass="filters"

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

それはそれらをfancyboxにもバインドするため（ターゲットもトリガーになります）、それらの内側（チェックボックス）をクリックするとfancyboxが再びトリガーされます。

于 2012-07-27T22:21:02.700 に答える