Question

我是jQuery的新手，我尝试使用<a4j:outputPanel>在模态中使用选择的选择输入，但它不起作用。

这是我的代码：

<script type="text/javascript" src="resources/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="resources/js/chosen.jquery.js"></script>
<script type="text/javascript" src="resources/js/docsupport/prism.js"></script>
<script type="text/javascript" src="resources/js/jquery-no-conflict.js"></script>
<script type="text/javascript" src="resources/js/bootstrap.js"></script>
<script type="text/javascript" src="resources/js/jstz.min.js"></script>

<script type="text/javascript">
    function showEditProductModal(visible) {
        jQuery(function ($) {
            $('#addProductModal').modal(visible ? 'show' : 'hide');
        });
    }
    $('.chzn-select').chosen();
</script>
</ui:define>

<link rel="stylesheet" type="text/css" href="resources/css/chosen.css"/>
<link rel="stylesheet" type="text/css" href="resources/docsupport/prism.css" />

<!-- Add/Edit product modal -->
<a4j:outputPanel id="addProductModal"
                 layout="block"
                 styleClass="modal modal-large hide fade">
    <h:form id="editProductModalForm" prependId="false" styleClass="form-horizontal">
        <div class="modal-header">
            <h3>Ajouter un produit</h3>
        </div>
        <div class="modal-body" style="padding: 10px; max-height: 500px;">
            <div class="container-fluid"
                 style="margin-top: 10px; margin-bottom: 10px;">
                <div class="row-fluid">
                    <table border="1" class="table table-striped table-bordered">
                        <tr>
                            <td>Brands</td>
                            <td colspan="5">
                                <select id="chzn-select"
                                        style="width:350px;"
                                        multiple="multiple"
                                        class="chzn-select"
                                        data-placeholder="Select an option...">

                                    <option value=""></option>
                                    <option value="">OPT1</option>
                                    <option value="">OPT2</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="modal-footer" style="text-align: center;">
            <a id="cancelEditProductButton"
               href="#"
               class="btn btn-primary"
               data-dismiss="modal">
                #{common.COMMON_Cancel}
            </a>

            <a4j:commandButton id="saveEditProductButton"
                               type="button"
                               value="#{common.COMMON_Save}"
                               styleClass="btn btn-danger"
                               onclick="showWaitPane(true);
                                       showEditProductModal(false);"
                               oncomplete="showWaitPane(false);"
                               reRender="dataTableForm" />
        </div>
    </h:form>
</a4j:outputPanel>

当我把选择的选择放在模态之外时，它可以正常工作但在jquery-no-conflict.js上没有$.noConflict();。这种情况下的问题是点击时不会显示模态。

你对此有任何建议或想法吗？

Answer 1

抱歉，我在复制代码方面犯了一个错误：

<script type="text/javascript" src="resources/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="resources/js/chosen.jquery.js"></script>
<script type="text/javascript" src="resources/js/docsupport/prism.js"></script>
<!--<script type="text/javascript" src="resources/js/jquery-no-conflict.js"></script> -->
<script type="text/javascript" src="resources/js/bootstrap.js"></script>
<script type="text/javascript" src="resources/js/jstz.min.js"></script>

<script type="text/javascript">
    function showEditProductModal(visible) {
        jQuery(function ($) {
            $('#addProductModal').modal(visible ? 'show' : 'hide');
        });
    }
    $('.chzn-select').chosen();
</script>

使用选定的内部模态（a4j：outputPanel）不起作用

1 个答案: