Anythingslider not working with a4j:ajax?

Question

I am trying to use Anythingslider to slide between divs:

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

But as soon if I include a table into the site, it won't work anymore. Please note that I am NOT including the table to the div which i include to the slider! It is outside of the list. Maybe it isn't the table which causes an error.

This is the html I try to include:

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

EDIT

I already figured out, that this line of code produces the error:

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

Is there any way to make it work properly when using ajax?

EDIT

The first thing I did to avoid not finding the right javascript function was adding the jQuery noConflict tag:

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

Now my only problem is, that as soon as something is rendered on the page, the javascript isn't working anymore. I guess this is because the javascript is just loaded at page initialize. And the rendering doesn't load the full page beacuse of performance?

Answer 1

The noConflict() mode is not being set properly. It should be done outside of the document ready function, like this:

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

---

I've never used a4j before, but from a quick look in the docs, I think the oncomplete attribute needs to be used to re-initialize the slider. Try something like this:

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

Then change the javascript to this:

var $jq = jQuery.noConflict();

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

As I said, I'm clueless about using a4j, but this looks like it might work.