File: public/index.php

Recommend this page to a friend!
  Classes of Joseluis Laso  >  Asynchronous Long Server Tasks  >  public/index.php  >  Download  
File: public/index.php
Role: Example script
Content type: text/plain
Description: Example script
Class: Asynchronous Long Server Tasks
Start background tasks and query progress status
Author: By
Last change:
Date: 5 years ago
Size: 2,962 bytes
 

Contents

Class file image Download
<html>

<head>

    <style>
        body{
            height: 100%;
            width: 100%;
            background: lightcyan repeat;
            margin: 0;
            padding: 0;
        }
        #container{
            position: relative;
            width: 100%;
            height: 50%;
        }
        #content{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #status{
            position: fixed;
            overflow: auto;
            height: 50%;
            bottom: 0;
            width: 100%;
            border: 1px solid black;
            padding: 0;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>

<div id="container">
    <div id="content">
        <input id="start-task" type="button" value="Start task" task="1">
    </div>
</div>

<div id="status">

</div>

</body>

<script>

    function logMessage(message){
        if ($("#status").html().length > 1000) {
            $("#status").html(message+"<br/>");
        }else{
            $("#status").append(message+"<br/>");
        }

    }

    function pollingStatus()
    {
        $.ajax({
            url: '/status-task.php',
            data: { id: id },
            type: 'POST',
            success: function(data){
                if (data.result){
                    logMessage("task "+data.id+" "+data.status);
                    if (data.status == "done"){
                        clearInterval(interval);
                        alert("The process is done, you can refresh the win")
                    }
                }else{
                    logMessage(data.reason);
                }
            },
            error: function(){
                alert("something wrong was happened");
            }
        });
    }

    var interval = 0;
    var id = 0;

    $(function(){
        logMessage("Welcome to asynchronous server side task demo");

        $("#start-task").click(function(e){
            e.preventDefault();

            id = $("#start-task").attr("task");
            $.ajax({
                url: '/start-task.php',
                data: {
                    id: id,
                    _task: "task"
                },
                type: 'POST',
                success: function(data){
                    //logMessage(data);
                    if (data.result){
                        logMessage("task "+data.id+" added to the system, will be executed soon!");
                        interval = setInterval(pollingStatus, 1000);
                    }else{
                        logMessage(data.reason);
                    }
                },
                error: function(){
                    alert("something wrong was happened");
                }
            });

            return false;
        })
    })
</script>

</html>


For more information send a message to info at phpclasses dot org.