jQuery new version incompatible script

Question

I'm a beginner. The following script works fine with old versions of jQuery, but it's not compatible with jquery-3.3.1. Please help me..

<script type="text/javascript">
$(document).ready(function() {
  $('#results-text').fadeOut();
  function search() {
    var query_value = $('input#search').val();
    $('b#search-string').html(query_value);
    if(query_value !== ''){
      $.ajax({
        type: "POST",
        url: "search.php",
        data: { query: query_value },
        cache: false,
        success: function(html){
          $("table#results").html(html);
        }
      });
    }return false;    
  }
  $("input#search").live("keyup", function(e) {
    clearTimeout($.data(this, 'timer'));
    var search_string = $(this).val();
    if (search_string == '') {
      $('#results-text').fadeOut();
    }else{
      $('#results-text').fadeIn();
      $(this).data('timer', setTimeout(search, 100));
    };
  });
});
</script>

score 0 · Answer 1 · answered Feb 01 '18 at 06:22

check out this

<script type="text/javascript">
    $(document).ready(function() {
      $('#results-text').fadeOut();
    });

    function search() {
        var query_value = $('input#search').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
          $.ajax({
            type: "POST",
            url: "search.php",
            data: { query: query_value },
            cache: false,
            success: function(html){
              $("table#results").html(html);
            }
          });
        }return false;    
      }
      $("input#search").on("keyup", function(e) {
        clearTimeout($.data(this, 'timer'));
        var search_string = $(this).val();
        if (search_string == '') {
          $('#results-text').fadeOut();
        }else{
          $('#results-text').fadeIn();
          $(this).data('timer', setTimeout(search, 100));
        };
      });
    </script>

score 0 · Accepted Answer · answered Feb 01 '18 at 06:23

jQuery .live() has been removed in version 1.9 onwards.

Use on instead of live

Example:-

  <script type="text/javascript">
    $(document).ready(function() {
      $('#results-text').fadeOut();
      function search() {
        var query_value = $('input#search').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
          $.ajax({
            type: "POST",
            url: "search.php",
            data: { query: query_value },
            cache: false,
            success: function(html){
              $("table#results").html(html);
            }
          });
        }return false;    
      }
      $("input#search").on("keyup", function(e) { //changed on instead of live
        clearTimeout($.data(this, 'timer'));
        var search_string = $(this).val();
        if (search_string == '') {
          $('#results-text').fadeOut();
        }else{
          $('#results-text').fadeIn();
          $(this).data('timer', setTimeout(search, 100));
        };
      });
    });
    </script>

score 0 · Answer 3 · answered Feb 01 '18 at 06:25

0

If 'search function' not being called is your problem, then keep the function in global scope i.e. out of $(document).ready block.

answered Feb 01 '18 at 06:25

Jay

181
1
4

jQuery new version incompatible script

3 Answers3