Issue 78 - How to Implement jQuery UI Tabs in a DotNetNuke HTML Module
Last Post 11/28/2012 8:16 AM by Joseph Craig. 37 Replies.
Author Messages
Pingle2009
Nuke Master
Nuke Master
Posts:186


--
08/05/2012 3:16 PM
    Hi Andy,

    Many thanks for issue 78, this is just the sort of thing I am interested in and you explained it so that even I can understand it!

    Will you be issuing another video on how to implement the panels feature?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/05/2012 7:34 PM
    I'm not sure what Andy's plans are, but ... given that you've seen this one, you have a giant start on using other jQuery and jQuery UI things. Basically, you set up a div structure to handle the content, and then make a jQuery function call to activate it.

    The really good news is that jQuery and jQuery UI are documented in exceptional fashion. So, use those pages to see how the div structure needs to be constructed, the function that should be called, and any options to control it.

    Just as an example, I use jQuery Cycle and Tabs functions on this page: http://ainq.com/Company/OurConsultants.aspx

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/06/2012 2:46 AM
    Thanks for that, Joe.

    My problem is that I'm not a programmer or coder. I can handle things given to me 'on a plate', whereby the code is supplied with instructions where to add it, but I'm pretty hopeless at working things out for myself.

    I will search for some documentation and see how it goes. That said, I think it would be a shame if Andy didn't build on what he's started, especially as he mentioned the panels feature in this video.
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/06/2012 4:48 AM
    OK, just seen a problem that I didn't spot when testing yesterday. Logged in (as host), everything works OK. Logged out, it looks as though the JS code isn't being initialised and all the content is on one page and the tabs don't function. Thoughts?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/06/2012 1:05 PM
    Look at the page source to see what's really there.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/06/2012 2:39 PM
    Hi Joe,

    Not really sure what I'm looking for (or not looking for) but I can see the HTML module in the page source with all the HTML code etc with all the text in the relevant div id tags plus the JS code at the end.

    Thanks.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/07/2012 12:41 PM
    Is there a way for me to see the page?

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/07/2012 1:17 PM
    Hi Joe,

    Not where I had it originally but I've recreated it on another install here http://www.1066-ice-skating-club.or...age02.aspx

    In the process of doing that I originally used the Dark Knight skin and it worked in that, so it's something to do with other skin.

    Could you take a look please, Joe, do I need to remove the code right at the end of the page?

    Thanks again.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/07/2012 3:17 PM
    I took a quick look. Will be able to look in more detail later.

    But ... jQueryUI is not loaded (try looking at the site in IE, hit f12 and start script debugging)

    Which version of DotNetNuke are you using here? Possible it's one that doesn't include jQueryUI? If so, you'll have to load it yourself.


    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/08/2012 2:36 AM
    I keep all my installs up to date and they are currently all running DNN 6.2.2.

    This does work if I use the Dark Knight skin, which seems to suggest it's my skin, which is one that was designed for, and originally installed on, DNN 5. I know it's old fashioned and table-based but I like it and, until now, it has survived the upgrades.

    I notice there is some code at the end of the page source which perhaps needs removing?

    Or should I just invest in a new skin?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/08/2012 10:39 AM
    What are your settings under Host, Host Settings, Advanced Settings, jQuery Settings?

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/08/2012 10:42 AM
    Your page is loading jQuery, but is not loading jQueryUI.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/08/2012 1:06 PM
    Host jQuery settings:

    Installed jQuery Version: 1.7.2
    Installed jQuery UI Version: 1.8.16
    Use jQuery Debug Version?: Unticked
    User Hosted jQuery Version?: Unticked
    Hosted jQuery URL: http://ajax.googleapis.com/ajax/lib...ery.min.js
    Hosted jQuery UI URL: http://ajax.googleapis.com/ajax/lib...-ui.min.js
    karim kurji
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    08/08/2012 7:15 PM
    I used the sample code in the jquery video posted recently and ran into the following problem. The page i created has 4 HTML modules and I cut and pasted the sample jquery code into each module as described in the video.

    The tabs worked in the first module but anything there after does not render as expected.

    Any thoughts?

    Thanks
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/09/2012 8:42 AM
    You can add a tag ahead of the jquery script to force loading the jqueryui file. Something like this:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>  

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/09/2012 9:42 AM
    Thanks, Joe, but that didn't work. I'm confused as to why it works in Dark Knight (as per Andy's video) but not my skin.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/09/2012 1:52 PM
    You probably want to take that line out.

    Also, looking at the page components, it looks like you may have the wrong versions of jQuery and jQueryUI ... 1.72 vs 1.8.13 or some such.

    You can see my version of the tutorial at http://jncraig.com/test/DNNCTabs.aspx. It's not using the Dark Knight skin, and I did nothing special ... just followed the tutorial.

    Again, your page doesn't load jQueryUI like mine does. My site is DotNetNuke 6.1.5 and with these jQuery settings:


    jQuery Settings


    Installed jQuery Version: 1.6.4
    Installed jQuery UI Version 1.8.16
    Use jQuery Debug Version? No
    Use Hosted jQuery Version? Yes
    Hosted jQuery URL: http://ajax.googleapis.com/ajax/lib...ery.min.js
    Hosted jQuery UI URL: http://ajax.googleapis.com/ajax/lib...-ui.min.js

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/10/2012 2:34 AM
    Hmmm ... you're running:

    Installed jQuery Version: 1.6.4
    Installed jQuery UI Version 1.8.16

    I'm running:

    Installed jQuery Version: 1.7.2
    Installed jQuery UI Version: 1.8.16

    I would probably be running jQuery 1.7.2 as I am on a later version of DNN. No?

    I've tried ticking Use Hosted jQuery Version but no difference.

    I will take a look at your site.

    Thanks, again, Joe.
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/13/2012 2:18 AM
    Starting to see some posts on dotnetnuke.com about jQuery UI 1.8.16 being broken, so I'm not alone! Strange how it works in Dark Knight though. Thanks, Joe.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/13/2012 7:06 AM
    True. but tjat started just in the last couple of days.

    If you uncheck the "hosted jquery" box in Host Settings, that should make the problem go away. Or you can leave hosted checked and have it usr http://ajax.googleapis.com/ajax/lib...ry.min.js.


    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/13/2012 10:25 AM
    Both the boxes on all three of my DNN installs are unchecked by default and that's the way I usually leave them, I've just been ticking them to test. The problem with my old skin persists, no problem in Dark Knight. I'm going to try it in another skin and see what happens.
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/13/2012 10:44 AM
    OK, I have now tested four different skins (including Minimal Extropy) on two different installs, all the same result, work when logged in as Host but not when logged out. What is so special about Dark Knight that it works?

    Edit: Just seen the bit in your post about changing the link, will try that. Nope, that didn't work either.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/13/2012 12:48 PM
    I'm not sure what is causing the problem, but the problem is that jqueryui is not being loaded. You can see this from the error message you'll see if you try debugging the script.

    In IE, hit F12 then start script debugging.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/13/2012 3:04 PM
    Oh, well, if you can't figure it out, Joe, I certainly won't be able to. I did ask on the dotnetnuke.com forums but no joy there either yet. This is the bit about DotNetNuke that I don't like, not being able to easily pinpoint problems. All I can think of is that I have three DNN installations, all running DNN 6.2.2, that have this problem. It all points to DNN 6.2.2 being the problem ... except that Dark Knight works. Thankfully, this is just my own little project (at the moment), so I can wait for a resolution. Thanks for all your help, Joe.
    Roy Clark
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    08/13/2012 9:02 PM
    I'm having exactly the same problem. It works fine in my custom skin as long as I'm logged in as HOST. When I log out, it doesn't load the JQuery UI, and it doesn't work at all. I tried all your ideas Joe, but no luck yet... any ideas?
    Pingle2009
    Nuke Master
    Nuke Master
    Posts:186


    --
    08/14/2012 1:42 AM
    For those following this issue, Chris Hammond @ DotNetNuke Corp as just published a blog explaining the issue of using hosted jQuery. I now (fully) understand the recent problems. It doesn't help to resolve my own problem but at least I can use Chris's blog as a springboard for another forum post. http://www.dotnetnuke.com/Resources...Query.aspx
    PattyB
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    08/18/2012 2:56 PM
    Hi Joe,
    I have been a Dnncreative member for several years, this module intrigued me, my site help page was overloaded and this tabs feature was the ticket for page space. But I have the same issue.
    Would be nice if you could resolve this issue for us non-developers out there. This was a feature article in you last issue, and would be a shame, if we could not get it to work. I also have the latest DNN install, and have a new mobile friendly skin. Could you please get with whomever and resolve this. The tutorial works perfect when I log in but log out and it craps out. I do not know how many members out there wish to use this, but try and quess how many of us have skins different than Dark Knight. Just like your last greatest article about the skinning the notification feature, other skins did not support it. Luckily my skin provider provided a notification superior to your example. So that is now two Headline articles in a row that gave examples that did not work without the Dark Knight skin. If you are going to start providing us with UI feature examples to use in our sites, it would be benificial to work in any skin. If it is a JQuery problem, then notation in the article to help resolve the issue is paramount to success to your subscribers.
    Very Respectfully
    Pat Byrnes
    Admin 8years Subcriber 6 years
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/21/2012 2:48 PM
    Pat,

    I'm quite happy to help you work this out.

    I've tested the tutorial on my site, and it works just fine and it works just fine without the Dark Knight skin and without being logged in. You can see mine at http://jncraig.com/test/DNNCTabs/ta...ault.aspx.

    The first thing needed to fix a problem is to be able to see it or reproduce it. I haven't been able to do either. So ... is your site accessible via the net? If so, can I look at it. It would also help to have superuser access. If you can do that, you can contact me using the contact form at patapscorg.com.


    Joe Craig, Patapsco Research Group
    Complete DNN Support
    peter
    Nuke Active Member
    Nuke Active Member
    Posts:24


    --
    11/16/2012 3:14 PM
    Hi, was this ever resolved?
    I have the same issue and would really like to find a solution.
    I have created a sitel and upgraded to 6.02.05
    If you are able to assist in the resolution I can send details of the public facing site along with superuser access
    Thanks
    Peter
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/16/2012 3:23 PM
    Peter,

    It would help if I could look at your site. If you could provide a URL and a more detailed description of what doesn't work, that would be helpful.

    My conclusion from testing is that the material in the tutorial is correct. However, there are a lot of things that can go wrong when you try to implement it on your site.

    One way to approach this is by trying to debug using developer tools in your browser. This depends on your knowing how to do that.

    Please contact me using the contact form at http://patapscorg.com and I'll take a look. Or, just point me at the site for starters.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    peter
    Nuke Active Member
    Nuke Active Member
    Posts:24


    --
    11/20/2012 1:20 PM
    Hi Joseph,
    I have sent the details through via the contact form at http://patapscorg.com the site I've set up where you can see the problem is http://xiqt.net/Tabstest.aspx#tab1 I'm using the Greytness skin for the new page.

    peter
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/21/2012 5:39 AM
    Have you noticed that the tabs work when your are logged in, but they don't work when you are not logged it?

    My apologies to others who asked questions here and I didn't figure it out.

    But: logged in and it works, logged out and it doesn't work. In some other comments ... works with the Dark Knight skin but not others. Here, doesn't work with the Greytness skin.

    The problem is that the skin you are using doesn't load the jQuery libraries. When you login, the control panel loads them.

    So what to do:

    1. Take a look at an ascx file from the Dark Knight series and look at the .js files that are included there. If you duplicate that in your skin it should work.
    2. Look at Bruce Chapman's blog about a skin object that helps include files: http://www.ifinity.com.au/2012/01/0...Nuke_Skins
    3. If you are going to use the Greytness skin, check with Adam Humphrey and see if they have an upgrade that includes the right js file.

    My apologies for not working this out for you ... but it's a short week with lots to do!

    Summary: You need to load the correct javascript so that the initialization shown in the tutorial actually works.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    peter
    Nuke Active Member
    Nuke Active Member
    Posts:24


    --
    11/21/2012 5:53 AM
    Hi Joseph,
    Thanks for taking the time to investigate, identify the problems and suggest solutions.
    Peter
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/21/2012 9:57 AM
    Just use a Dark Knight skin on your page and you'll see that it works.


    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Roderick Morales
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    11/26/2012 10:24 PM
    I have a quick quesiton sort of related to this. I'm trying to use the accordion functionality to a new module that I'm trying to develop... here is my code

       <script type="text/javascript">
        jQuery(function ($) {
            $("#accordion").accordion();
        });
        </script>
    
    <div class="dnnForm dnnEditHtml dnnClear" id="dnnEditHtml">
    	<div class="ehCurrentContent dnnClear" id="ehCurrentContent">
    		<div class="ehccContent dnnModuleSettings dnnClear" id="accordion">
    			
                <h2 id="dnnPanel-addGame" class="dnnFormSectionHead">
                    <a href="">this is my insert view</a>
                </h2>
                <fieldset>            
                    <div class="dnnFormItem">
                       ... FORM ITEM..
                    </div>
    
                    <ul class="dnnActions dnnClear">
                        <li><asp:LinkButton id="cmdSave" runat="server" class="dnnPrimaryAction" resourcekey="cmdSave" onclick="cmdSave_Click" /></li>
                        <li><asp:HyperLink id="cmdCancel" runat="server" class="dnnSecondaryAction" resourcekey="cmdCancel" /></li>
                    </ul>
                    <asp:Label ID="lblErrMsg" runat="server" />
                </fieldset>
    
                <h2 id="dnnPanel-EditHtmlPreview" class="dnnFormSectionHead">
                    <a href="">Edit schedule</a>
                </h2>
                <fieldset>
    				test the edit ANOTHER ACCORION AREA
                </fieldset>
    		</div>
    	</div>
    </div>
     


    The markup I have sort of works, it does the accordion functionality but it doesn't have the same styles as the rest of the accordions in the other pluggins. I will like to keep it the same so it's consistent.

    Am I calling the right accordion()? I watched the tabs tutorial and the dnnTabs() is used, I tried dnnAccordion() in hopes that would fix it but that wasn't it.

    Thank you for your time!
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/27/2012 6:54 AM
    There is no dnnAccordian plugin. The jQuery plugins that have been adapted for DotNetNuke are listed at http://www.dotnetnuke.com/Resources...gins.aspx.

    So, you are using the right plugin -- the jQueryUI accordian plugin.

    I have not dug into this, so I'm kind of guessing that this point, but you're going to have to figure out how/where the styles for the accordian are coming from. If you dig into the code for dnnTabs that might give you a clue. You will probably need to add some custom styles ...

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Roderick Morales
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    11/27/2012 7:52 PM
    Hopefully this will help other people out:
    In order to get the "dnnPanels" animation to work I had to first register the plugings to my module on my page_load:
    DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration(); 


    After that I was able to follow alone with the instructions given on the post above from Joseph Craig.

    I hope that helps other people.
    Best,
    -r
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/28/2012 8:16 AM
    Yes. One simple line of code and you've got what you need. That's an advantage of doing things like this at the code level.

    Joe Craig, Patapsco Research Group
    Complete DNN Support


    ---