hgs yükleme
My Cart (0)  |  My Orders  |  My Downloads  |  My Auction  |  My Account  |  Help

Login |Register        Search

Integrating jquery plugin in Dotnetnuke Module

                Print      Add To Favorite     Add To Watch List     Contact Author

Creator: host   8/27/2012 5:00:24 AM    Author: Sibabrata Dash   Source: http://www.mindfiresolutions.com/Integrating-jquery-plugin-in-Dotnetnuke-Module-1290.php   Views: 2224    0    0  
Module develop Jquery jquery plug-in

Minimum steps to follow while including a jquery plugin into your custom dotnetnuke module.

As DNN module is a user control and can be installed in any dnn website and used.
So whenever we are including jquery or any plugin into our custom module we should follow certain steps :

-> Version of jquery required for your module.
-> If multiple jquery file includes then $ method may conflict.
-> Include your jquery plugin and css file dynamically

For example if you required jquery version 1.4.2 in your module:

//Check jquery version installed in website
//Add jquery to  head of your page
//Also check jquery-conflict
<script type="text/javascript">

    // Check whether jquery 1.4.2 or greater is loaded
    var loadJQuery = (typeof (jQuery) == 'undefined' || jQuery().jquery < "1.4.2");

    // check jquery conflict
    var callNoConflict = (typeof ($) != 'undefined' && typeof (jQuery) == 'undefined')

    if (loadJQuery) {
        var filename= 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
        var fileref=document.createElement('script');
        fileref.setAttribute("src", filename);
    //Call no conflict method
    if (callNoConflict) {


Add jquery plugin and css dynamically to code behind:

        //Find for jquery and css using header control id
        //If not included then include to the page header
          protected void Page_Init(object sender, System.EventArgs e)
            //Include js file
            HtmlGenericControl scriptInclude = (HtmlGenericControl)Page.Header.FindControl(ID);
            if (scriptInclude == null)
                scriptInclude = new HtmlGenericControl("script");
                scriptInclude.Attributes["type"] = "text/javascript";
                scriptInclude.Attributes["src"] = this.TemplateSourceDirectory + "/JqueryPlugin/yourjqueryfile.js";
                scriptInclude.ID = ID;


            //Include css file
            HtmlGenericControl cssInclude = (HtmlGenericControl)Page.Header.FindControl(ID + "css");
            if (cssInclude == null)
                cssInclude = new HtmlGenericControl("link");
                cssInclude.Attributes["type"] = "text/css";
                cssInclude.Attributes["href"] = this.TemplateSourceDirectory + "/JqueryPlugin/yourjquerycssfile.css";
                cssInclude.Attributes["rel"] = "stylesheet";
                cssInclude.ID = ID + "css";


The this.TemplateSourceDirectory will return the path upto your Module folder then you need to append path for your jquery file and css like above.

Finally you can call your jquery function in your module viewcontrol.ascx page like below:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(function () {


Rating People: 14   Average Rating:     

     DnnModule.com is built to provide DNN quality modules and DNN skins, some of them are free, some not. We wish these stuffs (free or not ) can be useful to you.

     Besides that, we also provide a full range of professional services, ranging from web site build, seo, system management, administration, support, senior consultancy and security services. We act as if your development project or network was ours, with care and respect. We are not satisfied until it works the way you want it to, and we don't silently ignore found issues as somebody else's problem.