How to update the screen/website only when there is a network connection?

Question

I'm trying to set up a display screen for the floor info which is a simple web page. The ajax call is for updating the screen every 10 seconds according to the admin page which the client is using for updating the info.

My problem is when there is no internet connection, the display would still be updated and shows nothing. Is there any way I can alter the code below to say if there is an internet connection then update the database, if there no network connection then reset the timer and do nothing.

    <script type="text/javascript">

        // Run the AJAX call to grab the data once
        $.ajax({
                type: "POST",       
                url: "ajax/getMessages.php?section=1", 
                data: "",
                 complete: function(data){  
                //print result in targetDiv  
                $('#content_1').html(data.responseText);  
                } 
            });

        // Then run the same script on a 10-second timer
        setInterval(function(){

            $.ajax({
                type: "POST",   
                url: "ajax/getMessages.php?section=1", 
                data: "",
                 complete: function(data){  
                //print result in targetDiv  
                $('#content_1').html(data.responseText);  
                } 
            });

        },10000);

    </script>

Bojangles · Answer 1 · 2011-10-09T20:13:16.517

2

There are probably other ways to do it, but this will work: check whether data.responseText has anything in it:

if(data.responseText.length)
{
    // Display page
}

In your complete: function, like so:

complete: function(data){ 
    if(data.responseText)
    {
        $('#content_1').html(data.responseText);  
    }
}

A better way to do this would be to use success: instead of complete:, as the former is only fired if the AJAX request completes successfully, meaning you don't have to check for data.length.

// Run the AJAX call to grab the data once
$.ajax({
    type: "POST",      
    url: "ajax/getMessages.php?section=1", 
    data: "",
    success: function(data) {  
        // Print result in targetDiv  
        $('#content_1').html(data.responseText);  
    },
    error: function() {
        // Error handling code
    }
});

// Then run the same script on a 10-second timer
setInterval(function() {
    $.ajax({
        type: "POST",      
        url: "ajax/getMessages.php?section=1", 
        data: "",
        success: function(data) {  
            // Print result in targetDiv  
            $('#content_1').html(data.responseText);  
        },
        error: function() {
            // Error handling code
        }
    });
}, 10000);

edited Oct 09 '11 at 20:13

answered Oct 09 '11 at 19:53

Bojangles

99,427
50
170
208

Hi JamWaffles, I'm new to this, where shall I place your code? it would be great you can show me with my existing code above. Thank you for your help. – grumpypanda Oct 09 '11 at 20:09
Please see my edits. You need to add that `if()` into your `complete:` function. – Bojangles Oct 09 '11 at 20:13
Hi JamWaffles, thank you very much for your detailed explanation. I put if(data.responseText) in, it worked, but when I tried your second suggestion, I changed the complete function into success, the display disappears entirely, I'm not exactly sure why? What would be the disadvantages to use if(data.responseText)? Also I tried Hakre's code, it seems ok. I really appreciate your help! – grumpypanda Oct 09 '11 at 21:24
I'm not quite sure why it wouldn't work. Using the if() is fine, of course. – Bojangles Oct 09 '11 at 22:20

hakre · Accepted Answer · 2011-10-09T20:16:37.577

1

You can use the textStatus from complete(jqXHR, textStatus) which will be any of the following: "success", "notmodified", "error", "timeout", "abort", or "parsererror".

        $.ajax({
            type: "POST",   
            url: "ajax/getMessages.php?section=1", 
            data: "",
            complete: function(data, textStatus)
            {
              //print result in targetDiv if successfull
              if (textStatus == 'success')
              {
                  $('#content_1').html( + ': ' + data.responseText);
              }
            } 
        });

See http://api.jquery.com/jQuery.ajax/

edited Oct 09 '11 at 20:16

answered Oct 09 '11 at 19:54

hakre

193,403
52
435
836

Hi Hakre, I'm a newbie to ajax, would you be able to give me some examples within my code? Thank you very much. In the mean time, I will try to learn at your link. Thanks! – grumpypanda Oct 09 '11 at 20:12
@SamIAm: I have added the `textStatus` to your example function code in my answer. This should give you some pointers to solve your problem. – hakre Oct 09 '11 at 20:17
Hi Hakre, thanks very much for your help. I added complete: function(data, textStatus) { if (textStatus == 'success') to the second part of the updating 10 seconds code, it didn't work, but when I put the code in both parts of my ajax calls which are grab data and update 10 seconds, it seems to be working. Do I have to keep the constancy for both parts? Thank you very much! it is great to see it working:) – grumpypanda Oct 09 '11 at 21:29
@SamIAm: You need to place that into the both callbacks, sure. Another alternative is that you write one callback function and assign it to the two events. Or you even replace the duplicate code with one function so you don't have duplicated the code. Don't duplicate code, always prevent duplicating code. Less code, less stuff to debug. Easier to code :) – hakre Oct 10 '11 at 08:18

score 0 · Answer 3 · answered Oct 09 '11 at 19:55

0

var timer = setInterval(function(){
        $.ajax({
            type: "POST",                           
            url: "ajax/getMessages.php?section=1", 
            data: "",
            success: function(data){  
             //print result in targetDiv  
             $('#content_1').html(data.responseText);  
            },
            error: function(){ clearInterval( timer ) } 
        });

    },10000);

answered Oct 09 '11 at 19:55

aziz punjani

25,586
9
47
56

Hi Interstellar_Coder, thanks very much for your reply. I tried your code but it didn't work. The floor info still disappears when there is no connection. Any other suggestions? I'm new to this, so any help is appreciated. – grumpypanda Oct 09 '11 at 20:06

How to update the screen/website only when there is a network connection?

3 Answers3