Update data in Real-time without refresh in Blade - Laravel

Question

I would like to know how and what is the best way to update data in real time on a screen using Laravel. The situation is as follows: I will have a (edit) screen, which displays the items already included on this screen, but you will have the option to add one more item. After adding need to update the data from the screen (or div), without reloading the page. Example:

<div id="lista-servicos">
@foreach($servicos as $servico)
    <div class="servicos">
        <div class="servico-nome">{{ $servico->nome }}</div>
        <div class="valor-total"><span>R$</span>
          <span>{{$servico->valor</span>
        </div>
    </div>
@endforeach
</div>
<a class="btn" id="adicionar-servico">Adicionar Serviços</a>

If you are clicked on add services, and add one more... need to upgrade $servicos. How to do this?

Answer 1

From what I understand you want the user to select a single service at a time and the application to add to the list the service asynchronously, right? You can create a route that returns the service, consume asynchronously and then create the Divs with JS.

For example create a route that returns a json with the services:

/service/5

This Route must return something like this

{ "name":"servico5" "value":"10.0" }

So if you are using Jquery you can do the following with Response:

const div_servicos = $("<div class="servicos"></div>");
div_servicos.append(`<div class="servico-nome">${response.nome}</div>`);
div_servicos.append(`<div class="valor-total"><span>R$</span><span>${servico.valor}</span></div>`);
$("#lista-servicos").append(div_servicos);