detecting and announcing loss of internet connection

[brainwater]

I have a customer that is using a tablet with a mobile phone data connection
if they loose their connection, the grid remains active (they do anything that does not require a callback)
but if they try to save, nothing happens
I have an auto refresh on the grid and it continues to fire, but nothing happens
I need a way to pop up a message that the internet connection is lost

[kingcarol]

Re: detecting and announcing loss of internet connection

That would be a very cool thing to have. I have a customer who has a wireless connection that is spotty, and they keep calling me because things start to act funny when they lose connection. Like... some lookup fields that do an ajax callback to populate list are suddenly empty, etc., etc..... Would be great if there was a way to detect if the connection is there before any ajax callback and pop up a message if its not.

I wonder if the client side event beforeAjaxCallback can be used to call a function that tries to connect and pops up a message if it cannot.

[kingcarol]

Re: detecting and announcing loss of internet connection

It would be better, of course, if Alpha had something built in to do that so we wouldn't have to remember to do it on every component. Then at the top of the Properties for the grid under the 'Ajax' section, they could have a property like 'Warn if Connection is Lost' that we can turn on or off based on our preference.

[LukeS]

Re: detecting and announcing loss of internet connection

I handle this two ways. I have a grid for users to use in low connection areas that shows all the data they need to edit on one page, which can sometimes be up to 400 records. It does not have any features that use callbacks except for save. I then have a multi-page grid for use with more stable connections. On both grids I display a message to the user when saving to let them know a save is in progress. I put a DIV in the free form edit region under the grid that has a CSS3 spinner animation that says saving, when the user clicks submit \ save the canGridSubmit client side event fires with the following code:

jQuery('#DIVsubmitMsg').show('fast');

This message is hidden after the grid is submitted with the afterGridSubmit event

jQuery('#DIVsubmitMsg').hide('fast');

Here is the code in the free form edit region

<div id="DIVsubmitMsg" style="display: none">
 <div class="labeled">
    <div class="spinner">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
      <div class="bar7"></div>
      <div class="bar8"></div>
      <div class="bar9"></div>
      <div class="bar10"></div>
      <div class="bar11"></div>
      <div class="bar12"></div>
    </div>
    <strong>Please wait, your order is being saved&hellip;</strong>
  </div>
<br />
If this message does not go away in a few seconds there is an issue with your internet connection.&nbsp;
Please go to another location and re-press the "save" button.<br /><br /></div>

Here is the CSS code I store in a separate CSS file

/* Spinner
http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
http://s3.amazonaws.com/37assets/svn/461-spinner.html
http://s3.amazonaws.com/37assets/svn/463-single_spinner.html
*/

div.spinner {
      position: relative;
      width: 100px;
      height: 100px;
      display: inline-block;
    }
    
    div.spinner div {
      width: 12%;
      height: 26%;
      background: #000;
      position: absolute;
      left: 44.5%;
      top: 37%;
      opacity: 0;
      -webkit-animation: fade 1s linear infinite;
      -webkit-border-radius: 50px;
      -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    }
    
    div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}    
    div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
    div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
    div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
    div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
    div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
    div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
    div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
    div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
    div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
    div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
    div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}

     @-webkit-keyframes fade {
      from {opacity: 1;}
      to {opacity: 0.25;}
    }
    
    /* end basic spinner styles*/
    
    div.container {
      display: inline-block;
      padding: 1.5em 1.5em 1.25em;
      background: rgba(0,0,0,0.8);
      -webkit-box-shadow: 1px 1px 1px #fff;
      -webkit-border-radius: 1em;
      margin: 1em;
    }
    
    div.container.grey {background: rgba(0,0,0,0.2);}    
    div.container.grey.blue {background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0a2744), color-stop(1, #064483));}
    
    div.container div.spinner {
      width: 28px;
      height: 28px;
    }
    
    div.container.grey div.spinner {
      width: 60px;
      height: 60px;
    }
    
    div.container div.spinner div {background: #fff;}
    
    div.labeled {
      font-family: sans-serif;
      font-size: 14px;
      margin: 0 auto;
      background: #fff;
      padding: 0.5em 0.75em 0.5em 0.5em;
      display: inline-block;
      color: #c00;
      line-height: 25px;
      -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
      -webkit-border-radius: 1em;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ccc));
    }
    
    div.labeled div.spinner {
      float: left;
      vertical-align: middle;
      width: 25px;
      height: 25px;
      margin-right: 0.5em;
    }
    
    div.labeled div.spinner div {background: #c00;}

[agillbb]

Re: detecting and announcing loss of internet connection

Luke,
That's cool - you should post a screen shot of how that looks.

Another approach is to write a script to use the xbasic ping function via regular (scheduled via javascript) callbacks if you wanted a regular feedback displayed in a DIV:
http://wiki.alphasoftware.com/Ping+Function

If you don't have an autorefresh set up already, then this may work (I've never tested the approach).
http://www.9lessons.info/2009/07/aut...onds-with.html

Sorry about the vagueness, just ideas....

[LukeS]

Re: detecting and announcing loss of internet connection

Luke,
That's cool - you should post a screen shot of how that looks.

Here is a screen shot of what it looks like, the spinner is animated too..

saving_message.PNG

Another approach is to write a script to use the xbasic ping function via regular (scheduled via javascript) callbacks if you wanted a regular feedback displayed in a DIV:
http://wiki.alphasoftware.com/Ping+Function

I like the ping idea, I would use jQuery callback instead of A5 callback as the A5 callback is bigger and slower. The ping xbasic function would not work though as it is server-side not client-side. In the callback you could just have it call a a5w page that returns true. If the callback timesout you know there is a connectivity problem. JQuery allows you to set a timeout in the ajax callback so if the jQuery ajax callback timesout you could show a warning message in a DIV.

[Lenny Forziati]

Re: detecting and announcing loss of internet connection

An Xbasic ping would test the server's connection from it to some specified destination, which is not what you need. If you can make any callback at all to the server, and it succeeds, it is pretty safe to assume the client's connection to the server is active.

[agillbb]

Re: detecting and announcing loss of internet connection

good point....ignore the ping comment....unless you are testing a connection to Google maps or something on the "outside".