I've narrowed down the problem a bit more:
It seems that when the uploader is in the view plainly it will call all the javascript functions no problem. But when i put the uploader into a view that is added to another view using render action It won't call any of the javascript functions.
So my code that isn't working actually looks like this:
This is the view that is put into the other view using render action:
- <%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/ExtraPlain.Master" Inherits="System.Web.Mvc.ViewPage" %>
- <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
- <script type="text/javascript">
- var handlerurl = '<%=Url.Action("AjaxSubmit", "FileUpload") %>'
- </script>
- <script type="text/javascript">
- function CuteWebUI_AjaxUploader_OnPostback()
- {
-
-
- var uploader = document.getElementById("TheFileUploader");
- var guidlist = uploader.value;
- var otherinfo = document.getElementById("otherinfo").innerHTML;
-
-
- $.post(
- handlerurl,
- { guidlist: guidlist, otherinfo: otherinfo },
- function(data, status) {
- if (status != "success") {
- alert("http error " + status);
- setTimeout(function() { document.write(xh.responseText); }, 10);
- return;
- }
-
- var filelist = document.getElementById("filelist");
-
- var list = eval(data);
-
- for (var i = 0; i < list.length; i++)
- {
- var item = list[i];
- var msg;
- if (item.Error != null)
- {
- msg = "Error " + item.FileGuid + " - " + item.Error;
- }
- else
- {
- msg = "Processed : " + list[i].FileName;
- }
- var li = document.createElement("li");
- li.innerHTML = msg;
- filelist.appendChild(li);
-
- }
-
-
- }
- );
- uploader.reset();
-
- }
-
- </script>
-
- <button id="uploadbutton" onclick="return false;" name="uploadbutton">Select file(s) to upload</button>
- <%=ViewData("uploaderhtml") %>
- <ol id="filelist"></ol>
-
-
- </asp:Content>
and this is the view that is the main view:
- <%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
-
- <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
- EmailForm
- </asp:Content>
-
- <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
- <script type="text/javascript">
-
- </script>
- <h2>EmailForm</h2>
-
- <label for="TheFileUploader">Select Files to Upload:</label><% Html.RenderAction("EmailUpload", "FileUpload")%>
- <%Html.BeginForm()%>
- <br />
- <label for="ToField">To:</label><%=Html.TextBox("ToField")%>
- <br />
- <label for="Subject">Subject:</label><%=Html.TextBox("Subject")%>
- <br />
- <label for="Body">Body:</label><%=Html.TextArea("Body", "", 10, 50, "")%>
- <br />
- <input type="submit" name="SendMail" id="SendMail" value="Send Mail" />
- <%html.endform() %>
-
- </asp:Content>
and last but not least: this is the html that is actually rendered in the browser:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head><title>
-
- EmailForm
-
- </title><link href="../../Content/Site.css" rel="stylesheet" type="text/css" /><link href="../../Content/ui.timepickr.css" rel="stylesheet" type="text/css" /><link href="../../Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /><link href="../../Content/styles.css" rel="stylesheet" type="text/css" />
- <script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
- <script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
- <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
- <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
- <script src="/Scripts/xval.jquery.validate.js" type="text/javascript"></script>
- <script src="/Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
-
- <script src="/Scripts/jquery.meio.mask.min.js" type="text/javascript"></script>
- <script src="/Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>
-
- <script scr="~Scripts/jquery-1.3.2-vsdoc.js"></script>
- <script type="text/javascript">
- function HandleError(ajaxContext) {
- var response = ajaxContext.get_response();
- var statusCode = response.get_statusCode();
- alert("Sorry the request failed with status code:" + statusCode);
- }
-
- function OnItemDeleted(name) {
- document.getElementById("message").innerHTML = name + "was deleted";
- var deletedNode = document.getElementById("item_" + name);
- deletedNode.parentNode.removeChild(deletedNode);
-
- }
-
- function NumberValidator(num){
- var exp = new RegExp("[-+]?(?:\d\,?){0,}(?:\.\d*)?");
- if(num.match(exp)){
- return true;
- }
- else{
- return false;
- }
-
-
- }
-
- </script>
-
- <style type="text/css">
- label.error{
- background-color:Maroon;
- border: outset 4px pink;
- color:Black;
- }
-
-
- </style>
- </head>
-
- <body>
-
- <div class="page">
-
- <div id="header">
- <div id="title">
- <h1>My MVC Application</h1>
- <span><a href="#ctl00_ctl01_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/WebResource.axd?d=1wTXeqgqOaplM9A-7cl9Gw2&t=633699391382867883" style="border-width:0px;" /></a><a id="ctl00_ctl01_SkipLink"></a></span>
- </div>
-
- <div id="logindisplay">
-
-
- [ <a href="/Account.mvc/LogOn">Log On</a> ]
-
- </div>
-
- <div id="menucontainer">
-
-
- <ul id="menu">
- <li><a href="/Home.mvc">Home</a></li>
- <li><a href="/Home.mvc/About">About</a></li>
- </ul>
-
- </div>
- </div>
-
- <div id="main">
-
-
- <script type="text/javascript">
-
- </script>
- <h2>EmailForm</h2>
-
- <label for="TheFileUploader">Select Files to Upload:</label>
-
-
- <div>
-
- <script type="text/javascript">
- var handlerurl = '/FileUpload.mvc/AjaxSubmit'
- </script>
- <script type="text/javascript">
- function CuteWebUI_AjaxUploader_OnPostback()
- {
-
-
- var uploader = document.getElementById("TheFileUploader");
- var guidlist = uploader.value;
- var otherinfo = document.getElementById("otherinfo").innerHTML;
-
-
- $.post(
- handlerurl,
- { guidlist: guidlist, otherinfo: otherinfo },
- function(data, status) {
- if (status != "success") {
- alert("http error " + status);
- setTimeout(function() { document.write(xh.responseText); }, 10);
- return;
- }
-
- var filelist = document.getElementById("filelist");
-
- var list = eval(data);
-
- for (var i = 0; i < list.length; i++)
- {
- var item = list[i];
- var msg;
- if (item.Error != null)
- {
- msg = "Error " + item.FileGuid + " - " + item.Error;
- }
- else
- {
- msg = "Processed : " + list[i].FileName;
- }
- var li = document.createElement("li");
- li.innerHTML = msg;
- filelist.appendChild(li);
-
- }
-
-
- }
- );
- uploader.reset();
-
- }
-
- </script>
-
- <button id="uploadbutton" onclick="return false;" name="uploadbutton">Select file(s) to upload</button>
- <script type='text/javascript' src='/CuteWebUI_Uploader_Resource.axd?type=script&_ver='></script><input type='hidden' id='TheFileUploader' name='TheFileUploader' autocomplete='off' /><img id='TheFileUploader_Loader' UniqueID='TheFileUploader' Namespace='CuteWebUI' PageUpload='1' src='/CuteWebUI_Uploader_Resource.axd?type=file&file=continuous.gif' onload='this.style.display="none" ; CuteWebUI_AjaxUploader_Initialize(this.id);' onerror='this.onload()' ContextValue='!3wEWAQUVQzovVGVtcEZpbGVzRm9yRW1haWwvuuGz!1dtrc4Cq8W!1!3OQTciAKbwUQ!2' ShowProgressInfo="1" WindowsDialogLimitMsg="I don't know where this message is used" InserText="Upload a file" BorderStyle="border:1px solid #444444;" UploadUrl="/UploadHandler.ashx" MultipleFilesUpload="1" BarHeight="20" MaxFilesLimit="4" MaxFilesLimitMsg="that's enough files for you" InsertButtonID="uploadbutton" InfoStyle="padding-left:3px;font:normal 12px Tahoma;" FileTooLargeMsg="Are you crazy, that's to big!" CancelUploadMsg="Cancel Me NOW!!!" ResourceHandler="/CuteWebUI_Uploader_Resource.axd" UploadProcessingMsg="It's working away, be patient" UploadType="Auto" PanelWidth="360" ShowProgressBar="1" FileTypeNotSupportMsg="We don't accept those types of files around here" CancelAllMsg="Cancel them all i tell you, every one!" UploadingMsg="Uploading... Uploading...Uploading..." BarStyle="Continuous"/>
- <ol id="filelist"></ol>
-
-
-
- </div>
- <form action="/jqueryui/EmailForm/" method="post">
- <br />
- <label for="ToField">To:</label><input id="ToField" name="ToField" type="text" value="" />
-
- <br />
- <label for="Subject">Subject:</label><input id="Subject" name="Subject" type="text" value="" />
- <br />
- <label for="Body">Body:</label><textarea Length="0" cols="50" id="Body" name="Body" rows="10">
-
- <br>
- <input name="SendMail" id="SendMail" value="Send Mail" type="submit">
-
-
- <div id="footer">
- </div>
-
</div>
</div>
</body>
</html>
-
I hope this all makes sense to someone!