jQuery tabs() méthode add n'ouvre pas l'onglet dans la div cible

Version imprimable

Bonjour à tous,

Je cherche à utiliser la méthode Add de tabs() pour ajouter des onglets cliquable à ceux déja existants

donc d'abord le code de création de mes onglets
Code:

1 2 3 4 5 6 7 8 9 10 <div id="example" style="background:none"> <ul> <li><a href="gestion_revendeurs.php" title="tabs"><span>Listing revendeurs</span></a></li> <li><a href="ajout_revendeur.php>" title="tabs"><span>ajouter/modifier un revendeur</span></a></li> </ul> </div>  <br/> <div align="left" id="tabs" class="ui-tabs-hide" style="background:none;overflow:auto;max-height:700px;max-width:900px" ></div>
et l'initialisation :
Code:

1 2 3 4 $(document).ready(function() { $("#example").tabs(); });
Ensuite, en fonction de cases que l'on coche, cela ajoute des onglets comme ceci :
Code:

1 2 $('#example').tabs('add', "test1.php", "Test");
Mon onglet est ajouté dans ma barre d'onglet mais si on clique dessus la page "test1.php" s'ouvre dans la div "example" qui est celle des onglets.

La page doit s'ouvrir dans la div "tabs".

Pour obtenir ce résultat avec du code écrit en dur on précise title="tabs" dans les propriétés du <a>.

J'ai donc essayé ceci :
Code:

1 2 3 $('#example').tabs('option', 'tabTemplate', '<li><a href="#{href}" title="tabs"><span>#{label}</span></a></li>'); $('#example').tabs('add', "test1.php", "Test");
Mais dans ce cas, dès que l'onglet est créé ma div "tabs" et son contenu disparaissent...

Ce que je cherche à faire c'est créer un nouvel onglet dont la cible s'ouvrira dans la div 'tabs' mais je veux que la div 'tabs' continu d'afficher son contenu courant tant qu'aucun onglet n'a été cliqué.

Merci d'avance pour votre aide

18/11/2009, 22h26
danielhagnoul

Bonsoir.

Documentation, voir : http://jqueryui.com/demos/tabs/#Ajax_mode

Citation:

Ajax mode

Tabs supports loading tab content via Ajax in an unobtrusive manner.

The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly:

<div id="example">
<ul>
<li><a href="ahah_1.html"><span>Content 1</span></a></li>
<li><a href="ahah_2.html"><span>Content 2</span></a></li>
<li><a href="ahah_3.html"><span>Content 3</span></a></li>
</ul>
</div>
Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled.

Note that if you wish to reuse an existing container, you could do so by matching a title attribute and the container's id:

<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>
and a container like:

<div id="Todo_Overview"> ... </div>
(Note how white space is replaced with an underscore)

This is useful if you want a human readable hash in the URL instead of a cryptic generated one.
19/11/2009, 08h34
Alexdezark

Bonjour danielhagnoul,

Merci de ta réponse.

J'ai bien sûr lu la doc jQuery x fois avant de poster, et relu l'extrait que tu m'envoie... et je ne vois pas bien où se trouve la différence avec ce que j'ai fait.

j'ai mon conteneur : "tabs" et la propriété title="tabs" dans la balise <a> que je cherche à insérer...

Pour autant ça ne fait pas du tout ce que j'attend... puisque dans le cas ou je mets la propriété title dans l'onglet à insérer le conteneur et son contenu disparaissent et dans le cas ou je ne le met pas le lien ne s'ouvre pas dans le conteneur (évidement).

Donc si tu as un exemple pour me montrer comment ajouter "on the fly" un nouvel onglet s'ouvrant dans le conteur... je suis preneur.

Bonne journée

Bonjour

Il y a le code de l'exemple donné dans la documentation : http://jqueryui.com/demos/tabs/#ajax

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
</script>
 
<div class="demo">
 
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="ajax/content1.html">Ajax Tab 1</a></li>
		<li><a href="ajax/content2.html">Ajax Tab 2</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
</div>
 
</div><!-- End demo -->
 
<div class="demo-description">
 
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.  While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
 
</div><!-- End demo-description -->

19/11/2009, 10h27
Alexdezark

Re-bonjour,

Merci de ton aide.

Je suis complètement à la bourre ce matin, je ne pourrait tester que dans l'après-midi...

Pour le moment je suis passé par une solution différente :

j'ai tout mes onglets dès l'ouverture de la page mais ceux qui ne sont pas utilisés sont grisés ("disabled") et sont "unabled" quand on coche les cases qui les concernent.

Je reviens en fin de journée

Merci encore