Forums

Hi all,

I have the Engage: Tell A Friend module installed on a page that also has the NavSharp module installed on it.  As long as I don't have a style selected in NavSharp (which doesn't then show any menu entries since it is the style that transforms the xml and then styles it) the modal popup function of the TAF module works.

As soon as I select a style in NavSharp, the modal popup no longer works.  I know that both modules utilize jQuery for functionality. When I view the Error Console in Firefox (the browser I normally use) I receive the following error:

Error: $(this).closest is not a function
Source File: /WebResource.axd?d=WVlXdh6q4oijJkWLqRekKaylkFyfXltUvFAW0iDCbTP8EuMn5ycRU9Zx2DiCSEcfsNT6FHveNo8pFR5pFkVcI3SH13cUGVpG0&t=634036648670891250
Line: 64

I know that .closest() is a jQuery method and it should be present.  We are using DNN 5.1.4 on the site and I have it configured to use the hosted version of jQuery so it is using jQuery 1.4.2.  I have tried modifying the javascript in the NavSharp style so that it doesn't use $ as the default object hoping that would fix the issue - but it doesn't.  I include the modified javascript from the NavSharp style (I replaced every instance of $ by itself with $j):

var $j = jQuery.noConflict();
(function($j) {
    $j(function() {
        $j("ul.tree-vista").each(function() {
            var tree = $j(this);

            tree.children("li:first")
           .children("table")
           .find("div.max-min")
           .addClass("top-first-max")
           .click(function() {
               $j(this).toggleClass("top-first-max")
                       .toggleClass("top-first-min");
           });

            tree.parent()
            .find("ul")
            .each(function() {
                var $sub = $j(this);
                $sub.children("li:last")
                    .children("div.sub")
                    .addClass("no-i")
                    .end()
                    .children("table")
                    .find("div.left-space")
                    .addClass("last-space")
                    .end()
                    .find("div.max-min")
                    .addClass("last-max")
                    .click(function() {
                        $j(this).toggleClass("last-max");
                    });
            });

            //            tree.find("li")
            //           .each(function() {
            //               var li = $j(this);
            //               var sub = li.children("div.sub");
            //               var action = li.children("table").find("div.max-min");
            //               var folder = li.children("table").find("div.folder");
            //               action.click(function() {
            //                   action.toggleClass("min");
            //                   folder.toggleClass("open");

            //                   sub.slideToggle();

            //               });
            //               //li.find("a").each(function(){
            //               //if((this.pathname.indexOf("/")==0?this.pathname:"/" + this.pathname).replace("default.aspx","")==location.pathname.replace("default.aspx","")){
            //               //    action.trigger('click');
            //               //    $j(this).addClass("current");
            //               //}  
            //               //});

            //           });

            //lijoin add for hit
            tree.find("li").each(function() {
                var li = $j(this);
                $j(this).find(">table div.max-min .hit").click(function() {
                    $j(this).toggleClass("hit-active");
                    $j(">div.sub",li).slideToggle();
                });
            });


        });

    });
})(jQuery);

I'm not sure if this is the correct way of doing this.  With this change made the modal popup still doesn't work.  Can you suggest something that will allow the TAF module to co-exist with the NavSharp module as we really like the TAF module and want to use it on the site.

Thanks.
Raymond Weiler
Technical Support
Commerce Technology International

Hi Brian,

Yes, I made sure that I downloaded and installed the latest version of the module when I saw the new version mentioned in the DotNetNuke New Modules weekly email.  I added the .noConflict() call to the NavSharp code because it wasn't working hoping that would solve the problem.

So, to give you my troubleshooting steps so far here's what I've done:

• When I was told about the modal popup of the module not working, I created a new test page on the site (http://www.northridgechurch.com/discover_us/test/tell_a_friend_test.aspx)
• I installed an instance of Tell-A-Friend 1.1 on the page and configured the module to use the modal popup
• I clicked on the Tell A Friend link and the popup came up. At this point the NavSharp menu on the left hand side of the page wasn't present.
• I told my boss that the module was working. He said he tried creating a new page as well but it didn't work for him, but his page had the side menu on it where mine didn't.
• I installed an instance of the NavSharp module and applied the appropriate container to it. I then tested the Tell A Friend module and it still worked.
• I configured the NavSharp module to use the SideLinks style (found at the host level) so that the module would display the menu items the way the module does in most of the site. When I tried testing the Tell A Friend module again, it wouldn't work.
• I went back into the NavSharp module settings and selected Portal as the source for styles and Updated (effectively configures the module to use no style). Tried the Tell A Friend module again and it works.  Because the javascript error that I was getting in Firefox was saying that a jQuery method (.closest()) wasn't found, I concluded that the use of jQuery in the SideLinks style for NavSharp was interfering with the jQuery javascript used by Tell A Friend. In the past when I use the .noConflict() method that helped in clearing up the issue (but that was before DNN had built in support for jQuery).  I had thought as you mentioned in your reply that I shouldn't need to do that anymore once DNN supported jQuery but tried it anyway.

I have sent a separate email to support@engagemodules.com with a username/password that has been given administrative permissions so that you can take a look at the page to see what's going on.  The site is currently using DNN 5.1.4.

Any help you can provide in getting these two modules to co-exist would be greatly appreciated.

Raymond Weiler
Technical Support
CommerceTI.com