Animation d'attente avec jquery

Général
1

Bonjour,

J'utilise un script ajax pour charger une div dynamiquement :

<code>
$(document).ready(function () {
  $("a.load")
  .click(function() {
    $(this).attr("href", function() {
      mylink=this.href.replace("mapage", "mapage") ;
      $(this).attr("href", mylink ) ;
    }) ;
    $("#myid").load(this.href) ;
    return false ;
  }) ;
}) ;
</code>

pris sur : http://www.jquery.info/Un-lien-vers-une-page-qui

J’aimerai avoir une petite animation d’attente durant la requête comme sur la partie privée de spip (l'image searching.gif qui tourne)

quelqu’un saurait-il ce qu’il faut insérer ?

yoh

2

Le Couteau Suisse utilise cette animation pour l'affichage de ses outils . Voici le code :

    // on charge la nouvelle description
    jQuery('#cs_infos')
      .css('opacity', '0.5')
      .parent()
      .prepend(ajax_image_searching)
      .load('".generer_url_ecrire('charger_description_outil', 'source='._request('exec').'&outil=', '\\x26')."'+this.name);

Pat

yoh a écrit :

Bonjour,

J'utilise un script ajax pour charger une div dynamiquement :

<code>
$(document).ready(function () {
$("a.load")
.click(function() {
   $(this).attr("href", function() {
     mylink=this.href.replace("mapage", "mapage") ;
     $(this).attr("href", mylink ) ;
   }) ;
   $("#myid").load(this.href) ;
   return false ;
}) ;
}) ;
</code>

pris sur : http://www.jquery.info/Un-lien-vers-une-page-qui

J’aimerai avoir une petite animation d’attente durant la requête comme sur la partie privée de spip (l'image searching.gif qui tourne)

quelqu’un saurait-il ce qu’il faut insérer ?

yoh

3

Mince!

J'ai beau tester dans tous les sens, je n'y arrive pas!
- J'ai réussi à rendre ma div opaque mais pas moyen de la rendre normale aprés l'execution;
- Quand à l'image, neni!

Je suis perdu dans les ajaxStart, ajaxStop, ....

Au secours

Pat a écrit :

Le Couteau Suisse utilise cette animation pour l'affichage de ses outils . Voici le code :

        // on charge la nouvelle description
        jQuery('#cs_infos')
            .css('opacity', '0.5')
            .parent()
            .prepend(ajax_image_searching)
            .load('".generer_url_ecrire('charger_description_outil', 'source='._request('exec').'&outil=', '\\x26')."'+this.name);

Pat

yoh a écrit :

Bonjour,

J'utilise un script ajax pour charger une div dynamiquement :

<code>
$(document).ready(function () {
$("a.load")
.click(function() {
   $(this).attr("href", function() {
     mylink=this.href.replace("mapage", "mapage") ;
     $(this).attr("href", mylink ) ;
   }) ;
   $("#myid").load(this.href) ;
   return false ;
}) ;
}) ;
</code>

pris sur : http://www.jquery.info/Un-lien-vers-une-page-qui

J’aimerai avoir une petite animation d’attente durant la requête comme sur la partie privée de spip (l'image searching.gif qui tourne)

quelqu’un saurait-il ce qu’il faut insérer ?

yoh

4

On Thu, 07 Aug 2008 09:36:42 +0200, yoh <vprono@gmail.com> wrote:

J'ai beau tester dans tous les sens, je n'y arrive pas!
- J'ai réussi à rendre ma div opaque mais pas moyen de la rendre normale aprés l'execution;
- Quand à l'image, neni!
Je suis perdu dans les ajaxStart, ajaxStop, ....

Euh, je sais pas si ça aide mais j'ai un truc de ce genre :

<script>
function toggle(divID) {
  var thediv = document.getElementById(divID);
  if (thediv) {
  thediv.className=(thediv.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>
(... snip ...)

<script>
... la fonction qui va faire quelque chose de long et que je voudrais le dire à mes visiteurs....
toggle('contenu');
toggle('loading');
</script>
(... snip ...)

<style>
.hidden { display: none; }
.unhidden { display: block; }
</style>
(....snip....)

<body>
(.....snip.....)
<div id="loading" class="unhidden">
<img src="#CHEMIN{busy.gif}">
Veuillez patienter, chargement en cours...
</div>

<div id="contenu" class="hidden">
.... ce qui doit être dedans....
</div>

--
Using Opera's revolutionary e-mail client: Opera Web Browser | Faster, Safer, Smarter | Opera

5

Je n'ai pas réussi à afficher l'image d'attente comme je voulais, par contre maintenant, le temps que le lien se charge, la div 'news_yoh ' devient translucide, et cela me convient.

Merci à tous

Solution :

$(document).ready(function () {
  $("a.spip-mois-yoh-boutons")
  .click(function() {
    $(this).attr("href", function() {
      mylink=this.href.replace("admin", "admin") ;
      $(this).attr("href", mylink ) ;
    }) ;
    jQuery("#news_yoh")
             .css('opacity', '0.5');
     $("#news_yoh").load(this.href,function(){
    jQuery("#news_yoh")
             .css('opacity', '1');}
  ) ;
    return false ;
  }) ;
}) ;

yoh

6

pour l'image :
  .prepend(ajax_image_searching)
à condition que ajax_image_searching soit bien défini...
vérifie ça avec firefox/firebug : tu px déboguer le javascript pas à pas.
Pat

yoh a écrit :

Je n'ai pas réussi à afficher l'image d'attente comme je voulais, par contre maintenant, le temps que le lien se charge, la div 'news_yoh ' devient translucide, et cela me convient.

Merci à tous

Solution :

$(document).ready(function () {
$("a.spip-mois-yoh-boutons")
.click(function() {
   $(this).attr("href", function() {
     mylink=this.href.replace("admin", "admin") ;
     $(this).attr("href", mylink ) ;
   }) ;
   jQuery("#news_yoh")
            .css('opacity', '0.5');
    $("#news_yoh").load(this.href,function(){
   jQuery("#news_yoh")
            .css('opacity', '1');} ) ;
   return false ;
}) ;
}) ;

yoh