PHP repeating commands

Question

Hey, guys, all right?

I’m having a problem that I can’t find the solution to, I’ve already done some research, but nothing

a few days ago I created a question here, about how to run only 1x when clicked on a button, because it was duplicating things, follow the link:

(is here from the same site) How to reset a button after being clicked? function . one

until then I kind of found a technical adjustment to "solve" my problem, but still sometimes it is doubling

the button triggers a command via AJAX

    $('#btnsalvar').click(function(){

                dados=$('#frmver').serialize();

                caminho = "../procedimentos/categorias/adicionar.php";
    

                $.ajax({
                type:"POST",
                data:dados,
                url:caminho,
                success:function(r){
                    if(r == 1){

                        $('#tabelacat').load("categorias/tabelacat.php");
                        $('#tabelasub').load("categorias/tabelasub.php");
                        alertify.success("Salvo");
                    }
                }
                });
            });

and arrives at this command

    public function adicionar($dados){
        $c = new conectar();
        $conexao=$c->conexao();

        $sql = "INSERT into categorias (tipo, categoria ) VALUES ('$dados[0]', '$dados[1]')";

        return mysqli_query($conexao, $sql);
    }

It is working "perfectly" on localhost, but online, sometimes some kind of bug that ends up inserting twice the command, as I could solve this problem?

Answer 1

You can use the plugin jQuery Loadingoverlay

https://gasparesganga.com/labs/jquery-loading-overlay/

$('#btnsalvar').click(function(){
    dados=$('#frmver').serialize();
    caminho = "../procedimentos/categorias/adicionar.php";
    $.ajax({
        type:"POST",
        data:dados,
        url:caminho,
        beforeSend:function(){
            $("#btnsalvar").LoadingOverlay("show");
        },
        success:function(r)
        {
            if(r == 1)
            {
                $("#btnsalvar").LoadingOverlay("hide");
                $('#tabelacat').load("categorias/tabelacat.php");
                $('#tabelasub').load("categorias/tabelasub.php");
                alertify.success("Salvo");
            }
        }
    });
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/loadingoverlay.min.js"></script>

Answer 2

A solution would be within the "click" you disable the working of the button and in the ajax response you rehabilitate the button. This will prevent duplicate submits.

VC can improve even more by putting for example a "spinner" on this disabled button that also induces the user to wait to complete the action he requested.