Error "[Violation] Added non-passive Event Listener to a scroll-blocking 'mousewheel' Event"

Asked

Viewed 3,646 times

0

when I try to pass the value of a select to an onChange function, by clicking on the button it gives the following error in the console:

[Violation] Added non-passive Event Listener to a scroll-blocking 'mousewheel' Event. Consider marking Event Handler as 'Passive' to make the page more Responsive.

ERROR CODE (page where the data is fetched)

<?php
//Conectando ao banco de dados
$con = new mysqli("localhost", "root", "", "tcc");
if (mysqli_connect_errno()) trigger_error(mysqli_connect_error());

//Consultando banco de dados
$qryLista = mysqli_query($con, "SELECT * FROM postagens");    
while($r = mysqli_fetch_assoc($qryLista)){
 ?>
<table id='tabela'>
<tr>
<td><?= $r['id'] ?></td>
<td><?= $r['nome'] ?></td>
<td><?= $r['rua'] ?></td>
<td><?= $r['bairro'] ?></td>
<td><?= $r['telefone'] ?></td>
<td><?= $r['descricao'] ?></td>     
<td>
<select id='sel1'>
<option value='status'><?= $r['status'] ?></option>
<option value='pendente'>Pendente</option>
<option value='recolhido'>Recolhido</option>
</select></td>
</table>

<?php 
    }


?>

page snippet where this javascript function 

<script src="source\jquery-3.2.1.min.js"></script>
<script>



$(document).ready(function () {
    $('.sel1').on('change', function () {
         var selecionado = $(this).val(); 
       var selecionado_id = $(this).attr('data-id'); 
        $.ajax({
           data: "id=18&selecionado=recolhido",
          type: 'post',
          url: 'status.php',
      });
  });


</script>
<script>

//REFRESH FUNCTION ON THE PAGE 

        function load() {
             $("#tabela").load("getdados.php", null, function () { 
                    $(".loading-div").hide(); 
                });
        };
        $(document).ready(function () {
            load();
            setInterval(function () {
                load();
            }, 8000);
        });
    </script>
    </head>
        Bem vindo
        <?php echo $nome;?> <p>
        <?php echo $email;?><p>
        <a href="sair.php">Sair</a></p>
    <body>

    <div class ="container-fluid">
    <table class="table table-hover">
      <thead>
   <tr>
  <td>id</td>
  <td>nome</td>
  <td>rua</td>
  <td>bairro</td>
  <td>telefone</td>
  <td>materiais</td>
  <td>Status</td>
</tr>
<tbody id="tabela">

</tbody>

javascript

  • is already edited

  • 1

    This is not an error, it’s a series of checks that are being implemented in the developer tools of Chrome and Chromium, are performance tests generally, I will look for the Google link that quotes this and send you.

2 answers

1

There are several errors in your codes.

First you’re trying to access the select by a type selector class and the same was not assigned in select, there are two ways to solve this problem since you have defined a id.

You can assign a class in the select

<select id='sel1' class='sel1'>

Or access the select by selector id changing the javascript line: 

$('.sel1').on('change', function () {

For:

$('#sel1').on('change', function () {

Another mistake is that you are trying to recover an attribute that your select does not possess that is the data-id.

var selecionado_id = $(this).attr('data-id');

To fix it you must assign it.

<select id='sel1' class='sel1' data-id='<?= $r['id'] ?>'>

To learn more about seletores do jQuery, read the article Understanding the jQuery selectors written by Thiago Belem

0

This message is about an analysis of Chrome/Chromium about good programming practices regarding page performance. more specifically on scroll lag or code-blocking.

In most cases it refers to the passive handling of auditing of certain events triggered in Listening.

Below is an explanation: https://www.chromestatus.com/feature/5745543795965952

Contains links from test pages for you to better understand the pointed behaviors.

I hope I’ve helped.

PLUS: Ligthhouse test can help you with notes on solutions.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.