How to avoid jquery conflict in dnn

Question

I am working on dnn modules development. Jquery is calling many times as the number of modules increases on the same page.

    (function ($) {  
        $('#grid').hoverfold();
    })(jQuery); 

This is what I used to avoid conflict. If I use the same for the next effect it is not working.

Answer 1

For example, If you look at /DesktopModules/Admin/HostSettings/HostSettings.ascx you will notice that dnn core developers are using following code:

(function ($, Sys) {
 $(document).ready(function () { 
    //Your code goes here.
 });
}(jQuery, window.Sys));

Apart from this, if you notice the $(document).ready function, they are repeating the same code to handle ajax post backs due to update pane. That will ensure your code will work ok even if module is having ajax enabled.

 $(document).ready(function () {
        setUpDnnHostSettings();
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
            setUpDnnHostSettings();
        });
    });

You can also look at other ascx controls in core in admin folder. I hope this will help.

Answer 2

var $j = jQuery.noConflict();
$j(document).ready(function(){
    ...code goes here...
});

Try This,