DotNetNuke jQuery Tabs Not Working

Question

The JQuery tabs and panels do not work in DNN version 08.00.03. It works only when a user is logged in. Once the user logs out, all the panels ans tabs stop working.

I have the code below in HTML module:

<div class="dnnForm" id="panels-demo">
        <div class="dnnFormExpandContent"><a href="">Expand All</a></div>
        <h2 id="ChristopherColumbus" class="dnnFormSectionHead"><a href="#">Christopher Columbus</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/498px-Christopher_Columbus.PNG") %>" alt="Christopher Columbus" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Christopher Columbus</h1>
                <p>Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.</p>
            </div>
        </fieldset>
        <h2 id="IsaacNewton" class="dnnFormSectionHead"><a href="#">Isaac Newton</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/GodfreyKneller-IsaacNewton-1689.jpg") %>" alt="Isaac Newton" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Isaac Newton</h1>
                <p>English physicist, mathematician, astronomer, natural philosopher, alchemist, and theologian. His law of universal gravitation and three laws of motion laid the groundwork for classical mechanics.</p>
            </div>
        </fieldset>
        <h2 id="JohannesGutenberg" class="dnnFormSectionHead"><a href="#">Johannes Gutenberg</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/Gutenberg.jpg") %>" alt="Johannes Gutenberg" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Johannes Gutenberg</h1>
                <p>German printer who invented the mechanical printing press.</p>
            </div>
        </fieldset>
    </div>

The following code is placed in the module header:

<script type="text/javascript">
    jQuery(function ($) {
        var setupModule = function () {
            $('#panels-demo').dnnPanels();
            $('#panels-demo .dnnFormExpandContent a').dnnExpandAll({
                targetArea: '#panels-demo'
            });
        };
        setupModule();
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
            // note that this will fire when _any_ UpdatePanel is triggered,
            // which may or may not cause an issue
            setupModule();
        });
    });
</script>

Some Stackoverflow questions and other forms mentioned adding this line of code:

jQuery.RequestDnnPluginsRegistration();

Not sure how and where to add it, and whether it will resolve the issue. The code above is taken from this website: http://uxguide.dotnetnuke.com/UIPatterns/Panels.html

What does "stop working" mean? What errors do you see in the javascript console and network tab? — Jason P, Aug 12 '16 at 20:54
It means that the panels are always expanded. If you click on them they should collapse or expand. I am getting this error in the Console: Object doesn't support property or method 'dnnPanels' — user2536008, Aug 12 '16 at 20:59
I would guess that the script that contains the definition of `dnnPanels` isn't loading properly (check your network tab for errors). And since you mention that being logged in makes a difference, I'm guessing that the script requires authorization to access. — Jason P, Aug 12 '16 at 21:01
Try putting that RequestDnnPluginsRegistration above the other snippet you posted. — Jason P, Aug 12 '16 at 21:11

score 1 · Answer 1 · answered Aug 13 '16 at 00:29

1

Perhaps for some reason your resources are loading out of order. What happens if you wrap your JavaScript in a $(document).ready({

answered Aug 13 '16 at 00:29

Andy

102
1
4

VDWWD · Accepted Answer · 2016-08-13T11:00:23.827

Your code will not work as it is now, the example you used should be on a .aspx or .ascx code page from a custom module or a skins/container file. The code <%=ResolveUrl("Images/GodfreyKneller-IsaacNewton-1689.jpg") %> cannot be used inside a HTML module. It is server side code.

If you look at this http://www.dnnsoftware.com/wiki/reusable-dotnetnuke-jquery-plugins you need DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration(); and ClientAPI.RegisterClientReference(this.Page, ClientAPI.ClientNamespaceReferences.dnn); in code behind for the tabs to work.

These are probably used somewhere when a user is logged in so that's my the tabs function correctly. And if you build your own modules you can add those lines in their code.

However after some testing I found that you can add these lines to the HTML and it will work.

<script src="/Resources/Shared/Scripts/dnn.jquery.js?cdv=41" type="text/javascript"></script>   
<script src="/js/dnn.js?cdv=41" type="text/javascript"></script>

DotNetNuke jQuery Tabs Not Working

2 Answers2