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

Question

I'm new to jQuery and I try to use select chosen input inside a modal using <a4j:outputPanel> but it doesn't work.

This my code :

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

When I put the select chosen outside the modal it work fine but without a $.noConflict(); on jquery-no-conflict.js. The problem in this case is that the modal doesn't appears on click.

Do you have any suggestion or idea about it?

Answer 1

Sorry, I did a mistake in copying code:

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