" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
|
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("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);
}
//Call no conflict method
if (callNoConflict) {
jQuery(function(){
jQuery.noConflict();
});
}
</script>
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;
Page.Header.Controls.Add(scriptInclude);
}
//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";
Page.Header.Controls.Add(cssInclude);
}
}
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 () {
}
});