probelm with the AutoCompleteBox in Microsoft Edge Mobile

[Hagai]

Hi,

 

I'm using the RadAutoCompleteBox in one of our web forms and I'm having an issues with it on Microsoft Edge Mobile.

As it has problems with my OnClientLoad js function and only if I remove the OnClientLoad="OnClientLoad" binding from the control declaration the autocomplete will work.

In the desktop version of edge all is well same for chrome and chrome mobile,

the error:

 

"OnClientLoad is not defined"

"ReferenceError: OnClientLoad is not defined at Array.<anonymous> (https://my-domain.com/syllabisearch/he/pages/default.aspx:272:176322) at https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:51370 at Sys._Application._raiseInit (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:72276) at Sys._Application.initialize (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:69772) at b (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:71512) at HTMLDocument.a (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:71786)"
and the breakpoint is on the following code (attached in 'code-snippet-1.zip').

Here is my  OnClientLoad JavaScript Function

01.function OnClientLoad(sender, args) {
02.                $(".racToken").attr('tabindex', 0);
03.                var autoCompleteBox = $find("<%= RadAutoCompleteSearchBox.ClientID %>");
04.                var entryGeneralTitle = '<%=Idc.Yedion.SyllabiSearch.Helpers.Util.getLocalizedValue("AccessibilityGeneralSearchAutoCompleteBoxClear", CurrentLanguage)%>';
05.                var selectedEntryTitle = entryGeneralTitle.replace('{0}', autoCompleteBox.get_entries()?.getEntry(0)?.get_text());
06.                $(".racRemoveTokenLink").attr('title', selectedEntryTitle);
07.                $(".racToken").attr('title', selectedEntryTitle);
08.                $(".racRemoveTokenLink").attr('aria-label', selectedEntryTitle);
09.                $(".racToken").attr('aria-label', selectedEntryTitle);
10.                $(".racToken").on('keypress', function (e) {
11.                    var key = e.which;
12.                    if (key == 13) {
13.                        e.preventDefault();
14.                        autoCompleteBox.get_entries().clear();
15.                        $("#<%= BtnClearSearch.ClientID %>").click();
16.                    }
17.
18.                });
19.                $(".racToken").on('keydown', function (e) {
20.                    var key = e.which;
21.                    if (key == 8 || key == 46) {
22.                        e.preventDefault();
23.                        autoCompleteBox.get_entries().clear();
24.                        $("#<%= BtnClearSearch.ClientID %>").click();
25.                }
26.            });
27.                $telerik.$(sender.get_inputElement()).on('keypress', function (e) {
28.                    if (sender.get_entries().get_count() > 0) {
29.                        e.preventDefault();
30.                    }
31.                });
32.
33.            }

 

And this is my control declaration

1.<telerik:RadAutoCompleteBox ID="RadAutoCompleteSearchBox" AllowCustomEntry="false" EnableAriaSupport="true" InputType="Token" ItemType="Idc.Yedion.Internet.ObjectsModels.GeneralSearchResult" runat="server" MinFilterLength="2" TextSettings-SelectionMode="Single" TokensSettings-AllowTokenEditing="false" OnClientLoad="OnClientLoad" DropDownPosition="Static" RenderMode="Lightweight" EnableScreenBoundaryDetection="true" EnableDirectionDetection="true" ZIndex="1" OnEntryAdded="RadAutoCompleteSearchBox_EntryAdded" OnEntryRemoved="RadAutoCompleteSearchBox_EntryRemoved" EnableClientFiltering="true" Skin="Bootstrap" Width="100%"></telerik:RadAutoCompleteBox>

 

Please advice,

Thanks,

Hagai.

[Peter Milchev]

Hello Hagai,

The error means that the OnClientLoad function itself is not loaded on the page. To fix that, ensure that the file containing it is loaded properly. 

Another possible reason for the error is if the file or script tag that contains the OnClientLoad function is not properly formatted or there is a JavaScript thrown that would terminate the interpretation of the rest of the file or script tag. 

Please ensure there are no other JavaScript errors in the browser's console and all scripts are loaded properly. Keep in mind that the names of the functions are case sensitive, so you can double-check that also.

Regards,
Peter Milchev
Progress Telerik

[Hagai]

Hi Petrer,

the JS code is written directly on my aspx file and not in external JS file.

and as I mentioned before in Microsoft Edge Desktop, Chrome Desktop, Firefox, Chrome Mobile, Samsung Internet Browser it's works fine without any errors.

the code is written inside a RadCodeBlock control as follow:

 

<telerik:RadCodeBlock ID="RadCodeBlockHead" runat="server">
        <script type="text/javascript">
            function entryRemoved(sender, eventArgs) {
                try {
                    document.querySelectorAll('.RadLinkButton').forEach(item =>
                        item.classList.add("hidden"));
                    document.querySelectorAll('.racInput').forEach(item =>
                        item.disabled = false);
                } catch (e) {

                }
            }
            function entryAdded(sender, eventArgs) {
                try {
                    document.querySelectorAll('.racInput').forEach(item =>
                        item.disabled = true);
                } catch (e) {

                }
            }

            function entryAdding(sender, eventArgs) {
                var autoCompleteBox = $find("<%= RadAutoCompleteSearchBox.ClientID %>");
                var firstEntry = autoCompleteBox.get_entries().getEntry(0);
                if (firstEntry) {
                    autoCompleteBox.get_entries().remove(firstEntry);
                }
            }

            function OnClientLoad(sender, args) {
                $(".racToken").attr('tabindex', 0);
                var autoCompleteBox = $find("<%= RadAutoCompleteSearchBox.ClientID %>");
                var entryGeneralTitle = '<%=Idc.Yedion.SyllabiSearch.Helpers.Util.getLocalizedValue("AccessibilityGeneralSearchAutoCompleteBoxClear", CurrentLanguage)%>';
                let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
                if (isMobile == false) {
                    var selectedEntryTitle = entryGeneralTitle.replace('{0}', autoCompleteBox.get_entries()?.getEntry(0)?.get_text());
                    $(".racRemoveTokenLink").attr('title', selectedEntryTitle);
                    $(".racToken").attr('title', selectedEntryTitle);
                    $(".racRemoveTokenLink").attr('aria-label', selectedEntryTitle);
                    $(".racToken").attr('aria-label', selectedEntryTitle);
                }
                $(".racToken").on('keypress', function (e) {
                    var key = e.which;
                    if (key == 13) {
                        e.preventDefault();
                        autoCompleteBox.get_entries().clear();
                        $("#<%= BtnClearSearch.ClientID %>").click();
                    }

                });
                $(".racToken").on('keypress', function (e) {
                    var key = e.which;
                    if (key == 13) {
                        e.preventDefault();
                        autoCompleteBox.get_entries().clear();
                        $("#<%= BtnClearSearch.ClientID %>").click();
                    }

                });
                $(".racToken").on('keydown', function (e) {
                    var key = e.which;
                    if (key == 8 || key == 46) {
                        e.preventDefault();
                        autoCompleteBox.get_entries().clear();
                        $("#<%= BtnClearSearch.ClientID %>").click();
                }
            });
                $telerik.$(sender.get_inputElement()).on('keypress', function (e) {
                    if (sender.get_entries().get_count() > 0) {
                        e.preventDefault();
                    }
                });
            }

            $(document).ready(function () {
                let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
                var resultsTable = $('#SyllabusSearchReslutsTbl').DataTable({
                <% if (CurrentLanguage == Idc.Yedion.Internet.ObjectsModels.Language.Hebrew)
            { %>
                    'language': {
                        //'url': "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Hebrew.json"
                        sProcessing: "מעבד...",
                        sLengthMenu: "הצג _MENU_ פריטים",
                        sZeroRecords: "לא נמצאו רשומות מתאימות",
                        sInfo: "_START_ עד _END_ מתוך _TOTAL_ רשומות",
                        sInfoEmpty: "0 עד 0 מתוך 0 רשומות",
                        sInfoFiltered: "(מסונן מסך _MAX_ רשומות)",
                        sInfoPostFix: "",
                        sSearch: "סינון תוצאות החיפוש:"+"<br/>",
                        sUrl: "",
                        oPaginate: {
                            sFirst: "ראשון",
                            sPrevious: "קודם",
                            sNext: "הבא",
                            sLast: "אחרון"
                        }
                    },
                <%}
            else
            {%>
                    'language': {
                        "sEmptyTable": "No data available in table",
                        "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
                        "sInfoEmpty": "Showing 0 to 0 of 0 entries",
                        "sInfoFiltered": "(filtered from _MAX_ total entries)",
                        "sInfoPostFix": "",
                        "sInfoThousands": ",",
                        "sLengthMenu": "Show _MENU_ entries",
                        "sLoadingRecords": "Loading...",
                        "sProcessing": "Processing...",
                        "sSearch": "Filter Search Results:"+"<br/>",
                        "sZeroRecords": "No matching records found",
                        "oPaginate": {
                            "sFirst": "First",
                            "sLast": "Last",
                            "sNext": "Next",
                            "sPrevious": "Previous"
                        },
                        "oAria": {
                            "sSortAscending": ": activate to sort column ascending",
                            "sSortDescending": ": activate to sort column descending"
                        }
                    },
              <% } %>
                    paging: false
                });
                resultsTable.order([0, 'desc']).draw();
                $('.sorting').css('width', '');
                $('.sorting_desc').css('width', '');
                $('#SyllabusSearchReslutsTbl tbody tr').first().focus();
                if (isMobile) {
                    let pxWidth = screen.width * 0.941747572815534;
                    $('input[type=search]').css('width',`${pxWidth}px`);
                    $('thead').hide();
                } else {
                    let pxWidth = screen.width * 0.506171875;
                    $('input[type=search]').css('width', `${pxWidth}px`);
                }

                $('.col-sm-12').first().remove();
                $('#SyllabusSearchReslutsTbl_wrapper .row .col-sm-12 .col-md-6').hide();
                 <% if (CurrentLanguage == Idc.Yedion.Internet.ObjectsModels.Language.Hebrew)
            { %>

                $('div.dataTables_wrapper div.dataTables_filter label').css('text-align','right');
                $('input[type=search]').attr('placeholder', 'סינון מתאפשר באמצעות הקלדת כל ערך מתוך התוצאות');
                $('input[type=search]').attr('title', 'סינון מתאפשר באמצעות הקלדת כל ערך מתוך התוצאות');
                <%}
            else
            {%>

                $('div.dataTables_wrapper div.dataTables_filter label').css('text-align','left');
                $('input[type=search]').attr('placeholder', 'Filter is possible by writing any value from the results');
                $('input[type=search]').attr('title', 'Filter is possible by writing any value from the results');
              <% } %>

                let tblElmnt = document.querySelector('#SyllabusSearchReslutsTbl');
                tblElmnt?.scrollIntoView();
                tblElmnt?.focus();
            });
        </script>
    </telerik:RadCodeBlock>

[Peter Milchev]

Hello Hagai,

If the issue is only with the OnClientLoad, can you please try to remove the content of the OnClientLoad function and see how that works for you. 

The fact that this is failing in a single non-popular mobile browser is very strange, as the error indicates a script not loaded or an error before the script containing this function declaration.

If you can check the response from the server you can see if the function is in the response at all and what is the evaluated script content.

Regards,
Peter Milchev
Progress Telerik

[Hagai]

Hello Peter,

Here is the full html response of the page (attached in code-snippet-2.zip).

Please sea attached files for more details as you will see, that making the OnClientLoad function empty still didn't help.

even fixing potentials syntax errors shown by the Microsoft Edge Developers Toolbar didn't help. 

As I mentioned before in Microsoft Edge Desktop and in chrome all is working just fine without any errors, so I don't thinks it's a matter of functions names.

As for Microsoft Edge Mobile, maybe it's still not popular as chrome but still i do believe that peoples use it as if they are using it already on there pc and/or if the chrome for android keep freezing to them on the phone (look over google for users complaining about this for example one plus phone users like I own (One Plus 6 Model)) , this is why I moved into Microsoft Edge for android  instead of the google chrome.

Any way I look forward to your reply.

Thanks,

Hagai.