This is a migrated thread and some comments may be shown as answers.

Problem with OnClientSubmit + AJAX + Firefox

3 Answers 83 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Mike Bridge asked on 10 May 2010, 06:42 PM

I have an OnClientSubmit callback in a RadEditor which detects whether there are incorrect widths and heights specified for images and corrects them. Since there's no way to disable the browsers' built-in resizers that appear when you click on an image and drag the rectangle, we decided to implement an ajax call to resize local images (i.e. alter the image files) from the OnClientSubmit call to match on the requested size of the image.

This appears to work in IE6-8 but on Firefox, the postback happens before the AJAX call has completed. It looks to me like the AJAX callback is left hanging. Is there something else I need to do to keep the postback from happening before my callback is complete?

Thanks!

-Mike

    
            <script type="text/javascript">  
        
            function OnResizeCallbackSuccess(result, userContext) { 
        
                alert("Success="+result.Success+": "+result.ErrorMessage); 
        
            } 
        
            function OnResizeCallbackFailed(err, context) { 
        
                alert("We are temporarily unable to check the images.  Please try again in a few minutes. (" + err.get_message() + ")"); 
        
            } 
        
            function OnResizeCallbackTimeout(result, userContext) { 
        
                alert("We are unable to access the server.  Please try again in a few minutes. (" + 
        
                            err.get_message() + ")"); 
        
            } 
        
            function OnClientSubmit(editor) 
        
            { 
        
                var elems = editor.get_document().getElementsByTagName("img");   
        
                for (var i=0; i < elems.length; i++)   
        
                {   
        
                    var image = elems[i]; 
        
                    //alert("found image" +image.src+ " (w:"+image.width+" h:"+image.height); 
        
                    var specifiedWidth=image.style.width.replace("px", ""); 
        
                    var specifiedHeight=image.style.height.replace("px", ""); 
        
                    if (!specifiedWidth) 
        
                    { 
        
                        specifiedWidth = image.getAttribute("width"); 
        
                    } 
        
                    if (!specifiedHeight) 
        
                    { 
        
                        specifiedHeight = image.getAttribute("height"); 
        
                    } 
        
                    image.style.width=""; 
        
                    image.style.height=""; 
        
                    image.removeAttribute("width"); 
        
                    image.removeAttribute("height"); 
        
                    imageimage.style.width=image.width; 
        
                    imageimage.style.height=image.height; 
        
                    image.setAttribute("width", image.width); 
        
                    image.setAttribute("height", image.height); 
        
                    var wasreset=false; 
        
                    if (specifiedWidth && image.width != specifiedWidth) { 
        
                        wasreset=true         
        
                    } 
        
                    if (specifiedHeight && image.height != specifiedHeight) { 
        
                        wasreset=true; 
        
                    } 
        
                    if (wasreset) { 
        
                        var svc = MyMailout.WebServices.ImageService; 
        
                        svc.set_defaultSucceededCallback(OnResizeCallbackSuccess); 
        
                        svc.set_defaultFailedCallback(OnResizeCallbackFailed); 
        
                        svc.Resize(image.src, parseInt(specifiedWidth), parseInt(specifiedHeight)); 
        
                    }; 
        
                }                    
        
                return true;     
        
            } 
        
            </script> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager runat="server" id="radScriptManager"> 
        
                <Services> 
        
                     <asp:ServiceReference Path="~/WebServices/ImageService.asmx" /> 
        
                </Services> 
        
                </telerik:RadScriptManager> 
        
                  <telerik:RadAjaxManager ID="radAjaxManager" runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="btnOk1"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadEditor1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                  </telerik:RadAjaxManager> 
        
                <div> 
        
                    <div><strong>Resize the image by clicking in it and dragging the boxes, then click "OK".</strong></div> 
        
                    <telerik:RadEditor  
        
                        ID="RadEditor1" Runat="server" Skin="Black"  
        
                        EnableResize="true" 
        
                        Width="750" 
        
                        Height="500" 
        
                        OnClientSubmit="OnClientSubmit" 
        
                    > 
        
                    <ImageManager  
        
                        UploadPaths="~/Home/86"  
        
                        ViewPaths="~/Home/86"  
        
                        SearchPatterns="*.gif,*.jpg,*.jpeg,*.png"             
        
                        /> 
        
                        <Content>             
        
                            <img src="http://localhost/Industry/images/Industry/logo.gif"></img> 
        
                        </Content> 
        
                    </telerik:RadEditor>     
        
                    <asp:Button runat="server" id="btnOk" Text="OK" />   
        
                </div> 
        
                </form>

3 Answers, 1 is accepted

answered on 13 May 2010, 11:07 AM

Hi Mike,

The RadEditor for ASP.NET AJAX was intended to be as simple to configure as possible - and we decided to follow the familiar pattern of TextBox as this is in fact how the editor is used in almost all cases. The development paradigm is that the editor is a part of a larger page that has some other means of making a postback or a callback - and the editor should not interfere in it. Thus, the Submit and Cancel buttons were removed.

Since the new editor does not offer any more an Update button, it is not longer registered as a postback control and it is not possible to cancel the page submission in the OnClientSubmit event of the editor.

For that reason you should cancel the submission in the event of the control which is causing the postback.

I just want to show you this KB article which provides a way to disable the image resizing: Disabling image resize in RadEditor Classic and Prometheus.

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 13 May 2010, 04:30 PM

Hi Rumen,

Yes, I've seen that article and I tried that strategy out a few years back when we first encountered it but it didn't work dependably in Firefox, at least with whatever version we were using then. Rather than fight the browsers, we ultimately decided to just let the user change the image's width and height attributes using the RadEditor's properties window or with the browser and then take those requested dimensions and apply them to the actual image via AJAX. This turned out to be the easiest route as well as the least confusing (and most useful) to the end-user.

Thanks!

-Mike