problem making jQuery work with DotNetNuke

Question

I am getting started with DotNetNuke and when I try to use jQuery the same way I use it in any standard ASP.NET page it does not work. For example I am trying to use uploadify which uses jQuery and flash. I can't even get the cancel button to show in the control.

Also any information on how to call the example script from inside DotNetNuke will be appreciated. By now I understand there must be a workaround and it is different than simple asp.net

Here is the ascx code:

  <%@ Control Language="C#"
 AutoEventWireup="true"
 CodeBehind="TestUploadView.ascx.cs"
 Inherits="TestUpload.TestUploadView"
 %>

 <title>Uploadify Example for
 .NET</title>

 <script
 src="uploadify/jquery-1.4.2.min.js"
 type="text/javascript"></script>
 <script src="uploadify/swfobject.js"
 type="text/javascript"></script>
 <script
 src="uploadify/jquery.uploadify.v2.1.4.min.js"
 type="text/javascript"></script> <link
 href="uploadify/uploadify.css"
 rel="stylesheet" type="text/css" />


  <asp:FileUpload ID="FileUpload1"
 runat="server" />  
     <br />
     <a href="#" id="startUploadLink">Start Upload</a>
     <a href="#" id="clearQueueLink">Clear</a> 


                 <script type = "text/javascript">

                     $(document).ready(function () {
                         $("#<%=FileUpload1.ClientID%>").uploadify({
                             'uploader': 'scripts/uploadify.swf',
                             'script': 'Upload.ashx',
                             'cancelImg': 'images/cancel.png',
                             'folder': '/uploads',
                             'multi': true
                         });

                         $("#startUploadLink").click(function () {
                             $('#<%=FileUpload1.ClientID%>').uploadifyUpload();
                             return false;
                         });

                         $("#clearQueueLink").click(function () {
                             $("#<%=FileUpload1.ClientID%>").uploadifyClearQueue();
                             return false;
                         });

                     });

 </script>

Here is the code behind for the handler:

 <%@ WebHandler Language="C#" Class="Upload" %>

    using System;
    using System.Reflection;
    using System.Web;
    using System.IO;

    public class Upload : IHttpHandler {

        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "text/plain";
            context.Response.Expires = -1;


            try
            {
                HttpPostedFile postedFile = context.Request.Files["Filedata"];

                string savepath = "";
                string tempPath = "";


                // retrieve the application path
                string appPath = HttpContext.Current.Request.ApplicationPath;

                // the content request comes from the jquery on the client.
       //tempPath = context.Request["folder"];

                tempPath = appPath + context.Request["folder"];

                savepath = context.Server.MapPath(tempPath);

                string filename = postedFile.FileName;
                if (!Directory.Exists(savepath))
                    Directory.CreateDirectory(savepath);

                postedFile.SaveAs(savepath + @"\" + filename);
                context.Response.Write(tempPath + "/" + filename);
                context.Response.StatusCode = 200;
            }
            catch (Exception ex)
            {
                context.Response.Write("Error: " + ex.Message);
            }
        }

        public bool IsReusable {
            get {
                return false;
            }
        }

}

Using ordinary ASP.NET the script on the page works well with the handler but i haven't figured out how to make it work with DotNetNuke, also there is little information online about making jQuery work with DotNetNuke.

Answer 1

To start with (as @Mitchel mentioned), use DotNetNuke.Framework.jQuery.RequestRegistration() to get jQuery on the page (assuming you're on DNN 5.x).

From there, you'll need to make sure that your scripts and other references are working. Since you're writing ascx controls, you can't generally use static paths, since the path will change depending on which DNN page the module is on.

So, instead, try using ResolveUrl. For example:

<script src='<%=ResolveUrl("uploadify/swfobject.js") %>' type="text/javascript"></script>

and

$("#<%=FileUpload1.ClientID%>").uploadify({
     'uploader': '<%= ResolveUrl("scripts/uploadify.swf") %>',
     'script': '<%= ResolveUrl("Upload.ashx") %>',
     'cancelImg': '<%= ResolveUrl("images/cancel.png") %>',
     'folder': '/uploads',
     'multi': true
});

assuming that the paths to all of those resources are relative to the ascx control.