Is it possible to update data without having to reload the page?

Question

Is it possible to update data without having to reload the page?

Navigation

#1 by (0 votes)

0

Well, in a few words I bring data by AJAX and at the same time I create and remove data from the page as the user interacts with it. The problem is that I am trying to segment data but this has become too problematic since I do not know in which part of the code I am having problems.

In this picture I show what is created on the page

This is the code or rather the function that is executed when making an onchange in the combobox.

Each time I assign users, the lower box is removed with all the users and it is returned with AJAX , therefore it is the data that is in the database at the time of the query. But I would like not to have to do another interaction for AJAX rather I would like to just hide the results that are not equal to the combobox.

javascript jquery ajax

asked by felipe andrade 29.01.2018 в 16:39

source

1 answer

create a custom laravel 5.5 login Enable search engine, import and export Excel buttons in Admin Django

score 0 · Answer 1

If the data you consume is always the same and few, it is quite simple using Array.filter () , In summary, rather than changing a visible property it is probably more practical to draw the elements of the container according to the filter, I'll give you an example:

let personas = [
  { nombre: 'fulanito 1', rol: 'jefe' },
  { nombre: 'fulanito 2', rol: 'subjefe' },
  { nombre: 'fulanito 3', rol: 'empleado' },
  { nombre: 'fulanito 4', rol: 'empleado' },
  { nombre: 'fulanito 5', rol: 'empleado' },
  { nombre: 'fulanito 6', rol: 'subjefe' },
  { nombre: 'fulanito 7', rol: 'empleado' },
  { nombre: 'fulanito 8', rol: 'empleado' },
  { nombre: 'fulanito 9', rol: 'empleado' },
  { nombre: 'fulanito 10', rol: 'jefe' },
  { nombre: 'fulanito 11', rol: 'empleado' },
  { nombre: 'fulanito 12', rol: 'subjefe' },
  { nombre: 'fulanito 13', rol: 'empleado' },
  { nombre: 'fulanito 14', rol: 'empleado' },
];


function filtrarPersonas() {
  let _personas = personas.filter(p => p.rol == $('#filtro').val());
  let content = "";
  _personas.forEach(p => {
    content += '<li>${p.nombre}</li>';
  });
  $("#personas").html(content);
}


$(document).ready(() => {
  filtrarPersonas();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id="filtro" onchange="filtrarPersonas()">
  <option value="jefe">jefe</option>  
  <option value="empleado">empleado</option>
  <option value="subjefe">subjefe</option>
</select>

<ul id="personas"></ul>