Partage

Ajouter un div dynamiquement

22 août 2011 à 11:43:45

Bonjour,
j'essaye d'ajouter un div dynamiquement en utilisant jquery
mais ça ne fonctionne pas;(

voici mon code :

Dans le head:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$('button.test').click(function() {
$('.tabbertab:last').clone().insertAfter('.tabbertab:last');
$('.tabbertab:last h2').html("An other tab");
$('.tabbernav').remove();

document.getElementById('mytab').tabber.init(document.getElementById('mytab'));

});
</script>

Dans body :

<button type="button" class="test" value="add new tab">  +   </button>
<div class="tabber" id="artikel">

<div class="tabbertab" >
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>

<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>

<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
<div id="mytab">
</div>
</div>

j'ai besoin de votre aide svp j'ai perdu beaucoups de temp à faire ça sans vain je vois pas l'erreur dans mon code ;(

bon j'ai essayé cette fonction aussi mais ça n'a pas marché
<script type="text/javascript">

var o = $.create('div',
{'id':'newtab',
'class':'tabbertab'}, ['Hello world!!!']);

// Append object o
$('#artikel').append($(o));
});
</script>

ninlock

22 août 2011 à 11:54:24

Salut, ton code fonctionne bien, c'est juste que tu le déclare pas dans le onDomReady donc écrit :

$(document).ready(function(){
  $('button.test').click(function() {
    $('.tabbertab:last').clone().insertAfter('.tabbertab:last');
    $('.tabbertab:last h2').html("An other tab");
    $('.tabbernav').remove();

    document.getElementById('mytab').tabber.init(document.getElementById('mytab'));
  }); 
}

Par contre je ne comprend pas pourquoi tu assigne le click par jQuery, car personnellement, je pense que ce genre de pratique est valable surtout pour de l'assignation d'evenement dynamique.
Ici tu pourrait très bien créé une fonction qui s'appel addTabb et mettre le code que tu écrit dans click function jQuery, d'ailleur c'est ce que j'ai commencé par faire pour vérifier que ton code fonctionnait, et ajouter onclick="addTab();" dans ton input.
En commençant par du classique, tu te retrouve avec moins de risque d'erreur, et moins de perte de temps à chercher le problème alors que ton code fonctionne.

lorrio

22 août 2011 à 11:54:47

EDIT : grilled à 20s pret

=> je ne laisse que la remarque

Et si tu nous mettais tout ça dans une balise <code type="html"></code>, ce serait plus joli.

And you, are you frozen ? --- Attention aux fausses rumeurs ! Yuki est bien une louve.

sweetm

22 août 2011 à 11:59:34

<html>
<title></title>
<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$('button.test').click(function() {
$('.tabbertab:last').clone().insertAfter('.tabbertab:last');
$('.tabbertab:last h2').html("An other tab");
$('.tabbernav').remove();

document.getElementById('mytab').tabber.init(document.getElementById('mytab'));


});
</script>
</head>
<body>

<button type="button" class="test" value="add new tab">&nbsp;&nbsp;+&nbsp;&nbsp; </button>
<div class="tabber" id="artikel">

<div class="tabbertab" >
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>


<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>


<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
<div id="mytab">
</div>
</div>
</body>
</html>

@ninilock: ça marche pas pour moi, si tu l'a essayé stp merci de m'indiquer la version de jquery que t'as mis peu étre que ça pose un probléme
j'utilise le click car j'ai mis ses div sous forme de formulaire à plusieurs onglets et j'ai ajouter un bouton [+] que lorsque je clique dessus un nouvel onglet s'ajoute

ninlock

22 août 2011 à 12:02:49

version de jQuery : 1.5.1
Par contre si tu as fait la modif, pourquoi tu n'as pas republié ton code corrigé avec les balises html?

Pour info j'ai aussi testé sur IE8 et ça fonctionne malgré le .tabber qui remonte une erreur.

sweetm

22 août 2011 à 12:04:17

si si je l'ai républié entre les balises html

ninlock

22 août 2011 à 12:06:15

j'ai vu que t'avais republié, je te demandé pourquoi tu n'as pas ajoutée la correction que je t'ai publié?
Et si ça ne fonctionne pas avec le .ready, comme spécifié précédemment, commence par du javascript le plus simple et natif possible :

<html>
<title></title>
<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
function addTab() {
  $('.tabbertab:last').clone().insertAfter('.tabbertab:last');
  $('.tabbertab:last h2').html("An other tab");
  $('.tabbernav').remove();

  document.getElementById('mytab').tabber.init(document.getElementById('mytab'));
};
</script>
</head>
<body>

<button type="button" class="test" value="add new tab" onclick="addTab();">&nbsp;&nbsp;+&nbsp;&nbsp; </button>
.
.
.

Un autre point, je sais pas ce que tu veut faire avec tabber, mais ça me dit rien, et aux navigateur non plus apparemment.

sweetm

22 août 2011 à 12:11:33

<html>
<head>

<title></title>
<script type="text/javascript" src="jquery.js"></script>


<script type="text/javascript">
function addtab()
{
$('.tabbertab:last').clone().insertAfter('.tabbertab:last');
    $('.tabbertab:last h2').html("An other tab");
    $('.tabbernav').remove();

    document.getElementById('mytab').tabber.init(document.getElementById('mytab'));
}
</script>

</head>
<body>

<h1>Tabber Example</h1>

<p>&larr; <a href="http://www.barelyfitz.com/projects/tabber/">Tabber Home</a></p>
<input type="button" value="addtab" OnClick="addtab();"/>
<div class="tabber" id="artikel">

     <div class="tabbertab" >
	  <h2>Tab 1</h2>
	  <p>Tab 1 content.</p>
     </div>


     <div class="tabbertab">
	  <h2>Tab 2</h2>
	  <p>Tab 2 content.</p>
     </div>


     <div class="tabbertab">
	  <h2>Tab 3</h2>
	  <p>Tab 3 content.</p>
     </div>
      <div id="mytab">
	  </div>
</div>

</body>
</html>

cette solution me crée un autre div mais les autres div disparaissent !!!

ninlock

22 août 2011 à 12:17:43

donc rien ne fonctionne là? t'as des erreurs dans firbug?

sweetm

22 août 2011 à 12:18:54

le nouveau div se crée à la place des autres div mais les autres div disparaissent

voici ce que je veux avoir:

[ + ]
onglet1 | onglet2 | onglet3 |

et dés que je clique sur + un autre onglet s'ajoute à coté de onglet 3
tu comprend ?

ninlock

22 août 2011 à 12:26:38

Ecoute je comprend pas bien pourquoi ça ne fonctionne pas de ton coté alors que moi si. Mais tu peut recommencer ta fonction depuis le depart, ça te permettra certainement de cerner le problème, commence par juste ceci :

function addtab(){
  $('.tabbertab:last').clone().insertAfter('.tabbertab:last');
  $('.tabbertab:last h2').html("An other tab");
}

sweetm

22 août 2011 à 12:30:08

encor non ;((

ninlock

22 août 2011 à 12:33:52

oui, j'ai compris ton besoin et ton code y répond sur mon poste, c'est la raison pour laquelle je comprend pas pourquoi toi tu n'as pas le même comportement.
Tu as écrit tout le code ta page là?

sweetm

22 août 2011 à 12:35:38

peu tu me copier ce que t'as exactement STP

VOICI TT MA PAGE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">

<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>

<script type="text/javascript">
function addtab()
{
$('.tabbertab:last').clone().insertAfter('.tabbertab:last');
    $('.tabbertab:last h2').html("An other tab");
    $('.tabbernav').remove();

    document.getElementById('mytab').tabber.init(document.getElementById('mytab'));
}
</script>

</head>
<body>

<h1>Tabber Example</h1>

<p>&larr; <a href="http://www.barelyfitz.com/projects/tabber/">Tabber Home</a></p>
<input type="button" value="addtab" OnClick="addtab();"/>
<div class="tabber" id="artikel">

     <div class="tabbertab" >
	  <h2>Tab 1</h2>
	  <p>Tab 1 content.</p>
     </div>


     <div class="tabbertab">
	  <h2>Tab 2</h2>
	  <p>Tab 2 content.</p>
     </div>


     <div class="tabbertab">
	  <h2>Tab 3</h2>
	  <p>Tab 3 content.</p>
     </div>
      <div id="mytab">
	  </div>
</div>

</body>
</html>

pour tabber.js tu peu la trouver ici : http://www.barelyfitz.com/projects/tabber/
dans l'onglet download

ninlock

22 août 2011 à 12:38:24

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.custom.min.js"></script>


	<script type="text/javascript">			
			function addTab(){
				$('.tabbertab:last').clone().insertAfter('.tabbertab:last');
				$('.tabbertab:last h2').html("An other tab");
			}
			
		</script>
		
	</head>
<body>

<button type="button" class="test" value="add new tab" onclick="addTab()">&nbsp;&nbsp;+&nbsp;&nbsp; </button>
<div class="tabber" id="artikel">

<div class="tabbertab" >
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>


<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>


<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
<div id="mytab">
</div>
</div>
	</body>	
</html>

EDIT : 1ere remarque : par convention l'event click s'écrit "onclick" et non "OnClick"!!
2 eme remarque, quand tu cherche à développer commence par le plus simple, dans code par exemple enlève :

<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>

Pour ma part, en retirant huste ce bout de code, je peut constater que le nouveau tab apparait.

Une petite dernière remarque : j'ai l'impression que ton tabber.js provoque de sacrée fuite mémoire et s'execute super lentement.

sweetm

22 août 2011 à 12:50:05

merci pour ces remarques

mais le probléme persiste encor dés que j'appelle ma page de style css la génération de div cesse de fonctionner

ninlock

22 août 2011 à 14:50:24

donc sans le css cela fonctionne?

sweetm

22 août 2011 à 14:58:36

oui fonctionne mais il n'est pas sous forme d'onglets
sans le css l'exécution du code donne :
onglet1
onglet2
onglet3
...
bon j'ai enléve cette ligne: $('.tabbernav').remove();
qui est responsable de la disparition de la liste des anciens div

ninlock

22 août 2011 à 15:02:42

ok, donc c'est ton css qui est à l'origine de cette erreur.
Tu as vérifié que l'onglet créé dynamiquement nétait pas tous simplement caché avec un display: none ou quelque chose de ce genre?

sweetm

22 août 2011 à 15:16:18

nn j'ai vérifié ça, mais je pense que je dois ajouter qlq chose dans ma fonction
càd au lieu de .remove un truc comme .append je sais pas comment faire ça en jquery (ajouter le div à la liste des div "tabbernav....()"

ninlock

22 août 2011 à 15:58:35

$('#artikel').append('<div>...</div>') ou $('#artikel').append(elementDiv).
Il y a d'autre façon de faire mais c'est la plus rapide et pratique.

Par contre je comprend pas à quoi sert le css qui cache toutes les tab!

sweetm

22 août 2011 à 16:08:26

le css avec la page tabber.js sont responsable à la structuration des div sous forme de tabulation (onglets) c un exemple que j'ai intégré depuis cette URL:

http://www.barelyfitz.com/projects/tabber/

et puisque j'avais besoin d'ajouter dynamiquement d'autres onglets j'ai ajouté le code jquery qu'on traite déjà

ninlock

23 août 2011 à 9:33:34

Ok, j'ai repris ton code en utilisant tabber.js et le css, en regardant dans firbug, il se trouve que le container pour la tab créée est bien ajouté mais il manque l'ajout de l'onglet de la nouvelle tab, donc dans a fonction il faut écrire :

function addtab()
{
  $('.tabbernav li:last').clone().insertAfter('.tabbernav li:last');
  $('.tabbernav li:last a').html("Tab 4");
  $('.tabbertab:last').clone().insertAfter('.tabbertab:last');
  $('.tabbertab:last h2').html("An other tab");
}

Par contre, j'ai pas eut le temps de regarder, mais le click sur le nouvel onglet, n'affiche pas la nouvelle tab. Il doit y avoir une déclaration du nouvel onglet a faire auprès de tabber.js mais j'ai pas encore trouvé ce qui était nécessaire.

sweetm

23 août 2011 à 10:05:46

grand merciiiiii maintenant l'onglet s'ajoute à la bonne position,

mais j'essaye encor de régler le probléme de contenu, c un peu compliqué pour moi pacq je suis débutante en javascript, et jquery !!

bah j'ai changé ma fonction comme ça ce qui permet d'apparaitre le contenu mais tjrs y'a le probléme de conflit avec les autres div contenu :

<html>
<head>
<script type="text/javascript">
function addTab(){
			var titleTab = prompt("Neu Artikel :", "Gebinde");
				$('.tabbernav li:last').clone().insertAfter('.tabbernav li:last');
                $('.tabbernav li:last a').html(titleTab);
				
				$('.tabbernav li:last').attr("id", "newtab");
				
				
				$('#newtab').click(function() {
				  $('.tabbertab li:first').removeClass("tabberactive");
				  $('.tabbertab').addClass("tabbertabhide");
                  $('.tabbertab:last').removeClass("tabbertabhide");
				  
                   });
				   
				 
                $('.tabbertab:last').clone().insertAfter('.tabbertab:last');
                $('.tabbertab:last h2').html("An other tab");
       	

</script>			}
</head>
</html>

y'a un autre probléme aussi comment pourrai je enregistrer les onglets générés dynamiquement? comment faire pour que les nouveaux onglets ne disparaissent pas aprés la validation de mon formulaire ??!!