Appels Ajax Multiples Sur Une Même Action

Bonjour,

Je rencontre un problème d’utilisation d’appels multiples Ajax sur une même action. Je ne comprends pas ce qui se passe. Pouvez-vous m’aider ? J’ai créé un exemple réduit au minimum ci-dessous.

Voilà, il y a une liste de noms cliquables. Lorsqu’on clique un nom, celui-ci devient rouge (ajout de la classe CSS “red_item”), un appel Ajax se déclenche qui tourne pendant quelques secondes, et au retour la classe red_item est enlevée de l’élément. Normalement, en cliquant sur chaque élément à 2 secondes d’intervalle par exemple, les éléments rouges devraient redevenir à leur couleur initiale progressivement à la même fréquence. Or tous les éléments retournent à leur état initial en même temps, comme si la fin du 1er appel Ajax terminait les autres ou que l’action du contrôleur n’était pas réentrante…

Contrôleur :




<?php

class SiteController extends Controller {

  public function actionError() {

    if($error=Yii::app()->errorHandler->error) {

      if(Yii::app()->request->isAjaxRequest) echo $error['message'];

      else $this->render('error', $error);

    }

  }


  public function actionIndex() { $this->render( 'index' ); }


  public function actionTestAjax() { for( $i = 0 ; $i < 10000000 ; $i++ ); }

}

Vue "index" :




<style>.red_item {color:red;}</style>

<ul>

  <li><span id="name_1" class="clickable">Item 1</span></li>

  <li><span id="name_2" class="clickable">Item 2</span></li>

  <li><span id="name_3" class="clickable">Item 3</span></li>

</ul>


<script>

  function onItemClick ( $target ) {

    $target.addClass( 'red_item' );

    $.ajax( {

      url: "<?php echo $this->createUrl( 'site/testAjax', array() ); ?>",

      complete: function() {

        $target.removeClass( 'red_item' );

      }

    } );

  };


  $( document ).ready( function () {

    $( '.clickable' ).on( "click", function( $event ) {

      onItemClick( $( this ) );

    });

  });

</script>

[size="4"]Par contre, le code suivant fonctionne (chaque item appelle en Ajax sa propre action) :[/size]

Contrôleur :


public function actionTestAjax() { for( $i = 0 ; $i < 10000000 ; $i++ ); }

public function actionTestAjax2() { for( $i = 0 ; $i < 10000000 ; $i++ ); }

public function actionTestAjax3() { for( $i = 0 ; $i < 10000000 ; $i++ ); }



Vue "index" :


<style>.red_item {color:red;}</style>

<ul>

  <li><span id="name_1" class="clickable">Item 1</span></li>

  <li><span id="name_2" class="clickable">Item 2</span></li>

  <li><span id="name_3" class="clickable">Item 3</span></li>

</ul>


<script>

  function onItemClick ( $target ) {

    $target.addClass( 'red_item' );

    $.ajax( {

      url: "<?php echo $this->createUrl( 'site/testAjax', array() ); ?>",

      complete: function() { $target.removeClass( 'red_item' ); }

    } );

  };


  function onItemClick2 ( $target ) {

    $target.addClass( 'red_item' );

    $.ajax( {

      url: "<?php echo $this->createUrl( 'site/testAjax2', array() ); ?>",

      complete: function() { $target.removeClass( 'red_item' ); }

    } );

  };


  function onItemClick3 ( $target ) {

    $target.addClass( 'red_item' );

    $.ajax( {

      url: "<?php echo $this->createUrl( 'site/testAjax3', array() ); ?>",

      complete: function() { $target.removeClass( 'red_item' ); }

    } );

  };


  $( document ).ready( function () {

    $( '#name_1' ).on( "click", function( $event ) { onItemClick( $( this ) ); });

    $( '#name_2' ).on( "click", function( $event ) { onItemClick2( $( this ) ); });

    $( '#name_3' ).on( "click", function( $event ) { onItemClick3( $( this ) ); });

  });

</script>

Merci