Support forums » Products » Ajax Uploader » Re: CuteWebUI_AjaxUploader_OnStart() Not being called!

CuteWebUI_AjaxUploader_OnStart() Not being called!

Last post 08-21-2009, 12:53 AM by cutechat. 4 replies.
Sort Posts: Previous Next

  •  08-18-2009, 10:14 AM 54764

    CuteWebUI_AjaxUploader_OnStart() Not being called!

    Reply Quote
    Hello,
     
    I'm working on using the uploader in an MVC application and one of the things we need to do is disable some things on the page while an upload is occuring.   I read other posts saying to use the  CuteWebUI_AjaxUploader_OnStart() function but it isn't being called!    the OnStop function is not being called either.     The On_Postback()  does get called.  
     
    Here's my View code:
     
    1. <%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/ExtraPlain.Master" Inherits="System.Web.Mvc.ViewPage" %>  
    2.   
    3.   
    4. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
    5. <script type="text/javascript">  
    6.     var handlerurl = '<%=Url.Action("AjaxSubmit", "FileUpload") %>'  
    7.     </script>  
    8.     <script type="text/javascript">  
    9.         function CuteWebUI_AjaxUploader_OnStart() {  
    10.             //this function would be called on each file start upload  
    11.             //maybe be called many times when upload multiple files.  
    12.             $('#SendMail').attr("disabled", "disabled");  
    13.             document.getElementById("SendMail").disabled = "disabled";  
    14.             alert("hello");  
    15.               
    16.               
    17.         }  
    18.         function CuteWebUI_AjaxUploader_OnStop() {  
    19.             //this function would be called if get error or user cancel it.  
    20.             $('#SendMail').removeAttr("disabled");  
    21.             alert("hello");  
    22.         }  
    23.          
    24.           
    25.   
    26.         function CuteWebUI_AjaxUploader_OnPostback()  
    27.         {  
    28.             //$('#SendMail').attr("disabled", "disabled");   
    29.              
    30.             var uploader = document.getElementById("TheFileUploader");  
    31.             var guidlist = uploader.value;  
    32.             var otherinfo = document.getElementById("otherinfo").innerHTML;  
    33.             //Send Request  
    34.   
    35.             $.post(  
    36.                 handlerurl,  
    37.                 { guidlist: guidlist, otherinfo: otherinfo },  
    38.                 function(data, status) {  
    39.                     if (status != "success") {  
    40.                         alert("http error " + status);  
    41.                         setTimeout(function() { document.write(xh.responseText); }, 10);  
    42.                         return;  
    43.                     }  
    44.                       
    45.                     var filelist = document.getElementById("filelist");  
    46.   
    47.                     var list = eval(data); //get JSON objects  
    48.                       
    49.                     for (var i = 0; i < list.length; i++)  
    50.                     {  
    51.                         var item = list[i];  
    52.                         var msg;  
    53.                         if (item.Error != null)  
    54.                         {  
    55.                             msg = "Error " + item.FileGuid + " - " + item.Error;  
    56.                         }  
    57.                         else  
    58.                         {  
    59.                             msg = "Processed : " + list[i].FileName;  
    60.                         }  
    61.                         var li = document.createElement("li");  
    62.                         li.innerHTML = msg;  
    63.                         filelist.appendChild(li);  
    64.                       
    65.                     }  
    66.   
    67.   
    68.                 }  
    69.              );  
    70.              uploader.reset();  
    71.              $('#SendMail').removeAttr("disabled");  
    72.         }  
    73.       
    74.     </script>  
    75.   
    76.     <button id="uploadbutton" onclick="return false;" name="uploadbutton">Select file(s) to upload</button>  
    77.     <%=ViewData("uploaderhtml") %>  
    78.     <ol id="filelist"></ol>  
    79.       
    80.     <div id="otherinfo" name="otherinfo" style="display:none;">Hello!</div>  
    81.     <input type="button" id="SendMail" name="SendMail" value="SendMail" />  
    82.       
    83. </asp:Content> 
     Any idea where i'm going wrong?
     
    Thanks!

     

  •  08-18-2009, 2:27 PM 54767 in reply to 54764

    Re: CuteWebUI_AjaxUploader_OnStart() Not being called!

    Reply Quote
    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:
     
    1. <%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/ExtraPlain.Master" Inherits="System.Web.Mvc.ViewPage" %>  
    2. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
    3. <script type="text/javascript">  
    4.     var handlerurl = '<%=Url.Action("AjaxSubmit", "FileUpload") %>'  
    5.     </script>  
    6.     <script type="text/javascript">  
    7.        function CuteWebUI_AjaxUploader_OnPostback()  
    8.         {  
    9.             //$('#SendMail').attr("disabled", "disabled");   
    10.              
    11.             var uploader = document.getElementById("TheFileUploader");  
    12.             var guidlist = uploader.value;  
    13.             var otherinfo = document.getElementById("otherinfo").innerHTML;  
    14.             //Send Request  
    15.   
    16.             $.post(  
    17.                 handlerurl,  
    18.                 { guidlist: guidlist, otherinfo: otherinfo },  
    19.                 function(data, status) {  
    20.                     if (status != "success") {  
    21.                         alert("http error " + status);  
    22.                         setTimeout(function() { document.write(xh.responseText); }, 10);  
    23.                         return;  
    24.                     }  
    25.                       
    26.                     var filelist = document.getElementById("filelist");  
    27.   
    28.                     var list = eval(data); //get JSON objects  
    29.                       
    30.                     for (var i = 0; i < list.length; i++)  
    31.                     {  
    32.                         var item = list[i];  
    33.                         var msg;  
    34.                         if (item.Error != null)  
    35.                         {  
    36.                             msg = "Error " + item.FileGuid + " - " + item.Error;  
    37.                         }  
    38.                         else  
    39.                         {  
    40.                             msg = "Processed : " + list[i].FileName;  
    41.                         }  
    42.                         var li = document.createElement("li");  
    43.                         li.innerHTML = msg;  
    44.                         filelist.appendChild(li);  
    45.                       
    46.                     }  
    47.   
    48.   
    49.                 }  
    50.              );  
    51.              uploader.reset();  
    52.                
    53.         }  
    54.       
    55.     </script>  
    56.   
    57.     <button id="uploadbutton" onclick="return false;" name="uploadbutton">Select file(s) to upload</button>  
    58.     <%=ViewData("uploaderhtml") %>  
    59.     <ol id="filelist"></ol>  
    60.   
    61.       
    62. </asp:Content> 

    and this is the view that is the main view:
    1. <%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>  
    2.   
    3. <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">  
    4.     EmailForm  
    5. </asp:Content>  
    6.   
    7. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
    8. <script type="text/javascript">  
    9.       
    10. </script>  
    11.     <h2>EmailForm</h2>  
    12.       
    13.     <label for="TheFileUploader">Select Files to Upload:</label><%  Html.RenderAction("EmailUpload", "FileUpload")%>  
    14.     <%Html.BeginForm()%>  
    15.     <br />  
    16.     <label for="ToField">To:</label><%=Html.TextBox("ToField")%>  
    17.     <br />  
    18.     <label for="Subject">Subject:</label><%=Html.TextBox("Subject")%>  
    19.     <br />  
    20.     <label for="Body">Body:</label><%=Html.TextArea("Body", "", 10, 50, "")%>  
    21.     <br />  
    22.     <input type="submit" name="SendMail" id="SendMail" value="Send Mail" />  
    23.     <%html.endform() %>  
    24.       
    25. </asp:Content> 
     and last but not least:  this is the html that is actually rendered in the browser:
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head><title>  
    4.       
    5.     EmailForm  
    6.   
    7. </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" />  
    8. <script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>  
    9. <script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>  
    10. <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>  
    11. <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>  
    12. <script src="/Scripts/xval.jquery.validate.js" type="text/javascript"></script>  
    13. <script src="/Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>  
    14.   
    15.   <script src="/Scripts/jquery.meio.mask.min.js" type="text/javascript"></script>  
    16.     <script src="/Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>  
    17.   
    18. <script scr="~Scripts/jquery-1.3.2-vsdoc.js"></script>  
    19. <script type="text/javascript">  
    20.     function HandleError(ajaxContext) {  
    21.         var response = ajaxContext.get_response();  
    22.         var statusCode = response.get_statusCode();  
    23.         alert("Sorry the request failed with status code:" + statusCode);  
    24.     }  
    25.   
    26.     function OnItemDeleted(name) {  
    27.         document.getElementById("message").innerHTML = name + "was deleted";  
    28.         var deletedNode = document.getElementById("item_" + name);  
    29.         deletedNode.parentNode.removeChild(deletedNode);  
    30.   
    31.     }  
    32.       
    33.     function NumberValidator(num){  
    34.         var exp = new RegExp("[-+]?(?:\d\,?){0,}(?:\.\d*)?");  
    35.         if(num.match(exp)){  
    36.             return true;  
    37.         }  
    38.         else{  
    39.             return false;  
    40.         }  
    41.           
    42.           
    43.     }  
    44.       
    45. </script>  
    46.   
    47. <style type="text/css">  
    48.     label.error{  
    49.         background-color:Maroon;  
    50.         border: outset 4px pink;  
    51.         color:Black;  
    52.     }  
    53.       
    54.     
    55.   </style>  
    56. </head>  
    57.   
    58. <body>  
    59.   
    60.     <div class="page">  
    61.   
    62.         <div id="header">  
    63.             <div id="title">  
    64.                 <h1>My MVC Application</h1>  
    65.                 <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>  
    66.             </div>  
    67.                 
    68.             <div id="logindisplay">  
    69.                   
    70.   
    71.         [ <a href="/Account.mvc/LogOn">Log On</a> ]  
    72.                       
    73.             </div>   
    74.               
    75.             <div id="menucontainer">  
    76.   
    77.               
    78.                 <ul id="menu">                
    79.                     <li><a href="/Home.mvc">Home</a></li>  
    80.                     <li><a href="/Home.mvc/About">About</a></li>  
    81.                 </ul>  
    82.               
    83.             </div>  
    84.         </div>  
    85.   
    86.         <div id="main">  
    87.               
    88.   
    89. <script type="text/javascript">  
    90.       
    91. </script>  
    92.     <h2>EmailForm</h2>  
    93.       
    94.     <label for="TheFileUploader">Select Files to Upload:</label>  
    95.   
    96.   
    97.     <div>  
    98.           
    99. <script type="text/javascript">  
    100.     var handlerurl = '/FileUpload.mvc/AjaxSubmit'  
    101.     </script>  
    102.     <script type="text/javascript">  
    103.        function CuteWebUI_AjaxUploader_OnPostback()  
    104.         {  
    105.             //$('#SendMail').attr("disabled", "disabled");   
    106.              
    107.             var uploader = document.getElementById("TheFileUploader");  
    108.             var guidlist = uploader.value;  
    109.             var otherinfo = document.getElementById("otherinfo").innerHTML;  
    110.             //Send Request  
    111.   
    112.             $.post(  
    113.                 handlerurl,  
    114.                 { guidlist: guidlist, otherinfo: otherinfo },  
    115.                 function(data, status) {  
    116.                     if (status != "success") {  
    117.                         alert("http error " + status);  
    118.                         setTimeout(function() { document.write(xh.responseText); }, 10);  
    119.                         return;  
    120.                     }  
    121.                       
    122.                     var filelist = document.getElementById("filelist");  
    123.   
    124.                     var list = eval(data); //get JSON objects  
    125.                       
    126.                     for (var i = 0; i < list.length; i++)  
    127.                     {  
    128.                         var item = list[i];  
    129.                         var msg;  
    130.                         if (item.Error != null)  
    131.                         {  
    132.                             msg = "Error " + item.FileGuid + " - " + item.Error;  
    133.                         }  
    134.                         else  
    135.                         {  
    136.                             msg = "Processed : " + list[i].FileName;  
    137.                         }  
    138.                         var li = document.createElement("li");  
    139.                         li.innerHTML = msg;  
    140.                         filelist.appendChild(li);  
    141.                       
    142.                     }  
    143.   
    144.   
    145.                 }  
    146.              );  
    147.              uploader.reset();  
    148.                
    149.         }  
    150.       
    151.     </script>  
    152.   
    153.     <button id="uploadbutton" onclick="return false;" name="uploadbutton">Select file(s) to upload</button>  
    154.     <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"/>  
    155.     <ol id="filelist"></ol>  
    156.   
    157.       
    158.   
    159.     </div>  
    160. <form action="/jqueryui/EmailForm/" method="post">  
    161.     <br />  
    162.     <label for="ToField">To:</label><input id="ToField" name="ToField" type="text" value="" />  
    163.   
    164.     <br />  
    165.     <label for="Subject">Subject:</label><input id="Subject" name="Subject" type="text" value="" />  
    166.     <br />  
    167.     <label for="Body">Body:</label><textarea Length="0" cols="50" id="Body" name="Body" rows="10">  
    168.   
    169.     <br>  
    170.     <input name="SendMail" id="SendMail" value="Send Mail" type="submit">  
    171.       
    172.   
    173.             <div id="footer">  
    174.             </div>  
    175.         
      </div>
          </div>
      </body>
      </html>
       
    176.      
     
    I hope this all makes sense to someone!  

  •  08-19-2009, 9:07 PM 54827 in reply to 54764

    Re: CuteWebUI_AjaxUploader_OnStart() Not being called!

    Reply Quote
    Hi,
     
    Do you mean you can upload the files ,
     
    but the CuteWebUI_AjaxUploader_OnPostback never be called ?
     
    Regards,
    Terry

  •  08-20-2009, 8:43 AM 54848 in reply to 54827

    Re: CuteWebUI_AjaxUploader_OnStart() Not being called!

    Reply Quote
    Hi Terry,
     
    Yes, that seems to be what is happening. 
    When I add these functions they don't get called either:
    1.  function CuteWebUI_AjaxUploader_OnStart() {  
    2.             //this function would be called on each file start upload  
    3.             //maybe be called many times when upload multiple files.  
    4.             alert("hello");  
    5.             $('#SendMail').attr("disabled", "disabled");  
    6.         }  
    7.         function CuteWebUI_AjaxUploader_OnStop() {  
    8.             //this function would be called if get error or user cancel it.  
    9.             alert("hello");             
    10.             $('#SendMail').removeAttr("disabled");          
    11.         } 

  •  08-21-2009, 12:53 AM 54879 in reply to 54848

    Re: CuteWebUI_AjaxUploader_OnStart() Not being called!

    Reply Quote
    Hi,
     
    I just not able to determine the reason.
     
    Can you provide an online page for testing ?
     
    Regards,
    Terry
     
View as RSS news feed in XML