JQuery Accordion problem in Orchard view

Topics: Core, Customizing Orchard, General
Oct 11, 2013 at 6:36 AM
Hello everyone,

I want to implement JQuery accordion and its not running. I have included these script files in my Themes/MyThemse/Views/Layout.cshtml :

I have added this script on my page where I want to use accordion
<script type="text/javascript"> $(function () { $("#accordion").accordion({ collapsible: true }); }); </script> For accordion I am using this code on my page:
<div id="accordion"> <h3>Section 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>Section 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>Section 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>Section 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> But the accordion is not working and when I am looking designer part on my browser by pressing F12. I am getting this error : Uncaught TypeError: Object [object Object] has no method 'accordion' in orchard

Please tell me where I am missing. Thanks in advance

Prashant Saini
Oct 11, 2013 at 2:29 PM
Few things:

What theme are you using? Most if not all of my script files are in my theme's Document.cshtml file which overwrites the default file; might consider creating one

There are countless ways to do an accordion, but looking at code quickly try changing $("#accordion") to $(.'accordion') in jquery; make html read: <div class="accordion"> ??

Also, this is how I often use anything jquery related. Not sure if it's SOP but works for me:

1) Install Timbioz.RawHtmlWidget Module
2) Create a rawcode widget in default layer; place jquery in Raw Js Code field
3) Write html on particular page
Oct 12, 2013 at 1:30 AM
No, putting script tags in document.cshtml is a bad idea. Using Script.Include is the good practice here. That is not the problem.

The problem is that your inline script is inline, and likely executed (and failing) before jQuery and your plugin are included. You should do this instead:
@using(Script.Foot()) {
    <script type="text/javascript">
        $(function () { $("#accordion").accordion({ collapsible: true }); });
I do agree however that it's better to work with classes rather than ids.
Oct 14, 2013 at 5:31 AM
Thank you so much for you replies. It resolved my problem.
Oct 14, 2013 at 3:44 PM
Edited Oct 14, 2013 at 3:58 PM
BertrandLeRoy wrote:
No, putting script tags in document.cshtml is a bad idea. Using Script.Include is the good practice here. That is not the problem.
I think I may have misspoke:

My document.cshtml file has Script.Include, not "<script type="text/javascript">...</script>"

(Is this the correct way?)
Oct 15, 2013 at 7:04 AM
Hello everyone,

Now the problem is it was working fine on my local but when I publish it on azure server, the accordion is not working. This is how it looks :

<script scr="/Module/Orchard.jQuery/Scripts/jQuery-1.8.2.min.js" type="text/javascript"></script>
<script scr="/Core/Shapes/Scripts/base.js" type="text/javascript"></script>
<script scr="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script scr="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript"> $(function(){ $(#accordion").accordion({ collapsible:true, heightStyle: content, header: 'h3' }); }); </script> Note that its working on local but not on server. Please help me where I am lacking.

Thanks in advance
Prashant Saini