0

I have used the text box for translating English to Gujarati using Google translation java script it works good,but when I used ajax update panel for text box it does not work.

Below is the java script i used.

Any idea?

Thanks!

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("elements", "1", {
            packages: "transliteration"
        });
        function onLoad() {
            var options = {
                sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
                destinationLanguage:
                google.elements.transliteration.LanguageCode.GUJARATI,

                shortcutKey: 'ctrl+g',
                transliterationEnabled: true
            };
            var control =
            new google.elements.transliteration.TransliterationControl(options);
            control.makeTransliteratable(['<%=TextBox1.ClientID%>']);
        }
        google.setOnLoadCallback(onLoad);

        var finalString = "";
        function Changed(textControl) {

            var _txtUnicodeName = document.getElementById('<%=TextBox1.ClientID%>');

            var _EnteredString = _txtUnicodeName.value;
        }
    </script>

    <asp:UpdatePanel ID="Activistupdatepanel" runat="server">
                    <ContentTemplate>
                        <div>
                            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
Somnath
  • 249
  • 3
  • 12

1 Answers1

1

when you use UpdatePanel you need to re-initialize the script after post backs as:

// maybe this also need to be inside the EndRequest again
google.load("elements", "1", {
    packages: "transliteration"
});

function onLoad() {
    var options = {
        sourceLanguage:
        google.elements.transliteration.LanguageCode.ENGLISH,
        destinationLanguage:
        google.elements.transliteration.LanguageCode.GUJARATI,

        shortcutKey: 'ctrl+g',
        transliterationEnabled: true
    };
    var control =
    new google.elements.transliteration.TransliterationControl(options);
    control.makeTransliteratable(['<%=TextBox1.ClientID%>']);
}

// here you make the first init when page load
google.setOnLoadCallback(onLoad);

// here we make the handlers for after the UpdatePanel update
     var prm = Sys.WebForms.PageRequestManager.getInstance();    
     prm.add_initializeRequest(InitializeRequest);
     prm.add_endRequest(EndRequest);
    
    function InitializeRequest(sender, args) {      
    }
    
    // this is called to re-init the google after update panel updates.
    function EndRequest(sender, args) {
        onLoad();
    }

Similar issues:
jquery script works when page is reload
Asp.Net UpdatePanel in Gridview Jquery DatePicker

Community
  • 1
  • 1
Aristos
  • 66,005
  • 16
  • 114
  • 150
  • thanks @Aristos i had used your code but it gives run time error as Microsoft JScript runtime error: 'Sys' is undefined – Somnath Oct 29 '12 at 08:51
  • @Somnath Place the `Sys.WebForms.PageRequestManager.getInstance(); ... ` part on `onload` of the page. This can happens if you call it before the script of the UpdatePanel. – Aristos Oct 29 '12 at 08:57
  • @Somnath see this answer: http://stackoverflow.com/questions/3849822/sys-is-undefined-net-4-0/3851292#3851292 – Aristos Oct 29 '12 at 08:58