Come creare un loading dialog in DHTMLX

Mattepuffo's logo
Come creare un loading dialog in DHTMLX

Come creare un loading dialog in DHTMLX

Programmazione, Javascript - AJAX

Sto iniziando a "giocare" con DHTMLX, e lo trovo molto interessante; ho deciso di usarlo per un gestionale online!

La prima cosa che sto mettendo in piedi è la pagina di login.

Quindi abbiamo il nostro form con username e password, e la chiamata atramite AJAX allo script PHP che si occuperà del login.

Per ora PHP si occupa solo di restituire i dati mandati iin POST:

var_dump($_POST);

Quello che mi interessa di più, è come visualizzare un loading dialog al momento che inviamo la richiesta AJAX; trovo che, nel caso di AJAX, i loading dialog siano molto importanti per far capire all'utente cosa stia accadendo.

DHTMLX ci mette a disposizione una Progress Bar da attaccare ad un componente.

Vediamo come mettere tutto insieme:

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" type="text/css" href="dthmlx/codebase/fonts/font_roboto/roboto.css">
        <link rel="stylesheet" type="text/css" href="dthmlx/codebase/dhtmlx.css">
        <script src="dthmlx/codebase/dhtmlx.js"></script>
        <style>
            #layout_login {
                margin: 10px auto;
                width: 600px;
                height: 400px;
            }
        </style>
        <script>
            var myLayout;
            var formData;
            function doOnLoad() {
                myLayout = new dhtmlXLayoutObject("layout_login", "1C");
                myLayout.cells("a").setText("Login");
                formData = [
                    {type: "settings", position: "label-left", labelWidth: 90, inputWidth: 130},
                    {type: "block", width: "auto", offsetTop: 80, offsetLeft: 150, list: [
                            {type: "settings", position: "label-left", labelWidth: 80, inputWidth: 130},
                            {type: "input", label: "Username", value: "", labelAlign: "center", name: "username", required: true},
                            {type: "password", label: "Password", value: "", labelAlign: "center", name: "password", offsetTop: "20", required: true}
                        ]},
                    {type: "block", width: "auto", offsetTop: 30, offsetLeft: 150, list: [
                            {type: "settings", position: "label-left", labelWidth: 80, inputWidth: 130},
                            {type: "button", label: "New Input", value: "Login", name: "btn_login"}
                        ]}
                ];
                myLayout.cells("a").attachForm(formData).attachEvent("onButtonClick", function (id) {
                    myLayout.cells("a").progressOn();
                    this.send("ajax/login.php", function (loader, response) {
                        console.log(response);
                        myLayout.cells("a").progressOff();
                    });
                });
            }
        </script>
    </head>
    <body onload="doOnLoad();">
        <div id="layout_login"></div>
    </body>
</html>

Come vedete, creiamo il nostro form e lo mettiamo nel layout.

Poi, quando intercettiamo l'evento onButtonClick, lanciamo il dialog:

myLayout.cells("a").progressOn();

Alla fine della risposta del server, lo spegniamo:

myLayout.cells("a").progressOff();

Abbastanza lineare direi!

Enjoy!

Condividi

Commentami!