« »

Ce sera trÃ¨s facile de visualiser le type de la prÃ©sente notification, si vous utilisez GMail une environnement basÃ© sur le web. jQuery.

ï¿½tiquette: GMail, AJAX Notification, jQuery, Notification, AJAX, application

Rapport de nous cette erreur JavaScript

Demo
Agrandir
Recharger
New window

Gï¿½nï¿½rez vos vidï¿½os d'entreprise par l'IA avec la voix ou simplement du texte

Votre premiï¿½re application vidï¿½o AI GRATUITE ! Automatisez votre premiï¿½re vidï¿½o AI. Crï¿½ez votre vidï¿½o professionnelle en 5 minutes grï¿½ce ï¿½ l'IA. Aucun ï¿½quipement ni compï¿½tence en montage vidï¿½o requis. Production vidï¿½o sans effort pour les spï¿½cialistes du marketing de contenu. Application vidï¿½o AI ILLIMITï¿½E gratuite ï¿½ portï¿½e de main

If you're using Ajax, you should give hints to the user when a request to the server is being made, and you should tell him if something goes wrong. Gmail does this really well. Here's how I coded it:

First, add this to your layout:

<div id="ajaxNotifications"></div>

Add some CSS to make it purty:

#ajaxNotifications {
 position: fixed;
 top: 0px;
 right: 0px;
 background: yellow;
 text-color: black;
 padding: 5px;
 display: none;
}

Setup jQuery, jQuery UI, and your own application.js file. This syntax is for Rails, but it's similar in Python:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
 <% extras = RAILS_ENV == "development" ? "{ uncompressed: true }" : "{}" %>
 google.load("jquery", "1.3.2", <%= extras %>);
 google.load("jqueryui", "1.7.2", <%= extras %>);
</script>
<%= javascript_include_tag "application" %>

Finally, here's application.js to pull it all together:

// This is the main application object.  It follows the module pattern.
var application = function () {
 // Private functions and data go here.

 return {
   // Public functions and data go here.
   HTTP_CONFLICT: 409,

   // Show the user a quick little message.
   showAjaxNotification: function(text) {
     $("#ajaxNotifications").text(text).show();
   },

   // Hide the message.  If possible, use hideAjaxNotificationIfMatches
   // instead.
   hideAjaxNotification: function() {
     $("#ajaxNotifications").hide().text("");
   },

   // Hide the message, but only if it matches the given text.
   hideAjaxNotificationIfMatches: function(text) {
     if ($("#ajaxNotifications").text() == text) {
       application.hideAjaxNotification();
     }
   }
 };
}();

$(document).ready(function() {
 var loadingMessage = "Loading...";

 // When an Ajax request is being made, tell the user "Loading...".
 $(this).ajaxStart(function() {
   application.showAjaxNotification(loadingMessage);
 });

 // Only if it completes normally do we hide the message.
 $(this).ajaxSuccess(function() {
   application.hideAjaxNotificationIfMatches(loadingMessage);
 });

 // Otherwise, we give the user an error message.
 $(this).ajaxError(function(event, xhr, ajaxOptions, thrownError) {

   // If we get an HTTP_CONFLICT, it means our data is stale.  Reload the
   // page.  To test this functionality, use two tabs in your browser.
   if (xhr.status == application.HTTP_CONFLICT) {
     location.reload();
   }

   // Otherwise, just tell the user something went wrong.
   else {
     application.showAjaxNotification("Request failed: could not contact server");
   }
 });
});

Commentaire (0)
ï¿½crire

par Avant-premiï¿½re

Annuler rï¿½ponse

ï¿½crivez votre commentaire

Comment's Titre

J'assure ï¿½ 100% je suis humain rï¿½el
Je le rï¿½pï¿½te, je ne suis pas bot

Sent (0)
Nouveau

BBCode
HTML
URL
JID

AIVideo-App.com
GÃ©nÃ©rez vos vidÃ©os d'entreprise par l'IA avec la voix ou simplement du texte

chatGPTaz.com
Parlez Ã ChatGPT dans votre langue maternelle

AppAIVidÃ©o
Votre premiÃ¨re application vidÃ©o AI GRATUITE

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Faceswap AI en ligne
Ã‰changez des visages, des vidÃ©os, des photos et des GIF instantanÃ©ment avec de puissants outils d'IA - Faceswap AI Online GRATUIT

Faceswap AI en ligne
Ã‰changez des visages, des vidÃ©os, des photos et des GIF instantanÃ©ment avec de puissants outils d'IA - Faceswap AI Online GRATUIT

Faceswap AI en ligne
Ã‰changez des visages, des vidÃ©os, des photos et des GIF instantanÃ©ment avec de puissants outils d'IA - Faceswap AI Online GRATUIT

Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app

Your next top AI Assistant
Claude AI, developed by Anthropic

Your next top AI Assistant
Claude AI, developed by Anthropic

Temu gratuit 500 $ pour les nouveaux utilisateurs
Claim Free Temu $500 Credit via Affiliate & Influencer Program

CrÃ©dits publicitaires TikTok gratuits
MaÃ®trisez les publicitÃ©s TikTok pour le marketing de votre entreprise

Dall-E-OpenAI.com
GÃ©nÃ©rez automatiquement des images crÃ©atives avec l'IA

chatGPT4.win
Parlez Ã ChatGPT dans votre langue maternelle

Premier produit d'intelligence artificielle d'Elon Musk - Grok/UN.com
Parlez au chatbot Grok AI dans votre langue

Outily.win
Centre d'outils ouvert et gratuit, utilisable par tous et pour tous, avec des centaines d'outils

GateIO.gomymobi.com
Airdrops gratuits Ã rÃ©clamer et Ã partager jusqu'Ã 150 000 $ par projet

iPhoneKer.com
Ã‰conomisez jusqu'Ã 630 $ Ã l'achat d'un nouvel iPhone 16

Acheter le robot Tesla Optimus
Commandez votre robot Tesla Bot : Optimus Gen 2 dÃ¨s aujourd'hui pour moins de 20 000 $

Cool Domains for Sale!

lend.services XMQV.com CreditCard.rip GrokUN.com system.money gomymobi.com AIvideo-app.com chatGPT4.win javascriptON.com ChainTutor.com CTRCoin.com AI-Trading-Bot.com hearf.com eChainBank.com ChatTotal.com gomy.mobi MetaTru.com index.services war.money gomy.mobi Card.rip Dall-E-OpenAI.com CryptoKD.com gomymobi.com pornID.net JavaScriptBank.com chatGPTaz.com ApexBTC.com ZWVQ.com chatGPT2.fun ABP3.com

Dï¿½poser jours:
Auteur:
Previews:
Commentaire:
Votes:
Sent:
Taille:
Rang:

13/05/2010
Shannon [more]
35,443
0
2
0
8.61 KBytes

3/5 2 votes / 35,443 previews / 0 commentaire 13/05/2010 Ce sera trÃ¨s facile de visualiser le type de la prÃ©sente notification, si vous utilisez GMail une environnement...Comment faire pour crÃ©er des notifications AJAX avec jQuery - JID: 2355 - Comment faire pour crÃ©er des notifications AJAX avec jQuery - Langue: Franï¿½aise

haquochnk[3] Cao Phong[2] doixongpha[2]

Soyons premier membre de le faire