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