任何滑动不与a4j:ajax工作

Question

我正在尝试使用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函数，我做的第一件事是添加jQuery noConflict标签:

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

现在我唯一的问题是，只要在页面上渲染的东西，javascript不再工作了。我猜这是因为javascript只是在页面初始化时加载的。由于性能问题，渲染不会加载整个页面?

Answer 1

未正确设置noConflict()模式。它应该在文档准备函数之外完成，像这样:

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

---

我以前从未使用过a4j，但是从文档中快速查看，我认为需要使用oncomplete属性来重新初始化滑块。试试这样做:

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

然后把javascript改成:

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

正如我所说的，我对使用a4j一无所知，但这看起来可能行得通。