Installer with autoscoll

Question

Good morning. I’m creating an updater and I need to make every $rs run the scroll go down.

What is currently happening?

It’s a white screen, but it’s running, and when it’s over it’s all at once.

What would you like:

That you run each $rs, showing his echo and the scoll descends automatically when there are many lines.

My current code

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).scrollTop($(document).height());
})
</script>

<div id="mostrar1"> Aguarde, atualizando banco de dados, não feche</div>

<?php
include("../conexao/conexao.php");

    $rs1 = $mysqli->query("UPDATE ...;");
    if (!$rs1) {echo "<font color=\"#CC0000\"> - Versão do site<br>";}else {echo "<font color=\"#00CC00\"> - Versão do site. Sucesso!</font><br>";}
    sleep(2);


    $rs2 = $mysqli->query("INSERT .... ;");
    if (!$rs2) {echo "<font color=\"#CC0000\"> - Insert erro<br>";}else {echo "<font color=\"#00CC00\"> - Insert sucesso!</font><br>";}
    sleep(2);

    .
    .
    .




    unlink("updateSQL_v423.php");
?>


<div id="mostrar2" class="display:none;"> Pronto! Banco de dados atualizado. APERTE F5, para recarregar a tela.</div>




<script type="text/javascript">
$(function(){
    $('#mostrar2').show();
    $('#mostrar1').hide();
})
</script>

Answer 1

You can make a php backend have this return, since PHP returns only when everything is ready..

Follow the suggestion:

var retorno = $('.retorno')
$('[botao]').on('click', function(){
     const aguarde = $('<p>Aguarde enquanto processamos seu pedido ...</p>')
     retorno.append( aguarde )
     setTimeout(()=>{
        update()
     },500)
     
})

function update(){
     const update = $('<p style="color=\"#CC0000\"">- Versão do site</p>')
     retorno.append( update )
     setTimeout(()=>{
       insert()
     }, 1500)
   
     
}


function insert(){
     const update = $('<p style="font color=\"#CC0000\"">- Insert erro</p>')
     retorno.append( update )
     setTimeout(()=>{
       done()
     }, 1500)
    
     
}

function done(){
     const update = $('<p> Pronto! Banco de dados atualizado. APERTE F5, para recarregar a tela</p>')
     retorno.append( update )
}

  
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
  <div class="retorno">
  </div>
  <button botao>Clique</button>
  

Javascript functions:

In the function case update would be so:

function update(){
   $.ajax({
      url: 'seuArquivo.php',
      type: 'post',
      dataType: 'json',
      data: {
        id: 1,
        nome: 'Sei la',
        opcao: 'update'
      }
   }).done( result => {
       const update = $('<p style="color=\"#CC0000\"">'+ result.msg +'</p>')
       retorno.append( update )
       inserir()
   })
}

function inserir(){
   $.ajax({
      url: 'seuArquivo.php',
      type: 'post',
      dataType: 'json',
      data: {
        nome: 'Dado a inserir',
        opcao: 'inserir'
      }
   }).done( result => {
       const insert = $('<p style="color=\"#CC0000\"">'+ result.version +'</p>')
       retorno.append( insert )

       const done = $('<p> Pronto! Banco de dados atualizado. APERTE F5, para recarregar a tela</p>')
        retorno.append( done )
   })
}

In php yourqui.php

$_opcao = $_POST['opcao']

switch($_opcao){
  case 'update':
      //Faça suas operações e retorne com echo json_encode
      $version = array('version' => '- Versão do site')
      echo json_encode( $version )
  break;
  case 'inserir':
     //Faça suas operações e retorne com echo json_encode
      $version = array('version' => 'Inserir result')
      echo json_encode( $version );
   break;
}

So that’s the suggestion.