Jquery issue on IE10

Question

The following jquery code works just fine on the latest version of Chrome,

On focus event of the input field it should trigger the autocompletion of the field itself using ajax to retrieve the suggestions but it does not work at all on IE10

The console is empty...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
  $(function() {

    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

     $( "#myBut").click(function(){

     if($('#city').val() == "")
     return;

     log("selected: " + $("#city").val() );

     $('#city').val("");
     $('#city').blur("");

     });

    $( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://localhost:8085/TestJsonArrayAJAX/MyServlet",
          dataType: "json",
          data: {
            q: request.term
          },
          success: function( data ) {

            alert("ciao");
            response( data );
          }
        });
      },
      minLength: 0,
      select: function( event, ui )
      {

          alert('ccc');

      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }}).focus(function() {    alert("c"); 
            //Use the below line instead of triggering keydown
            $(this).data("uiAutocomplete").search($(this).val()) });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="city">Your city: </label>
  <input id="city">
  Powered by <a href="http://geonames.org">geonames.org</a>

</div>

<button name="subject" id="myBut" value="HTML">HTML</button>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

Answer 1

There are known issues with scrollTop on IE. Might this help? document.body.scrollTop is always 0 in IE even when scrolling

Jquery issue on IE10

Question

1 answers

solution1
0 2015-09-28 16:13:27

Jquery issue on IE10

Question

1 answers

solution1 0 2015-09-28 16:13:27

solution1
0 2015-09-28 16:13:27