Contrôle connexion sur Google Chrome

Bonjour !
Je fais ce topic car je galère depuis un moment sur un souci.
Je travaille sur une application web utilisée en interne dans mon entreprise (petite entreprise de 10 personnes environ). Celle-ci permet de rentrer des données au fur et à mesure. Elle fonctionne en MySQL/PHP, avec du Javascript. Je débute un peu dans tous ces langages (on travaillait avant sous Access, j'ai commencé le PHP il y a un an). Je n'ai pas encore vraiment commencé à toucher le JQuery et l'AJAX, mais j'ai un petit souci qui pourrait être réglé avec. Si on ne peut pas le régler maintenant, tant pis, ce n'est pas urgent et j'ai d'autres améliorations prioritaires, mais tant qu'à faire, ça aiderait un peu mes utilisateurs.
En fait, le gros défaut de mon application, c'est que mes utilisateurs sont parfois en wi-fi, ils rentrent des données dans les formulaires, mais, si pour une raison la connexion lâche, ils perdent les données (pour le moment on a toujours pu reconstruire, d'autant je "force" à sauvegarder régulièrement, mais c'est sûr que c'est pas top).
Je voudrais donc, au moment où mon utilisateur clique sur le bouton "Save" qu'un code s'exécute, contrôle si l'utilisateur est bien connecté au serveur (il s'agit d'une NAS interne à l'entreprise, l'application n'est pas sur Internet), et s'il n'est pas connecté, elle renvoie "false" afin d'annuler la soumission du formulaire (avec un message d'alerte, tout ça). A noter que pour certaines raisons, j'ai besoin de travailler sur Google Chrome (entre autres pour les échelles analogiques dont on a besoin, et dont la présentation sur internet explorer est problématique, donc en attendant que j'arrive à "créer" moi-même ces échelles, on est un peu bloqués sur ce navigateur).

Actuellement, j'ai deux méthodes pour arriver à ce résultat, mais les deux présentent un problème.

Premier cas (qui serait mon préféré s'il fonctionnait) :
Evénement onclick sur le bouton save, cette fonction s'exécute :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function ping(){ $.ajax({ url: 'ping.html', success: function(result){ // document.getElementById("btnSave").setAttribute("connexionBD", "1"); return true; }, error: function(result){ // document.getElementById("btnSave").setAttribute("connexionBD", "0"); alert('Veuillez vérifier votre connexion'); return false; } }); }

---

Donc le principe : on lance une connexion sur la page ping.html : si ça fonctionne, on est bien connecté au serveur, si ça ne fonctionne pas, on n'est pas connecté au serveur.
Alors le problème de ce code, les return ne semblent pas fonctionner, en fait, le cas success/error semble se gérer après la soumission du formulaire... J'ai testé en attribuant à mon bouton de sauvegarde une valeur "connexionBD", par défaut à 1. Vous avez les deux lignes que j'ai mis en commentaire ou connexionBD passe à 1 ou 0 en fonction de si on est connecté ou pas, et effectivement, la valeur reste à 1 même si la connexion ne se fait pas, en fait, elle passe à 0 en toute fin du code (j'ai testé en exécutant le code autre part qu'à la soumission du formulaire).
J'ai même testé de lancer une fonction maitrePing() qui elle même lancer la fonction ping(), puis faisait un alert() sur l'attribut "connexionBD", celui-ci reste toujours à 1, mais passe bien à 0 après l'exécution de de maitrePing().

Bref, à partir de là, j'ai voulu tenter une astuce, et on arrive à mon second cas :
Je lance ping() en onmouseover sur le bouton save. Du coup, l'attribut connexionBD se met à jour, puis une nouvelle fonction exécutée sur le click vérifie la valeur de connexionBD, si c'est 1, ça sauvegarde, si c'est 0 ça avertit l'utilisateur. Alors c'est pas super beau niveau programmation je trouve, mais ça marche... du moins pas toujours. Le souci étant que Chrome me garde le ping en cache j'ai l'impression. En réalité, tant qu'il repère une première fois ping.html, vu qu'après, en modifiant le nom de ping.html ou en coupant ma connexion, il soumet tout de même le formulaire sans broncher. Je peux cliquer sur save tant que je veux, il ne bronche pas, tant que je ne vide pas le cache...

J'ai cherché quelques solutions pour forcer le cache à se vider mais aucune que j'ai testées ne fonctionnait...
Voilà, j'espère avoir pu être précis sur mon souci. Je vous remercie pour votre attention, je continue à chercher des solutions de mon côté. Après que ce soit clair : si la deuxième solution est la plus simple (si vous trouvez comment empêcher le cache de garder ping.html en mémoire), ça ne me dérange absolument pas de l'appliquer même si elle est moins optimisée que la première, ça restera une solution temporaire le temps que je me mette sérieusement à AJAX.
Merci beauacoup !

Edit : En continuant à chercher, j'ai trouvé une solution qui réglait le problème de cache :
J'ai remplacé

Code:

---

url: 'ping.html',

---

par

Code:

---

url: 'ping.html?nocache="'+Math.random(),

---

Du coup le problème de cache est réglé. Je reste toujours à l'affut si quelq'un a une proposition pour le cas 1.
Merci !

Re-Edit : Bon bah au final, j'ai trouvé une autre solution. J'ai créé une fonction qui s'active à l'ouverture de ma page et qui contrôle si on est connecté tous les dixièmes de second et qui met à jour la propriété connectionbd en fonction. Lors du clic sur le bouton "save", la propriété est contrôlée et permet ou non la sauvegarde. Voilà, c'est pas idéal dans la mesure où ça sollicite sans arrêt le serveur, mais même sans grande connaissance en trafic, je doute que 10 pings par seconde posent un gros souci à notre réseau même si on est une dizaine de connectés. En fait le point qui me "chagrine" le plus dans cette solution et qu'il nécessite de placer deux fonctions (à l'ouverture et à la sauvegarde), alors qu'il est sûrement possible de n'en utiliser qu'une (à la sauvegarde).

Ouh lala !
Il en faut du courage pour lire ton roman :-)
Premièrement, tu mélanges du javascript pur avec du jQuery
Pour jQuery, on remplace

Code:

---

document.getElementById("btnSave").setAttribute("connexionBD", "1");

---

Par

Code:

---

$("#btnSave").attr("connexionBD", "1");

---

Théoriquement ton attribut connexionBD devrait être data-connexionBD, c'est plus dans les recommandations W3C.

Bon passons, ceci n'est qu'un détail.

Lancer une requête ajax tous les 10ièmes de secondes tu pousses le bouchons un peu loin Maurice.
D'autant plus que le serveur doit être sollicité full-time (Ajax est asynchrone d'où son nom). A mon avis, tu vas planter le serveur apache (faudrait faire le calcul).

Pour ton cas, la partie la plus importante est que l'utilisateur ne perde pas la saisie de son formulaire si j'ai bien compris.

Laisse ton serveur tranquille et sauvegarde la saisie dans le localstorage avant de poster tes données.
Si la connexion n'est pas active (appel de ta page ping par exemple via ajax), tu affiches ta page index et tu remplis ton formulaire avec les données du localstorage.

C'est ce que je ferais

Oui le localstorage est la solution la plus appropriée dans ce cas. Cela permettrait de sauvegarder les données rentrées sur le navigateur client si le serveur n'est pas disponible et de repeupler les champs du formulaire pour un nouvel affichage tant que la requête de mise à jour n'est pas effectuée.

Au passage, ce n'est pas un problème de mélanger du javascript pur (on dit souvent "vanilla") avec du jQuery, et heureusement car toutes les fonctions javascript n'ont pas leur équivalent dans jQuery. Après dans certains cas comme dans ton exemple on gagne en concision avec la syntaxe jQuery donc autant utiliser les fonctionnalités de jQuery si on l'utilise par ailleurs, mais ce n'est pas une obligation. Je précise cela pour les débutants qui se demandent parfois comment résoudre tel ou tel problème avec jQuery... Il ne faut pas laisser penser qu'on utilise javascript ou jQuery, la plupart des scripts utilisent l'un et l'autre conjointement.

Bonjour et merci pour vos réponses !
Alors avant toutes choses désolé pour le temps que j'ai mis à vous répondre, je viens tout juste de rentrer de vacances et je ne pensais plus que ce topic recevrait une réponse ^^'

Pour le Localstorage, j'ignorais complètement cette possibilité. Je vais me renseigner sur tout ça, mais effectivement, du peu que je viens de lire, ça me paraît être la solution la plus adaptée à mon problème !

Par contre, pour la solution que j'ai mise en place (les 10 pings par seconde), ça fonctionne sans faire crasher le serveur, on l'a déjà testé. Après, c'est sûr que le fait de bosser dans une structure de 10 personnes aide à ce niveau, j'imagine que sur une plus grande entreprise, j'aurais effectivement eu des soucis. Mais de toutes façons, même si ça fonctionne, c'est toujours mieux d'opter pour une solution plus propre et moins gourmande^^

Merci beaucoup !

Citation:

---

Envoyé par Karehaus

Mais de toutes façons, même si ça fonctionne, c'est toujours mieux d'opter pour une solution plus propre et moins gourmande^^

---

Oui surtout que c'est un exercice intéressant que tu pourras reprendre/améliorer et utiliser éventuellement dans d'autres contextes. Là pour l'instant tu as juste créé un exemple de code à ne pas faire ;)