Comment détecter le périphérique pour la connexion internet en jQuery Mobile

Je suis la création de cette simple page web mobile pour une enquête à l'aide de HTML5, CSS3, jQuery Mobile, jQuery UI, ASP.NET, C# et quelques Plugins jQuery. L'une des exigences est de montrer un pop-up/dialogue (alerte javascript ou jQuery mobile dialogue ou mieux, si c'est un jQuery UI dialog) qui informera l'utilisateur chaque fois qu'il n'y a pas de connexion internet à l'appareil (plus précisément Android). Actuellement, j'ai ce code:

<link rel="stylesheet" href="../Scripts/jqueryui/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="../Scripts/jquery.mobile-1.1.0.css" />
<script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="../Scripts/jqueryui/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
    var online = window.navigator.onLine;
    if (!online) {
        alert('Please check your internet connection and try again.');
    }
    function checkInternet() {
        var online = window.navigator.onLine;
        if (!online) {
            alert('Please check your internet connection and try again.');
        }
    }
</script>

puis-je mettre le code JavaScript de la fonction sur la forme de l'événement onsubmit:

<form id="frmSurvey" runat="server" class="validate" onsubmit="checkInternet()">

Ça fonctionne quand je l'ai vue sur un ordinateur de bureau/PC navigateur mais ne fonctionne pas sur mobile. Le jQuery Mobile erreur de chargement de la page.

Depuis, ce n'est pas à l'exigence de j'ai modifié le jQuery Mobile fichier commenté l'erreur au chargement de la page partie du message et il ne semble pas plus. J'ai essayé Google-ing beaucoup de recherche pour tous les sujets liés mais ne trouve pas tout.

Je suis vraiment un moment difficile de rendre cela possible. S'il vous plaît aidez-moi les gars!

Merci d'avance!

Comment êtes-vous tester cela sur un appareil mobile (est-il hébergé quelque part, copiés sur votre appareil?)
En fait, il est hébergé.

OriginalL'auteur joecoder | 2013-05-03

  1. 10

    Il y a peu de solutions suite à votre besoin.

    Solution 1

    Cette solution nécessite jQuery et parce que vous êtes à l'aide de jQuery Mobile, il fonctionne comme un charme.

    $.ajaxSetup({
    timeout: 1, //Microseconds, for the laughs.  Guaranteed timeout.
    error: function(request, status, maybe_an_exception_object) {
        if(status == 'timeout')
            alert("Internet connection is down!");
    }
});

    Pour plus d'infos, jetez un oeil à cette documentation officielle sur ajaxSetup.

    Solution 2

    C'est un peu difficile car il dépend de la mise en oeuvre navigateur HTML5.

    Fondamentalement, vous avez besoin de vérifier si cette valeur est true ou false:

    fenêtre.navigator.en ligne, il sera faux si l'utilisateur est hors-ligne.

    De travail exemple: http://jsfiddle.net/Gajotres/VXWGG/1/

    Testé sur:

    • Windows Firefox

    • Windows Google Chrome

    • Windows IE9 et IE10

    • Android 4.1.1 Chrome

    • iPad 3 Safari

    • iPad3 Chrome

    Selon ceci, ceci et ceci, navigator.onLine, bien que faisant partie de HTML5, est correctement pris en charge uniquement dans google Chrome, et basé sur WebKit navigateurs! Les autres navigateurs retourne true toujours ou -- retour true quand Work Offline mode est désactivé et false lorsqu'elle est activée, indépendamment de la connectivité réelle.
    J'ai veryfied ce, à l'aide de un simple jsFiddle exemple, que j'ai trouvé (pas le mien). Il fonctionne très bien sur Chrome, échoue complètement (revenant toujours true puisque je n'ai pas activé Work Offline) dans Firefox. Je ne sais pas si cela fonctionne dans IE, parce que... c'est comme un pauvre mendiant, sur toute jsFiddle page (lame, lame, navigateur)! :]
    Remarque, la documentation de ajaxSetup actuellement états ", nous vous déconseillons fortement l'utilisation de cette API".

    OriginalL'auteur Gajotres