Search code examples
javascriptjquery-uidotnetnukedotnetnuke-module

How to proper include JS libs (jqueryUI, jquery plugins) into DNN 5 module ?

I include jquery into my module with DotNetNuke.Framework.jQuery.RequestRegistration(); and it works like expected.

Other scripts I include into my DNN portal via Page Settings/Advanced Settings/Page Header Tags. They also get loaded, but they don't work as expected.

In my case I want to have tabs in one of my dnn modules and I'm using jqueryUI to do this. If I test this module outside of DNN it works like it should, but when installed into DNN something goes wrong. I get the tabs created but I can't switch betwen them. Actualy I see all of the content which should be in separated tabs in the same page.

alt text

This is my Js code from module.ascx file.

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $("#<%= pnlTabs.ClientID %>").tabs();
    });
</script>

how to correct this ? I think that problem is that all this different JS libs get mixed. So what is the correct way to include another JS libs into DNN module.

EDIT: I found the problem. Can you help fix it ?

<li><a href="DesktopModules/OsControl/#dnn_ctr380_osControl_pnlProcesses">Processes</a></li>

<div id="dnn_ctr380_OsControl_pnlProcesses" style="text-align:left;">

Problem is that DNN prepends "DesktopModules/OsControl/" to the link in "li" element. How to prevent this or any other way around this ?

EDIT2:

<asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="NotSet" DisplayMode="HyperLink">
    <asp:ListItem Value="#OsControl_pnlProcesses">Processes</asp:ListItem>
    <asp:ListItem Value="#OsControl_pnlServices">Services</asp:ListItem>
    <asp:ListItem Value="#OsControl_pnlEvents">Events</asp:ListItem>
</asp:BulletedList>

This is how I create links.

Solution

  • I would first suggest to go through this artilce

    The way you are adding jQuery and jQuery UI references may cause problems, please make sure jQuery.js is added before jQuery.ui.js.

    If you think almost all the page requires jQuery, you can move your jQuery registration code to skin as well.

    last thing is to add console logging to see the log messages in firebug console so that you can quickly track the script reference related problems