Displaying a loading spinner for 'Scanning' and 'Rebooting' process in the web application using pure Javascript

Question

I am developing a web application for a router, and I have two buttons, Scan and Reboot in two different pages . The function for scan is to scan all the connected devices and displaying ( using php ), and that for Reboot is to reboot the whole system. I am using openwrt.

I am planning to use a scanning spinner and a rebooting spinner in these pages while it is doing these processes. I got this reference and I tried this but I guess it is not working for the scan and reboot.

So Is there a way to make this work using pure JS. (I got images from this link)

EDIT
Here is my code for reboot page

JS

function spin(){
window.onload=document.getElementById("loading").style.display = "none";  
}

CSS

#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}

HTML PHP

<body onload="spin();">
<div id="loading">
<img id="loading-image" src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt="Loading..." />
</div> 

<form name="reboot" style="height: 56px;" action="reboot.php" method="post">

<input type="submit" name="reboot" value="Reboot">

</form>

<?php
if (isset($_POST['reboot']))
    shell_exec("reboot");
?>

`Is there a way to make this work with pure JS?` Yes. `Can we tell you how to change your code to make it work, without seeing your code?` No. — enhzflep, Nov 23 '13 at 06:45
yes indeed, I've got other more important (to me) things to do. I've seen your response and update. After I've finished considering just how to respond, I'll do so. :) — enhzflep, Nov 23 '13 at 07:58

score 0 · Answer 1 · answered Nov 23 '13 at 08:33

Okay then, lets see now. Where to start?

A number of issues seem apparent to me when I review your method of achieving the task.

1. - you never actually do anything to make the image visible.

2. - you use both window.onload and body.onload

3. - you use the CSS to make the image visible, yet by default, use Javascript to then immediately hide it again. A better option would be to hide it with the css, using the javascript to show it only if that's the appropriate action.

4. - When you click the button, you ask for the same file again - passing Reboot=reboot as a POST parameter. This is all fine and good. But begs the question - how will you then indiate that the reboot has completed? You just get left with a page that says "loading" - it seems rather confusing.

I'm too tired to even consider thinking about a better way to approah the problem. There's likely several solutions to the problem already available. I suspect that using ajax to periodically poll the server, waiting for any response would be a reasonable way to see when the router is online again. I've only provided a means by which you can show the image if the page is loaded as a result of pressing the button.

reboot.php

<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
#loadingDiv
{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: none; 
    z-index: 99
}

#loading-image
{
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 100
}
</style>
</head>
<body>
<div id="loadingDiv">
    <img id="loading-image" src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt="Loading..." />
</div> 

<form name="rebootForm" style="height: 56px;" action="reboot.php" method="post">
    <input type="submit" name="reboot" value="Reboot"/>
</form>

<?php
    if (isset($_POST['reboot']))
        {
            shell_exec("reboot");
            echo "<script>document.getElementById('loadingDiv').style.display = 'block';</script>";
        }
?>
</body>
</html>

yes Sir, this is working exactly as you mentioned.. So there is no way to make it stop when router comes back to online by using pure JS or php? am I right? — Messi L, Nov 23 '13 at 10:55
@MessiL - Well, as I mentioned - you may wish to try using ajax. If you send out a request you can check the status of the response. If it indicates a failure due to an unreachable host then you know the router is still rebooting. Of course, if this is for a play-project, using a single hardware device then you basically know how long it takes to reboot. In that case, you could use setTimeout to wait for a period longer than this time, before setting `.style.display` to `'none'`. Someone else can/will give you a better answer than me. :) — enhzflep, Nov 23 '13 at 11:02

Displaying a loading spinner for 'Scanning' and 'Rebooting' process in the web application using pure Javascript

1 Answers1