Cannot get Uploadify to work in ASP.NET with Master Page

Question

The following code works in a standalone web forms page but not when I bring it into my website which has a master page. Using the Chrome developer tools I see that jQuery and jQuery.uploadify are loaded. The error that occurs when the page loads is:

Uncaught TypeError: $(...).uploadify is not a function

Error occurs on line:

$("#file_upload").uploadify({

Here is the code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/DefaultMaster.master" AutoEventWireup="true" CodeBehind="UploadUploadify.aspx.cs" Inherits="Impact.Thm.Web.Utilities.UploadUploadify" %>
<asp:Content ID="Content1" ContentPlaceHolderID="DefaultHeaderContent" runat="server">
    <link rel="Stylesheet" type="text/css" href="./App_Themes/Uploader/uploadify.css" />
    <script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.uploadify.min.js"></script>
    <title>Testing Uploadify</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="JavascriptContent" runat="server">
    <script type = "text/javascript">
        $(function () {
            $("#file_upload").uploadify({
                'auto': false,
                'swf': '/Scripts/uploadify.swf',
                'uploader': 'UploadifyStatus.ashx'
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="DefaultContent" runat="server">
        <div style="border: thin solid black">
            <p><input type="file" name="file_upload" id="file_upload" /></p>
        </div>
        <p><a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a></p>
</asp:Content>

How can I get rid of this error so that it sees the uploadify function?

Put your event handler on the page load, instead of on the link itself. — Tyler Roper, May 24 '17 at 21:52
@Santi I don't understand your suggestion. Can you elaborate? I see from [link] (https://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick) that I should call uploadify() from onclick instead of href. But that doesn't work either, nor does it get rid of the error. I've never used jQuery before. — Paul Davis, May 25 '17 at 19:28
@Santi, if you are suggesting this ` $(window).load( function () { $("#file_upload").uploadify({ 'auto': false, 'swf': '/Scripts/uploadify.swf', 'uploader': 'UploadifyStatus.ashx' }); }); ` I've tried adding the `$(window).load()` but still get the `Uncaught TypeError: $(...).uploadify is not a function` error. — Paul Davis, May 25 '17 at 19:41

score 0 · Answer 1 · answered May 25 '17 at 20:21

I'd suggest moving your click event to the page load event (with your other uploadify function), rather than on the link itself:

<asp:Content ID="Content2" ContentPlaceHolderID="JavascriptContent" runat="server">
    <script type="text/javascript">
        $(function() {
            $("#file_upload").uploadify({
                'auto': false,
                'swf': '/Scripts/uploadify.swf',
                'uploader': 'UploadifyStatus.ashx'
            });

            $("#upload-link").click(function() {
                $('#file_upload').uploadify('upload','*');
            });

        });
    </script>
</asp:Content>


<asp:Content ID="Content3" ContentPlaceHolderID="DefaultContent" runat="server">
    <div style="border: thin solid black">
        <p><input type="file" name="file_upload" id="file_upload" /></p>
    </div>
    <p>
        <a id="upload-link" href="#">Upload Files</a>
    </p>
</asp:Content>

Your suggest is cleaner but I still have the problem with the error. I found the problem with using the master page and will post the solution. — Paul Davis, May 26 '17 at 15:06

score 0 · Accepted Answer · answered May 26 '17 at 16:52

To get jQuery.uploadify to work when using a Master Page I had to add a reference to the javascript file. Added the following to the DefaultMaster.master

<asp:ScriptManager> ... 
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/jquery.uploadify.min.js" />

Now I don't get the error:

Uncaught TypeError: $(...).uploadify is not a function

Cannot get Uploadify to work in ASP.NET with Master Page

2 Answers2