Vérification de la connexion Internet avant la soumission du formulaire

Question

Je suis novice en matière de technologies web, ce qui m'a rendu la plupart du temps difficile. Ce que j'essaie d'obtenir, c'est que lorsqu'un formulaire est soumis, il doit d'abord vérifier les éléments suivants connexion internet avant de faire un Ajax appeler.

J'ai essayé d'utiliser navigateur.onLine de cette façon :

if(navigator.onLine == true) {
    //code comes here
} else {
    alert('Internet connection is lost');
    $('#error').append("No internet connection. We could not submit the form");
}

Quelqu'un peut-il me montrer comment modifier mon code pour répondre à mes besoins ?

$('document').ready(function(){ 
    /* validation */
    $("#licence-form").validate({
        rules:
        { 
            licence: {
                required: true
            },
        },
        messages:
        {
            licence:{
                required: "License key is required"
            },

        },
        submitHandler: licenceForm  
    });  
    /* validation */

    /* submit */
    function licenceForm()
    {       
        var data = $("#licence-form").serialize();

        $.ajax({

            type : 'POST',
            url  : '../includes/b0a012.php',
            data : data,
            beforeSend: function()
            {   
                $("#error").fadeOut();
                $("#btn-login").html('Validating...');
            },
            success :  function(response)
                {                       
                if(response=="yes"){
                    $(".hideit").hide();
                    $(".shows").show();   
                    setTimeout(' window.location.href = "../setup.php"; ',4000);
                }else{      
                    $("#error").fadeIn(1000, function(){                        
                        $("#error").html('<div class="alert alert-danger text-center"> <img src="../images/attention.png" width="45" height="40" /> <br/> '+response+'</div>');
                    });

                }
            }
        });
        return false;
    }
});

Answer 1

El navigator.onLine n'est pas vraiment fiable à cette fin. Implémentations différer et l'état n'est mis à jour que lorsqu'une tentative de connexion réelle est effectuée.

Au lieu de cela, ajoutez un error au gestionnaire $.ajax objet paramètre :

error:  function(xhr, status, error) {
    $(".hideit").hide();
    $(".shows").show();    
    $("#error").fadeIn(1000, function(){                      
          $("#error").html('<div class="alert alert-danger text-center"> <img src="../images/attention.png" width="45" height="40" /> <br/> '+status+' ' + error + '</div>');
    });
}

Answer 2

Navigator.onLine fonctionne différemment selon les navigateurs ; essayez de vérifier la connexion Internet en envoyant une demande GET au serveur, ce qui vous permettra de vous assurer de la connectivité.

    var check_connectivity = {
    is_internet_connected: function() {
        return $.get({
            url: "/app/connectivity/",
            dataType: 'text',
            cache: false
        });
    },
    ...
};

maintenant

check_connectivity.is_internet_connected().done(function() {
   //  you are **probably** online.
   // Your form submission
}).fail(function(jqXHR, textStatus, errorThrown) {
    //Something went wrong. You may be offline.
});