Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeArchived Discus...Archived Discus...Developing Under Previous Versions of .NETDeveloping Under Previous Versions of .NETASP.Net 2.0ASP.Net 2.0how can I add jquery plugin ?how can I add jquery plugin ?
Previous
 
Next
New Post
4/4/2009 11:38 PM
 

 I try to add a jquery plugin named jCarouselLite http://www.gmarwaha.com/jquery/jcarousellite/index.php#demo to my dotnetnuke module

(DNN version 4.8) but it does not work and even the picture does not visible i want to know 2 things the first i want to ask if there is a asp ajax controle toolkit do the same work and the second if the jquery work with Dotnetnuke or no ? if yes please look at the folowing ascx code that i creted and please tell me the wrong .

 

<<<<<<<<<<<<<<<<<<<<<<<<the ascx pade>>>>>>>>>>>>>>>>>>>>>>>>

 

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Jquery.ascx.vb" Inherits="DesktopModules_Jquery_Jquery" %>

 

 

<!-- referencing the jquery librarie and the jcarousellite, jquery.easing plugins -->

<script src='<%= page.ResolveUrl("DesktopModules/Jquery/js/jquery-1.3.2.min.js") %>'></script>

<script src='<%= page.ResolveUrl("DesktopModules/Jquery/js/jcarousellite_1.0.min.js") %>'></script>

<script src='<%= page.ResolveUrl("DesktopModules/Jquery/js/jquery.easing.1.1.js") %>'></script>

 

 

<button id="Button1" type="button" value="button" class="prev" > >>> </button> 

<button id="Button2" type="button" value="button" class="next" > <<< </button> 

 

<div class="anyclass">

     <ul>

        <li><img src="Images/im1.jpg" alt="" width="100" height="100" ></li>

        <li><img src="Images/im2.jpg" alt="" width="100" height="100" ></li>

        <li><img src="Images/im3.jpg" alt="" width="100" height="100" ></li>

        <li><img src="Images/im4.jpg" alt="" width="100" height="100" ></li>

        <li><img src="Images/im5.jpg" alt="" width="100" height="100" ></li>

    </ul>

 

</div>

 

<script language="text/javascript">

 

$(function() {

    $(".anyClass").jCarouselLite({

        btnNext: ".next",

        btnPrev: ".prev"

    });

});

 

</script>

 

 

 
New Post
4/9/2009 2:04 PM
 

Jquery definitely works on DNN.  I use it in my module dev.  But the first thing i would suggest is using jquery in noconflict mode. 

I always run my jquey plugins in noconflict mode to make sure that any other js framework that might be using $ as a selector wont have any problems. 

Of course running in safe mode means you have to replace $ in the plugin file  with whatever selector you setup  for jquery. 

I usually inject jquery by finding the head html control and adding an html control to it. 

 
New Post
4/9/2009 2:35 PM
 

HI there - yes, you can use jQuery with DNN. Here is how I access it:

            'register in dnn 5 - use the method below for versions below DNN 5
            DotNetNuke.Framework.jQuery.RequestRegistration()

            'register the accordion script
            If Not DotNetNuke.UI.Utilities.ClientAPI.IsClientScriptBlockRegistered(Page, "ui.core.js") Then
                DotNetNuke.UI.Utilities.ClientAPI.RegisterClientScriptBlock(Page, "ui.core.js", "<script src=""" & Request.ApplicationPath & "/js/jQuery/ui.core.js"" type=""text/javascript""></script>")
            End If

If you are creating your script in your code behind then make sure you add it just like this:

  Dim sb As New StringBuilder
            sb.Append("<script type=""text/javascript"">")
            sb.Append("jQuery(document).ready(function(){")
            sb.Append("jQuery(""normal"").css(""color"",""red"").css(""font-size"", ""20px"");")
            sb.Append("});")
            sb.Append("</script>")

            'register the local jquery functions
            If Not DotNetNuke.UI.Utilities.ClientAPI.IsClientScriptBlockRegistered(Page, "TestStartupScript") Then
                DotNetNuke.UI.Utilities.ClientAPI.RegisterStartUpScript(Page, "TestStartupScript", sb.ToString)
            End If

TROUBLESHOOTING: 

  • view your page source and VERIFY that your paths to javascript are correct! For example, if my web is: http://localhost/dnn my javascript files should look like: "~/dnn/desktopmodules/testmodule/js/somescript.js"
  • make sure your scripts added from codebehind built from strings are
    • added as START UP Scripts
    • have begin/end <script> tags
    • include the $(document).ready function

TIP: Intead of adding your javascript to the code behind or design page, you can add all your jQuery code in a separate .js file, register it as shown above from the code behind. None of your javascript files have to start with <script> tags or the document ready function.

I hope that helps. But, long story short....YES. you can use jQuery with DNN.

 


Check out the open source DNN Testimonials project on CodePlex and help build it!
 
New Post
4/9/2009 3:03 PM
 

 thank you for intersting , i use dotnetnuke 4.8 and  I need some link or tutorial (please if you can do this for me , I really need it for my project in faculté) to help me how add jquery library to DNN 

 
New Post
4/9/2009 5:14 PM
 

HI najmeddine - use the exact same methods I used in my last post, but just point to the jquery file....

 'register jquery with you local downloaded copy
          If Not DotNetNuke.UI.Utilities.ClientAPI.IsClientScriptBlockRegistered(Page, "jquery.js") Then
                DotNetNuke.UI.Utilities.ClientAPI.RegisterClientScriptBlock(Page, "jquery.js", "<script src=""" & Request.ApplicationPath & "/js/jQuery.js"" type=""text/javascript""></script>")
            End If

 

OR

'register jquery using Google API hosted version

          If Not DotNetNuke.UI.Utilities.ClientAPI.IsClientScriptBlockRegistered(Page, "jquery.js") Then
                DotNetNuke.UI.Utilities.ClientAPI.RegisterClientScriptBlock(Page, "jquery.js", "<script src=""http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"" type=""text/javascript""></script>")
            End If

That's all you have to do to use jQuery. . . register the jQuery library and then write your jQuery code.

 

Hope that helps.


Check out the open source DNN Testimonials project on CodePlex and help build it!
 
Previous
 
Next
HomeHomeArchived Discus...Archived Discus...Developing Under Previous Versions of .NETDeveloping Under Previous Versions of .NETASP.Net 2.0ASP.Net 2.0how can I add jquery plugin ?how can I add jquery plugin ?


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out