locked
How make tolbar works on all browsers RRS feed

  • Question

  • User1865404792 posted
    I used this code to make a rollbar for textbox autocomplet
    ul.ui-autocomplete { max-height: 350px !important; overflow: auto !important; }
    It works well with Firefox
    
    With Chrome, two lists appear, the first is very long and the second contains a rollbar
    
    It never works with Edge and Explorer
    Monday, July 6, 2020 8:13 AM

All replies

  • User475983607 posted

    Auto complete is a 3rd party JavaScript library.  There are several and we have no idea which you are using.  Anyway, it is up to you to read the documentation and make sure you reference libraries that work with the browsers you are targeting. 

    Monday, July 6, 2020 11:38 AM
  • User1865404792 posted
    <%@ Page Language="C#"  MaintainScrollPositionOnPostback="true" AutoEventWireup="true" CodeFile="daily.aspx.cs" Inherits="daily" %>
     
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
     
    <!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
         
     
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
         
        <!-- لحفظ رقم الطبيب المختار في صفحة الزيارات في الحقل المخفي من اجل الحفظ في قاع -->
        <script type="text/javascript">
        $(function () {
            $("[id$=TextBox1]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/daily.aspx/GetCompletionList") %>',
                        data: "{ 'prefixText': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfdoc_no]").val(i.item.val);
                },
                minLength: 1
            });
        }); 
    </script>
     
        <!-- هذا الوسم التالي يقوم بعمل سكرول بار للاوتوكمبليت-->
        <style type="text/css">
            ul.ui-autocomplete {
                max-height:250px !important;
                overflow:auto !important;
            }
         
     
     
     
        <style type="text/css">
            .auto-style1 {
                text-align: right;
            }
            .auto-style2 {
                color: #0000CC;
                font-weight: bold;
                font-size: large;
            }
            .auto-style3 {
                text-align: center;
            }
            .auto-style4 {
                font-size: large;
                color: #000000;
            }
            .auto-style5 {
                height: 38px;
            }
            .auto-style7 {
                font-weight: bold;
            }
            .auto-style8 {
                font-size: large;
                font-weight: bold;
            }
            .auto-style9 {
                background-color: #F0F0F0;
            }
            .auto-style10 {
                height: 38px;
                text-align: left;
            }
            .auto-style11 {
                text-align: left;
            }
            .auto-style13 {
                font-size: large;
                color: #0000CC;
            }
            .auto-style14 {
                font-size: large;
            }
            .auto-style15 {
                color: #CC0000;
                font-size: large;
            }
             
            .auto-style16 {
                font-size: large;
                text-decoration: underline;
            }
            .auto-style17 {
                font-size: large;
                color: #CC0066;
            }
            .auto-style19 {
                font-size: x-large;
            }
             
            .auto-style20 {
                color: #CC0066;
                font-size: x-large;
            }
             
        </style>
    </head>
    <body>
     
        <!-- لحفظ رقم الطبيب المختار في صفحة الزيارات في الحقل المخفي من اجل الحفظ في قاع -->
         
             
        <!--ادخال فقط ارقام في تكست كمية العينات -->
        <script type="text/javascript">
            function CheckNumeric(e) {
                if (window.event)
                    // IE            
                {
                    if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8)
                {
                    event.returnValue = false;
                    return false;
                }
                }
                else {
                    // Fire Fox
                    if ((e.which < 48 || e.which > 57) & e.which != 8)
                    {
                        e.preventDefault();
                        return false;
                    }
                }
            } 
     
        </script>

    this code

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

    <!-- لحفظ رقم الطبيب المختار في صفحة الزيارات في الحقل المخفي من اجل الحفظ في قاع -->

    <script type="text/javascript"> $(function () { $("[id$=TextBox1]").autocomplete({ source: function (request, response) { $.ajax({ url: '<%=ResolveUrl("~/daily.aspx/GetCompletionList") %>', data: "{ 'prefixText': '" + request.term + "'}", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", success: function (data) { response($.map(data.d, function (item) { return { label: item.split('-')[0], val: item.split('-')[1] } })) }, error: function (response) { alert(response.responseText); }, failure: function (response) { alert(response.responseText); } }); }, select: function (e, i) { $("[id$=hfdoc_no]").val(i.item.val); }, minLength: 1 }); }); </script>

    <!-- هذا الوسم التالي يقوم بعمل سكرول بار للاوتوكمبليت-->

    <!-- لحفظ رقم الطبيب المختار في صفحة الزيارات في الحقل المخفي من اجل الحفظ في قاع -->

    <!--ادخال فقط ارقام في تكست كمية العينات -->

    <script type="text/javascript"> function CheckNumeric(e) { if (window.event) // IE { if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) { event.returnValue = false; return false; } } else { // Fire Fox if ((e.which < 48 || e.which > 57) & e.which != 8) { e.preventDefault(); return false; } } } </script>

    Tuesday, July 7, 2020 6:23 AM
  • User-939850651 posted

    Hi alhakimy,

    Based on your current description, I think the cause of the problem may be these:

    1. The versions of jquery and jquery-ui are not suitable. It may not work properly in Internet Explorer. Have you tried using the new version?
    2. This may be a problem with CORS in IE.

    There are some cases similar to your problem, you could check them, this may be helpful.

    https://stackoverflow.com/questions/14732264/jquery-autocomplete-working-in-chrome-and-firefox-but-not-working-in-ie

    https://stackoverflow.com/questions/28359376/jquery-ui-autocomplete-not-working-in-ie-10

    Best regards,

    Xudong Peng

    Tuesday, July 7, 2020 9:25 AM