Hi, i am using wicket 6.13.0 and i am trying to implement the accordion
functionality using jquery.
Java Code:





    package com.digid.wicket.usability;

    import org.apache.wicket.markup.head.CssReferenceHeaderItem;
    import org.apache.wicket.markup.head.IHeaderResponse;
    import org.apache.wicket.markup.head.JavaScriptReferenceHeaderItem;
    import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
    import org.apache.wicket.markup.html.WebMarkupContainer;
    import org.apache.wicket.markup.html.WebPage;
    import org.apache.wicket.request.Url;
    import org.apache.wicket.request.resource.UrlResourceReference;

    public class AccordionJquery extends WebPage {

        public AccordionJquery() {
                WebMarkupContainer wmc = new WebMarkupContainer("accordion-2");
                wmc.setOutputMarkupPlaceholderTag(true);
                add(wmc);
        }
        
        @Override
        public void renderHead(IHeaderResponse response){
                //response.render(JavaScriptReferenceHeaderItem.forReference(new
UrlResourceReference(Url.parse("http://code.jquery.com/ui/1.10.4/jquery-ui.js";))));
                //response.render(JavaScriptReferenceHeaderItem.forReference(new
UrlResourceReference(Url.parse("http://code.jquery.com/jquery-1.10.2.js";))));
                //response.render(CssReferenceHeaderItem.forReference(new
UrlResourceReference(Url.parse("http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css";))));
           
response.render(OnDomReadyHeaderItem.forScript("$('#accordion_21').accordion()"));
        }

    }



HTML Code:





    <!doctype html>
    <html lang="en" xmlns:wicket="http://wicket.apache.org";>
       <head>
          <meta charset="utf-8">
          <title>jQuery UI Accordion Example </title>
          

       </head>
       <body>
          <div wicket:id="accordion-2">
             
Tab 1

          <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna 
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                ullamco laboris nisi ut aliquip ex ea commodo consequat. 
             </p>
          </div>
          
Tab 2

          <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna 
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                ullamco laboris nisi ut aliquip ex ea commodo consequat.      
             </p>
          </div>
          
Tab 3

          <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna 
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                ullamco laboris nisi ut aliquip ex ea commodo consequat.      
             </p>
             <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
             </ul>
          </div>
          </div>
       </body>
    </html>



Generated HTML:





    <!doctype html>
    <html lang="en" xmlns:wicket="http://wicket.apache.org";>
       <head>
          <meta charset="utf-8">
          <title>jQuery UI Accordion Example </title>
          

       
    
    
    </head>
       <body>
          <div wicket:id="accordion-2" id="accordion_21">
             
Tab 1

          <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna 
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                ullamco laboris nisi ut aliquip ex ea commodo consequat. 
             </p>
          </div>
          
Tab 2

          <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna 
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                ullamco laboris nisi ut aliquip ex ea commodo consequat.      
             </p>
          </div>
          
Tab 3

          <div>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna 
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                ullamco laboris nisi ut aliquip ex ea commodo consequat.      
             </p>
             <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
             </ul>
          </div>
          </div>
       </body>
    </html> 



I get a javascript error saying: `Object doesn't support this property or
method` on line 15 of the generated HTML.

I tried with jquery library which is commented in the code.
Once with keeping jquery library in HTML code and once with Keeping it in
Java code using the renderHead method.
It just doesn't work.
Am i missing anything here?

--
View this message in context: 
http://apache-wicket.1842946.n4.nabble.com/Accordion-using-jquery-and-wicket-6-tp4669182.html
Sent from the Users forum mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Reply via email to