CODEWITHSUNDEEP
asp.netjquerydotnetnuke
Fayde
Fayde

Reputation: 193

problem making jQuery work with DotNetNuke

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.

Upvotes: 2

Views: 2301

Answers (2)

bdukes
bdukes

Reputation: 155935

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.

Upvotes: 1

Mitchel Sellers
Mitchel Sellers

Reputation: 63126

There are a few things to make sure of.

  1. Due to friendly URL's I'd recommend using a different pathing process to ensure that your .js files can be found
  2. If you need to reference jQuery I would use

DotNetNuke.Framework.jQuery.RequestRegistration()

to have it add the jQuery scripts

Upvotes: 1

Related Questions