Discussion :

[Clovis37]

Bonjour à tous,

je souhaite utiliser le plugin UI Tabs de Jquery pour mettre en place un système d'onglets. Rien de bien compliqué, pour passer d'un onglet à un autre avec rafraichissement Ajax, je n'ai aucun problème.

Seulement, je souhaite intégrer des paramètres supplémentaires. Pour cela, je souhaite utiliser la méthode ajaxOptions de ce plugin.

Malheureusement, le contenu de ajaxOptions n'est pas transmis dans l'objet, et du coup les variables ne sont pas passées en Ajax.

voici mon code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$('#ui-tabs-nav').tabs({ajaxOptions:{data:'page='+this.getAttribute('id')+'&'}}).('load', 0);
});

En fait, je n'arrive pas à faire passer les paramètres de ajaxOptions. Quand je débug celui-ci dans le Javascript, le résultat est NULL.

Si quelqu'un a une idée, merci à vous.

J'utilise le code JS suivant http://jqueryui.com/latest/ui/ui.tabs.js

[Alexdezark]

Salut,

Si tu n'as pas d'autres paramètres à passer que des variables, tu peux les passer en Get comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	<ul>
		<li><a href="ajax/default.php?id=<?php echo $ID ?>" title="tabs"><span>ma page</span></a></li>
</ul>

ça fonctionne sans problème

Bonne journée

[Clovis37]

Salut,

merci de ta réponse,

je ne pense pas pouvoir faire comme ça.

En fait, c'est une barre de navigation pour afficher les pages de commentaires.

Le barre de navigation est affichée dynamiquement en ajax, mais je n'arrive pas à faire passer le paramètre "page" au loader de UI Tabs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
<!--
$('.link').bind('click',function(event, ui){
//$('.link').each(function(){
	//$('#ui-tabs-nav').tabs( {ajaxOptions: {data:'page='+this.getAttribute('id')+'&'}});
	$('#ui-tabs-nav').tabs({ fx: { opacity: 'toggle' } });
	//ui.options = ajaxOptions: {data:'page='+this.getAttribute('id')+'&'}}); 
	$('#ui-tabs-nav').tabs('load', 0).tabs({ajaxOptions: {data:'page='+this.getAttribute('id')+'&'}});
});
-->
</script>

Une autre solution serait de simuler l'appel au clic sur l'onglet, mais je ne sais pas du tout comment faire.

Merci

[danielhagnoul]

Bonjour.

Et en récupérant les options dans une variable ?
http://jqueryui.com/demos/tabs/#option-ajaxOptions

Additional Ajax options to consider when loading tab content (see $.ajax).

Code examples

Initialize a tabs with the ajaxOptions option specified.

$('.selector').tabs({ ajaxOptions: { async: false } });

Get or set the ajaxOptions option, after init.

//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');

//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });

[Clovis37]

Effectivement, je n'avais pas utilisé correctement le bon code. Merci à toi, ça fait 2 jours que je délirais là-dessus, alors que j'avais mal lu le texte.

Merci en tout cas !