Using javascript (bootstrap) in Wicket

Question

1. First I added the JavaScript in Wicket correctly with a JavaScript resource reference.

   response.renderJavaScriptReference("http://code.jquery.com/jquery-latest.js");
   response.renderJavaScriptReference(new JavaScriptResourceReference(JSAccessor.class,"bootstrap.js"));
   response.renderJavaScriptReference(new JavaScriptResourceReference(JSAccessor.class,"bootstrap.min.js"));
   

2. Second I added the bootstrap CSS to wicket with CSS resource reference.

   response.renderCSSReference(new CssResourceReference(CssAccessor.class,
           "bootstrap.css"));
   response.renderCSSReference(new CssResourceReference(CssAccessor.class,
           "bootstrap-responsive.css"));
   

   That works so far. Why ?

   I can see the JavaScript files in the source code, opened via the browser. And when I click on the file

   <script type="text/javascript" src="./wicket/resource/blablabla.JSAccessor/bootstrap-ver-1357907592544.js"></script>
   

   it shows the JavaScript file inside the browser. So it is loaded.

3. I added the required tags to my Html page as described here: http://twitter.github.com/bootstrap/javascript.html#tabs

       <ul class="nav nav-tabs">
           <li><a href="#" data-toggle="tab" wicket:id="as2">AS2</a></li>
           <li><a href="#" data-toggle="tab" wicket:id="ftp">FTP</a></li>
           <li><a href="#" data-toggle="tab" wicket:id="long">Long-Running</a></li>
       </ul>
   

and the JavaScript is not working... the active tab will not be shown as active.

The javascript debugger console shows me:

Error: Syntax error, unrecognized expression: ./wicket/bookmarkable /blablabla.AS2Page  

throw new Error( "Syntax error, unrecognized expression: " + msg );

When I want to access the pages.

What am I missing?

Answer 1

Instead of binding directly to Twitter Bootstrap I would suggest using wicket-bootstrap integration. This allows you work with Bootstrap components in Java code which is more Wicket-style instead of fiddling with them with Javascript.

The project can be found at: https://github.com/l0rdn1kk0n/wicket-bootstrap. It has decent instructions for getting started. For more advanced usage I recommend investigating the sample project.