jquery

Using JQuery with DotNetNuke 4.x

Matt Simner ASP.NET, CMS, DotNetNuke, JQuery, Web , ,

I’m currently doing a project using DotNetNuke, and we’re using JQuery plugins to achieve certain content rotation and scroller functionality.  All was ‘amost’ good as I’d found a way to inject the JQuery script to the page header on a per-skin basis, but in ‘edit’ mode the actions button wasn’t showing up at the top of containers in FireFox and was causing JavaScript errors in IE.

I’d already gone through the hoops of declaring jQuery.noConflict(), but it still appeared to be conflicting with the dnn:actions (solpartactions) control.  I’d read somewhere else about Solpart code being incompatible with JQuery.

I tried one last thing, adding the noConflict() call in the JQuery library script file itself – rather than running as a fragment on page load.  This fixed everything, as something else was obviously getting in and hijacking in the meantime.  Apparently with V5 this will all be fixed as JQuery’s more integrated with the framework.  Anyway, for those interested here’s what I had to do to get JQuery (and associated plugins) talking nicely whilst still allowing the actions menu to pop up on my containers…

  1. Amend the JQuery library (jquery.1.x.x.min.js) by adding the following line at the bottom…

    jQuery.noConflict();

  2. Amend the skin you want to load the jquery library (and plugins) in (we’ve got it only in specific skins to avoid the overhead where it’s not required).  You could also do this in the module by checking ‘if loaded’, but here’s the code for a skin (in ascx file)…

    <script runat=”server”>
        Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
            ‘add a script reference for Javascript to the head section
            AddScript(“/js/jquery.scrollable-1.0.2.min.js”)
            AddScript(“/js/jquery.mousewheel.js”)
            AddScript(“/js/jquery-1.3.2.min.js”)
        End Sub
       
        Private Sub AddScript(ByVal fileName As String)
            Dim oLink As New HtmlGenericControl(“script”)
            oLink.Attributes(“language”) = “javascript”
            oLink.Attributes(“type”) = “text/javascript”
            oLink.Attributes(“src”) = fileName
            Dim oCSS As Control = Me.Page.FindControl(“CSS”)
            If Not oCSS Is Nothing Then
                oCSS.Controls.AddAt(0, oLink)
            End If
        End Sub
    </script>

    The order is important, as we’re adding the scripts to the ‘top’ of the scripts each time.  JQuery needs to be the first referenced.

  3. Make sure that anywhere you use jQuery you use the jQuery(xx) syntax, and not $(xx).

That’s it.

Make JQuery and Prototpye coexist and play together with a GreaseMonkey User Script

Matt Simner JQuery, Redbubble, Web , ,

I’ve been playing with Greasemonkey scripts recently – for Redbubble.com, and wanted to use JQuery with GreaseMonkey.  This is pretty well documented, but I discovered an incompatibility with my script and the host site, as it uses the Prototype Javascript library (must admit I didn’t know much about it).

Prototype (like JQuery) uses the $ notation, and so by default any GreaseMonkey User Script loaded will hijack the $ object, meaning that stuff on the original site may stop working.

I thought I was sunk but it turns out JQuery just gets better, and it can gracefully give back control of the $ to whichever library originally loaded it.  Just call..

jQuery.noConflict();

You then have to use jQuery instead of $ (e.g. jQuery(“#myID”) instead of $(“#myID”) ), but hey – that’s a small price to pay when the alternative is rewriting the whole thing long-hand.

More reasons to love JQuery

Matt Simner ASP.NET, Visual Studio, Web

I’ve only recently started using JQuery, but needless to say – it rocks!

for those that don’t know it’s a Javascript library that’s basically revolutionising how you write client-side code.  My reasons to love JQuery.

  1. It’s open source, well tested and an open design.  This means you write less code and you can rely on functionality just ‘working’ in different browsers – or gracefully failing if something’s not right.
  2. It’s really light (especially when ‘packed’ – 31kb)
  3. It’s got a strong community with lots of really cool plugins (just take a look before you start developing that ‘widget’ in flash)
  4. It plays well with other libraries and code.  you just use it for what you need and plugins sit with other plugins.
  5. It’s obviously gaining momentum, as Scott Hansleman announced Microsoft are going to ship it with ASP.NET MVC and Visual Studio (that’s a pretty amazing move from Microsoft).

If you’re just getting started with it, and you’re familiar with Javascript already I’d start with the tutorials.  Some are better than others, but run through the first couple to understand how it works, then scan down the list to find something related to what you need to do.  Typically you’ll be wanting to write a plugin, so I found this one quite good for starters.

You should find everything you need in the Documentation

you’ll then spend most of your time in the API section, looking for specifics on how to do things.