How to use the Accordion

Hello,

i'm trying this nice library for a personal project.
I'm trying using the accordion.
The thing i'm trying to do is:

When I click on a button on the accordion, I want to update the content of the 
accordion.
Here's the code:

---- HTML -----
<div wicket:id="accordion">
 <button type="button" class="add-item-case" data-action="add-product-row" wicket:id="addItem">Add Item</button>
   <a href="javascript:;" class="accordion-trigger">Accordion Name (<span data="count">6</span>)</a>
   <div class="accordion-content" style="display: none;">
        <table class="grid">
           <thead>
            <tr>
                <th class="desc"><a href="http://mysite.com/javascript;;" class="sort">Description</a></th>
                <th class="size">Size</th>
            </tr>
        </thead>
        <tbody wicket:id="itemList">
        <tr><td colspan="3" wicket:id="label">No Items</td>       
               </tr>
    </tbody>
    </table>
</div>
</div>

-----------------

and the corresponding wicket Panel:

--------- JAVA ------------

public class MyPortlet extends Panel {

    public MyPortlet(String id) {
        this(id, new Model<Case>(new Case()));
    }

public MyPortlet(String id, Model<MyObject> objModel) {
    super(id, new CompoundPropertyModel<MyObject>(objModel));
        final Accordion myAcc = new Accordion("accordion");

        myAcc.add(new ListView<Item>("itemList", new ListModel<Item>(objModel.getObject().itemList)) {

            @Override
            protected void populateItem(ListItem<Item> item) {
//              item.setRenderBodyOnly(true)
                ;
                item.add(new Label("label", item.getModelObject().description));
            }

        }); 
        add(myAcc.setOutputMarkupId(true)); 
        add(new AjaxLink("addItem"){

            @Override
            public void onClick(AjaxRequestTarget target) {
                                ((MyObject)MyPortlet.this.getDefaultModelObject()).itemList.add(new Item("mpouahhaha"));
                target.add(myAcc);
            }
        });
    }
}

------------------

However, when I'm clicking on the button, I got a wicket Ajax error in the 
Wicket Debugger, and the accordion is not expanding anymore:

------------- WICKET AJAX DEBUGGER OUTPUT -------------------------
INFO:
<?xml version="1.0" encoding="UTF-8"?><ajax-response><component id="accordion4" 
><![CDATA[<div wicket:id="accordion" id="accordion4">
                                    <button type="button" class="add-item-case" data-action="add-product-row" wicket:id="addItem" id="addItem5" onclick="var wcall=wicketAjaxGet(&#039;.?2-1.IBehaviorListener.0-itemList-accordion-addItem&#039;,function() { }.bind(this),function() { }.bind(this), function() {return Wicket.$(&#039;addItem5&#039;) != null;}.bind(this));return !wcall;">Add Item</button>
                                    <a href="javascript:;" class="accordion-trigger">Accordion Name (<span data="count">6</span>)</a>
                                    <div class="accordion-content" style="display: none;">
                                        <table class="grid">
                                  <thead>
                                    <tr>
                                        <th class="desc"><a href="http://mysite.com/javascript;;" class="sort">Description</a></th>
                                        <th class="size">Size</th>
                                    </tr>
                                    </thead>
                                            <tbody wicket:id="itemList">
                                                <tr><td colspan="3" wicket:id="label">mpouahhaha</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>]]></component><header-contribution encoding="wicket1" ><![CDATA[<head xmlns:wicket="http://wicket.apache.org"><script type="text/javascript" src="wicket/resource/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js"></script>
<script type="text/javascript" 
src="wicket/resource/org.apache.wicket.ajax.WicketAjaxReference/wicket-ajax.js">
</script>
<script type="text/javascript" 
src="wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/wicket-a
jax-debug.js"></script>
<script type="text/javascript" 
src="wicket/resource/org.odlabs.wiquery.core.resources.CoreJavaScriptResourceRef
erence/jquery-1.6.4.js"></script>
<script type="text/javascript" 
src="wicket/resource/org.odlabs.wiquery.ui.core.CoreUIJavaScriptResourceReferenc
e/jquery.ui.core.js"></script>
<script type="text/javascript" 
src="wicket/resource/org.odlabs.wiquery.ui.widget.WidgetJavaScriptResourceRefere
nce/jquery.ui.widget.js"></script>
<script type="text/javascript" 
src="wicket/resource/org.odlabs.wiquery.ui.accordion.AccordionJavaScriptResource
Reference/jquery.ui.accordion.js"></script>
<link rel="stylesheet" type="text/css" 
href="wicket/resource/org.odlabs.wiquery.ui.themes.WiQueryCoreThemeResourceRefer
ence/uilightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" id="wicket-ajax-debug-enable">
/*<![CDATA[*/
wicketAjaxDebugEnable=true;
/*]^]^>*/
</script>
<script type="text/javascript" id="wicket-ajax-base-url">
/*<![CDATA[*/
Wicket.Ajax.baseUrl=".";
/*]^]^>*/
</script>
</head>]]></header-contribution><evaluate><![CDATA[$('#accordion4').accordion({}
)
;]]></evaluate></ajax-response>
INFO: Response parsed. Now invoking steps...
INFO: returned focused element: [object HTMLButtonElement]
INFO: returned focused element: [object HTMLButtonElement]
ERROR: Wicket.Ajax.Call.processEvaluation: Exception evaluating javascript: 
TypeErro

-------------------

Any Idea ?
Original issue reported on code.google.com by martin...@gmail.com on 23 Aug 2012 at 11:54
Heyvaert / wiquery

How to use the Accordion #256
