Support forums » Products » Cute Editor for .NET » Re: Set focus resetting while in update panel and ajax modalpopup

Set focus resetting while in update panel and ajax modalpopup

Last post 09-02-2009, 1:37 AM by Kenneth. 5 replies.
Sort Posts: Previous Next

  •  08-28-2009, 11:23 AM 55153

    Set focus resetting while in update panel and ajax modalpopup

    Reply Quote
    Hi,
     
    I'm using Cute Editor 6.4 and encountered a bug with cuteeditor resetting my focus because of it's loading. This only happens in IE 6.
     
    Basically I initially set focus on an input field on the main page. After I click a  button to open a modal popup I set the focus to another input field on the popup. However, after Cute Editor finishes loading the focus gets set back to the field on the main page.
     
    The focus setting works completely fine if I'm don't have a Cute Editor in the modal popup or if I'm not using an update panel for asynchronous postback.
    Below is an example page that can reproduce the bug.
    1. <%@ Page Language="vb" AutoEventWireup="false" %>   
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    4. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>   
    5. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>   
    6. <html xmlns="http://www.w3.org/1999/xhtml">   
    7. <head runat="server">   
    8.   
    9.     <script type="text/VB" runat="server">   
    10.         Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load   
    11.             Page.SetFocus(txtMain)   
    12.         End Sub  
    13.   
    14.         Private Sub btnShow_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShow.Click   
    15.             modalExtender.Show()   
    16.             Page.SetFocus(txtName)   
    17.         End Sub  
    18.     </script>   
    19.   
    20.     <style type="text/css">   
    21.         /*Modal Popup*/.modalBackground   
    22.         {   
    23.             background-color: Gray;   
    24.             filter: alpha(opacity=70);   
    25.             opacity: 0.7;   
    26.         }   
    27.         .modalBox   
    28.         {   
    29.             width: 700px;   
    30.             text-align: center;   
    31.             background-color: #ffffff;   
    32.             padding: 1px 0px;   
    33.         }   
    34.     </style>   
    35.     <title></title>   
    36. </head>   
    37. <body>   
    38.     <form id="form1" runat="server">   
    39.     <cc1:ToolkitScriptManager ID="scriptMgr" runat="server" CombineScripts="true">   
    40.     </cc1:ToolkitScriptManager>   
    41.     <asp:UpdatePanel ID="updMain" runat="server" UpdateMode="Conditional">   
    42.         <ContentTemplate>   
    43.             <div>   
    44.                 <asp:TextBox ID="txtMain" runat="server"></asp:TextBox>   
    45.                 <asp:Button ID="btnShow" runat="server" Text="Show popup" />   
    46.             </div>   
    47.             <asp:Panel ID="pnlPopup" runat="server" Style="display: none;" meta:resourcekey="pnlPopupResource1"  
    48.                 CssClass="modalBox">   
    49.                 <table style="width: 80%;">   
    50.                     <tr>   
    51.                         <td>   
    52.                             <asp:Label ID="lblName" runat="server" AssociatedControlID="txtName" Text="Name:"  
    53.                                 meta:resourcekey="lblNameResource" />   
    54.                         </td>   
    55.                         <td>   
    56.                             <asp:TextBox ID="txtName" runat="server" MaxLength="100" Style="width: 450px;" />   
    57.                         </td>   
    58.                     </tr>   
    59.                     <tr>   
    60.                         <td>   
    61.                             <asp:Label ID="lblInquiry" runat="server" AssociatedControlID="ceInquiry" Text="Message:"  
    62.                                 meta:resourcekey="lblInquiryResource" />   
    63.                         </td>   
    64.                         <td>   
    65.                             <CE:Editor Width="455" Height="250" ID="ceInquiry" EditorOnPaste="PasteWord" AutoConfigure="Simple"  
    66.                                 runat="server" ShowBottomBar="true" MaxHTMLLength="4000" ShowWordCount="true"  
    67.                                 ShowHtmlMode="true" ShowPreviewMode="false" ShowTagSelector="false" Focus="false">   
    68.                             </CE:Editor>   
    69.                         </td>   
    70.                     </tr>   
    71.                     <tr>   
    72.                         <td style="text-align: right;" colspan="2">   
    73.                             <asp:Button ID="btnCancel" runat="server" CausesValidation="False" Style="width: auto;"  
    74.                                 Text="Cancel" />   
    75.                         </td>   
    76.                     </tr>   
    77.                 </table>   
    78.             </asp:Panel>   
    79.             <asp:Button ID="btnDummy" runat="server" Style="display: none;" meta:resourcekey="btnDummyResource1" />   
    80.             <cc1:ModalPopupExtender ID="modalExtender" runat="server" TargetControlID="btnDummy"  
    81.                 PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" DynamicServicePath=""  
    82.                 Enabled="True" />   
    83.         </ContentTemplate>   
    84.     </asp:UpdatePanel>   
    85.     </form>   
    86. </body>   
    87. </html>  

    Thanks in advance

  •  08-31-2009, 4:42 AM 55198 in reply to 55153

    Re: Set focus resetting while in update panel and ajax modalpopup

    Reply Quote
    Hi,
     
    Try this way:
     
    1. <script type="text/javascript">   
    2.   
    3. function CuteEditor_OnInitialized(editor)   
    4. {   
    5.   var txt=document.getElementById('<%= txtName.ClientID%>');   
    6. txt.focus();   
    7. }   
    8. </script>  

    Regards,
     
    ken

  •  08-31-2009, 1:37 PM 55211 in reply to 55198

    Re: Set focus resetting while in update panel and ajax modalpopup

    Reply Quote
    Hello,
     
    Where abouts do I use this? I tried to include this into the page I provided above but the event doesn't seem to be firing. I'm assuming CuteEditor_OnInitialized gets called by an event defined in the CuteEditor code, correct?
     
    Thanks,
    Gilbert

  •  08-31-2009, 10:26 PM 55220 in reply to 55211

    Re: Set focus resetting while in update panel and ajax modalpopup

    Reply Quote
    Hi Gilbert,
     
    Try this code, it works fine for me.
     
    1. <%@ Page Language="vb" AutoEventWireup="false" %>   
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    4. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>   
    5. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>   
    6. <html xmlns="http://www.w3.org/1999/xhtml">   
    7. <head id="Head1" runat="server">   
    8.   
    9.     <script type="text/VB" runat="server">      
    10.           
    11.         Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load   
    12.             Page.SetFocus(txtMain)   
    13.         End Sub  
    14.      
    15.         Private Sub btnShow_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShow.Click   
    16.             modalExtender.Show()   
    17.         End Sub  
    18.        </script>   
    19.   
    20.     <style type="text/css">   
    21.         /*Modal Popup*/.modalBackground   
    22.         {   
    23.             background-color: Gray;   
    24.             filter: alpha(opacity=70);   
    25.             opacity: 0.7;   
    26.         }   
    27.         .modalBox   
    28.         {   
    29.             width: 700px;   
    30.             text-align: center;   
    31.             background-color: #ffffff;   
    32.             padding: 1px 0px;   
    33.         }   
    34.     </style>   
    35.     <title></title>   
    36. </head>   
    37. <body>   
    38.     <form id="form1" runat="server">   
    39.     <asp:ScriptManager ID="scriptMgr" runat="server">   
    40.     </asp:ScriptManager>   
    41.     <asp:UpdatePanel ID="updMain" runat="server" UpdateMode="Conditional">   
    42.         <ContentTemplate>   
    43.             <div>   
    44.                 <asp:TextBox ID="txtMain" runat="server"></asp:TextBox>   
    45.                 <asp:Button ID="btnShow" runat="server" Text="Show popup" OnClientClick="test()" />   
    46.             </div>   
    47.             <asp:Panel ID="pnlPopup" runat="server" Style="display: none;" meta:resourcekey="pnlPopupResource1"  
    48.                 CssClass="modalBox">   
    49.                 <table style="width: 80%;">   
    50.                     <tr>   
    51.                         <td>   
    52.                             <input type="button" value="click" onclick="test()" />   
    53.                             <asp:Label ID="lblName" runat="server" AssociatedControlID="txtName" Text="Name:"  
    54.                                 meta:resourcekey="lblNameResource" />   
    55.                         </td>   
    56.                         <td>   
    57.                             <asp:TextBox ID="txtName" runat="server" MaxLength="100" Style="width: 450px;" />   
    58.                         </td>   
    59.                     </tr>   
    60.                     <tr>   
    61.                         <td>   
    62.                             <asp:Label ID="lblInquiry" runat="server" Text="Message:" meta:resourcekey="lblInquiryResource" />   
    63.                         </td>   
    64.                         <td>   
    65.                             <CE:Editor Width="455" Height="250" ID="ceInquiry" EditorOnPaste="PasteWord" AutoConfigure="Simple"  
    66.                                 runat="server" ShowBottomBar="true" MaxHTMLLength="4000" ShowWordCount="true"  
    67.                                 ShowHtmlMode="true" ShowPreviewMode="false" ShowTagSelector="false">   
    68.                             </CE:Editor>   
    69.                         </td>   
    70.                     </tr>   
    71.                     <tr>   
    72.                         <td style="text-align: right;" colspan="2">   
    73.                             <asp:Button ID="btnCancel" runat="server" CausesValidation="False" Style="width: auto;"  
    74.                                 Text="Cancel" />   
    75.                         </td>   
    76.                     </tr>   
    77.                 </table>   
    78.             </asp:Panel>   
    79.             <asp:Button ID="btnDummy" runat="server" Style="display: none;" meta:resourcekey="btnDummyResource1" />   
    80.             <cc1:ModalPopupExtender ID="modalExtender" runat="server" TargetControlID="btnDummy"  
    81.                 PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" DynamicServicePath=""  
    82.                 Enabled="True"  />   
    83.         </ContentTemplate>   
    84.     </asp:UpdatePanel>   
    85.     </form>   
    86. </body>   
    87. </html>   
    88.   
    89. <script type="text/javascript">   
    90. function CuteEditor_OnInitialized(editor)   
    91. {   
    92.   var txt=document.getElementById('<%= txtName.ClientID%>');   
    93. txt.focus();   
    94. }   
    95. </script>  
    Regards,
     
    Ken

  •  09-01-2009, 1:45 PM 55260 in reply to 55220

    Re: Set focus resetting while in update panel and ajax modalpopup

    Reply Quote
    That worked like a charm. Thanks Ken!
     
    So I suppose all javascript API functions for cute editor needs to be placed after the editor on the page or it will be overwritten with the original function?
     
    Regards,
    Gilbert

  •  09-02-2009, 1:37 AM 55276 in reply to 55260

    Re: Set focus resetting while in update panel and ajax modalpopup

    Reply Quote
    Hi gilbert,
     
    Focus is a special case, you do not need to placed all javascript api after the editor.
     
    Regards,
     
    Ken
View as RSS news feed in XML