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() mode未正确设置。它应该在文档就绪函数之外完成，如下所示：

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毫无头绪，但看起来它可能有效。

Anythingslider没有使用a4j：ajax？

1 个答案: