2

Anythingsliderを使用してdiv間をスライドしようとしています：

    <h:panelGroup id="preview" layout="block"
        style="float: left; margin-left: 100px;">

        <ul id="slider">
            <li><ui:include src="./preview/WelcomePreview.xhtml" /></li>
            <li><ui:include src="./preview/CardPreview.xhtml" /></li>
        </ul>

    </h:panelGroup>

しかし、サイトにテーブルを含めるとすぐに機能しなくなります。スライダーに含めるdivにテーブルを含めないことに注意してください！リスト外です。エラーの原因はテーブルではないかもしれません。

これは私が含めようとしているhtmlです：

<rich:collapsiblePanel header="Title" switchType="client"
    expanded="false">

    <table style="table-layout: fixed;">
        <h:form>

            <tr>
                <td class="firstTD"><h:outputLabel value="Title: " /></td>
                <td><h:inputText id="title"
                        value="#{skinningBean.currentSkin.title}">
                        <a4j:ajax event="keyup" render="preview" />
                    </h:inputText></td>
            </tr>
        </h:form>
    </table>
</rich:collapsiblePanel>

編集

このコード行でエラーが発生することはすでに理解しています。

    <a4j:ajax event="keyup" render="titlePreview" />

ajaxを使用するときに正しく機能させる方法はありますか？

編集

適切なjavascript関数が見つからないようにするために最初に行ったのは、jQuerynoConflictタグを追加することでした。

<script type="text/javascript">
    var $jq = jQuery.noConflict();
  $jq(function($){
  $('#slider1').anythingSlider();
});
</script>

今、私の唯一の問題は、ページに何かがレンダリングされるとすぐに、JavaScriptが機能しなくなることです。これは、JavaScriptがページの初期化時に読み込まれるためだと思います。そして、パフォーマンスのためにレンダリングはページ全体をロードしませんか？

4

1 に答える 1

1

noConflict()モードが正しく設定されていません。次のように、ドキュメント準備機能の外で行う必要があります。

var $jq = jQuery.noConflict();
$jq(function($){
  $('#slider1').anythingSlider();
});

oncompleteこれまでa4jを使用したことはありませんが、ドキュメントをざっと見てみると、スライダーを再初期化するには属性を使用する必要があると思います。次のようなことを試してください：

<a4j:ajax event="keyup" render="preview" oncomplete="initSlider()" />

次に、JavaScript を次のように変更します。

var $jq = jQuery.noConflict();

function initSlider() {
  $jq(function($){
    $('#slider1').anythingSlider();
  });
}

私が言ったように、私はa4jの使用について無知ですが、これはうまくいくようです.

于 2013-03-14T15:36:42.910 に答える