jquery - Tabs et Graphiques jqplot

[remy42]

Bonjour,

Je rencontre un problème entre JQUERY TABS et JQPLOT ( qui permet de faire des graphique)

de manière indépendante, ils fonctionnent tous les.

J'ai crée un tabs avec 3 onglet.
A l'intérieur de chacun de ces onglets, j'ai mis un graphique.

C'est la qu'intervient mon problème. Seulement le graphique du TAB1 qui apparait par défaut est visible. Quand je clique sur tab2 et tab3 les graphique sont invisible.

Savez vous d'ou peut provenir ce problème ? Ca fait 1 jours que je cherche sur le web sans parvenir à trouver.

Merci d'avance pour vos réponses et votre aide.

Ci dessous le code:

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
28
29
30
31
32
33
34
35
36
37
38
 
 
<div id="usual1" class="usual"> 
  <ul>  
  <li><a href="#tab1">Etat des commandes</a></li>  
  <li><a  class="selected"  href="#tab2">TOP 5 Articles</a></li>  
  <li><a   href="#tab3">Tab 3</a></li> 
  </ul>   
 
 
<div id="tab1" style="margin-top:20px; margin-left:20px; width:860px; height:600px; 
 
<div id="chart1" style="margin-top:20px; margin-left:20px; width:460px; height:300px;">
</div>						
 
</div> 
 
 
 
<div id="tab2" style="margin-top:20px; margin-left:20px; width:860px; height:600px
 
<div id="chart2" style="margin-top:20px; margin-left:20px; width:460px; height:300px;">
</div>							 
 
 </div> 
 
 
<div id="tab3" style="margin-top:20px; margin-left:20px; width:860px; height:600px;">
 
<div id="chart1" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>							  
</div> 
 
 
 
</div> 
 
 
<script type="text/javascript">   $("#usual1 ul").idTabs(); </script>

[Alexdezark]

Bin vu ce que tu nous montre ce sera pas facile de t'aider...

pas de javascript, pas de lien vers une page de test.

Bon, je vois quand même des balises (div) pas fermées, mais ça doit venir d'un copié/collé... partiel.

as-tu essayé d'utiliser Ajax pour charger tes graphiques dynamiquement ?

voir : http://docs.jquery.com/UI/Tabs#Ajax_mode

bonne journée

[remy42]

Bonjour,

Merci pour tes infos.

Ci dessous le code de 2 de mes graphiques.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<%  ' CALCUL + SCRIPT CAMEMBERT
  ' ci dessous mettre les valeurs brut. Le pourcentage se calcul tt seul
  s1="select count(*) from commande where solde='0'"
  set rs1=conntemp.execute(s1)
  s2="select count(*) from commande where solde='-1'"
  set rs2=conntemp.execute(s2)
  s3="select count(*) from commande where solde='-2'"
  set rs3=conntemp.execute(s3)
  %>
 
<script class="code" type="text/javascript">
$(document).ready(function(){
  plot2 = jQuery.jqplot('chart2', 
    [[['VALIDEE', <%=rs3(0)%>],['EN ATTENTE DE VALIDATION', <%=rs2(0)%> ], ['EN COURS', <%=rs1(0)%>]]], 
    {
      title: ' ', 
      seriesDefaults: {
        shadow: true, 
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: { 
          startAngle: 360, 
          sliceMargin: 4, 
          showDataLabels: true } 
      }, 
      legend: { show:true, location: 'w' }
    }
  );
});
</script>
<%
' FIN CAMEMBERT 
%>
 
 
 
<%
' DEBUT GRAPH BARRE 
%>
 
<script class="code" type="text/javascript">
 
$(document).ready(function(){ 
var line1 = [['Pantalon', 700], ['Polo', 900], ['T-shirt', 1500],
 [' Chemise homme', 300],   ['Chemise femme', 198]];   
 
var plot1 = $.jqplot('chart1', [line1], {
    	title: 'TOP 5 Articles',    
	series:[{renderer:$.jqplot.BarRenderer}],    
	axesDefaults: { 
       	tickRenderer: $.jqplot.CanvasAxisTickRenderer ,        
	tickOptions: {  
        angle: -30, 
        fontSize: '10pt'        
	}    
},    
axes: {    
  xaxis: {      
  renderer: $.jqplot.CategoryAxisRenderer    
  }   
	 }  
		});
			});
</script>
<%
' FIN BARRE 
%>

Ci dessous le code JS de IDTABS

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
/* ;tabidTabs ~ Sean Catchpole - Version 2.2 - MIT/GPL */
(function()
{var dep={"jQuery":""};
var init=function()
{(function($){$.fn.idTabs=function(){
var s={};
for(var i=0;i<arguments.length;++i)
{var a=arguments[i];switch(a.constructor)
{case Object:$.extend(s,a);break;case Boolean:s.change=a;break;case Number:s.start=a;break;case Function:s.click=a;break;case String:if(a.charAt(0)=='.')s.selected=a;else if(a.charAt(0)=='!')s.event=a;else s.start=a;break;}}
if(typeof s['return']=="function")
s.change=s['return'];return this.each(function(){$.idTabs(this,s);});}
$.idTabs=function(tabs,options){var meta=($.metadata)?$(tabs).metadata():{};var s=$.extend({},$.idTabs.settings,meta,options);if(s.selected.charAt(0)=='.')s.selected=s.selected.substr(1);if(s.event.charAt(0)=='!')s.event=s.event.substr(1);if(s.start==null)s.start=-1;var showId=function(){if($(this).is('.'+s.selected))
return s.change;var id="#"+this.href.split('#')[1];var aList=[];var idList=[];$("a",tabs).each(function(){if(this.href.match(/#/)){aList.push(this);idList.push("#"+this.href.split('#')[1]);}});if(s.click&&!s.click.apply(this,[id,idList,tabs,s]))return s.change;for(i in aList)$(aList[i]).removeClass(s.selected);for(i in idList)$(idList[i]).hide();$(this).addClass(s.selected);$(id).show();return s.change;}
var list=$("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId);list.each(function(){$("#"+this.href.split('#')[1]).hide();});var test=false;if((test=list.filter('.'+s.selected)).length);else if(typeof s.start=="number"&&(test=list.eq(s.start)).length);else if(typeof s.start=="string"&&(test=list.filter("[href*='#"+s.start+"']")).length);if(test){test.removeClass(s.selected);test.trigger(s.event);}
return s;}
$.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!click"};$.idTabs.version="2.2";$(function(){$(".idTabs").idTabs();});})(jQuery);}
var check=function(o,s){s=s.split('.');while(o&&s.length)o=o[s.shift()];return o;}
var head=document.getElementsByTagName("head")[0];var add=function(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;head.appendChild(s);}
var s=document.getElementsByTagName('script');var src=s[s.length-1].src;var ok=true;for(d in dep){if(check(this,d))continue;ok=false;add(dep[d]);}if(ok)return init();add(src);})();

J'ai remarqué que dans mon code html si je mettait l'onglet 2 avec class="selected" , il s'affiche. En gros celui que je défini par defaut , il s'affiche mais au changement les autres graphique n'apparraissent pas.

Code :

1
2
3
4
5
6
7
 
<%' ENtete tableau a onglet%>
 <ul>  
  <li><a href="#tab1">Etat des commandes</a></li>  
  <li><a  class="selected"  href="#tab2">TOP 5 Articles</a></li>  
  <li><a   href="#tab3">Tab 3</a></li> 
 </ul>

Merci d'avance pour ton aide

[remy42]

un lien pour comprendre le probleme

Dans l'onglet 1 , un graphique, il s'affiche
Dans l'onglet 2 un autre graphique , il ne s'affiche pas. Mais si je met le graphique de l'onglet 2 dans l'onglet 1, ca fonctionne.

Je desespère Merci pour ton aide

http://commercedev.cepovett.com/test.asp

[Alexdezark]

Bonjour,

Au vu de ton code, je pense que tu utilises un simple copié/collé sans avoir cherché à en comprendre le fonctionnement, or c'est la base de l'utilisation d'un code.

Ce code est bien compliqué pour un résultat qui s'obtient avec jQuery UI en 1 lignes (voir la ligne 14 du premier code ).

voir : http://www.lesalpes.mobi/test/plots/

La solution que je te proposes utilise 3 pages :

1°)

index.php initialise jQuery Tabs :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mes beaux graphiques</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui-min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ui.theme.css">
<link rel="stylesheet" type="text/css" href="css/jquery.ui.core.css">
<link rel="Stylesheet" type="text/css" href="css/jquery.ui.tabs.css" />
 
<script>
$(document).ready(function() {
$tabs=$("#onglet").tabs({});
});
</script>
 
<style>
.ui-tabs .ui-tabs-hide {
     display: none;
}
</style>
 
</head>
<body style="font-family:Arial, Helvetica, sans-serif; font-size:12px">
 
<div id="onglet" style="background:none; width:100%">
<ul>
<li>
<a href="graphs.php?graph=1" title="cible"><span>Graph 1</span></a>
</li>
<li>
<a href="graphs.php?graph=2" title="cible"><span>Graph 2</span></a>
</li>
<li>
<a href="graphs.php?graph=3" title="cible"><span>Graph 3</span></a>
</li>
</ul>
</div>
 
</body>
</html>

voir : http://docs.jquery.com/UI/Tabs#Ajax_mode

2°)

graphs.php charge l'image dans la div qui est la "target" du Tabs (voir toujours la même doc à ce sujet)

Code :

1
2
3
4
5
6
7
8
9
<?php
header('Content-Type: text/html; charset=ISO-8859-1'); 
if(isset($_GET['graph']))$graph=$_GET['graph'];
?>
<script>
$(document).ready(function() {
$("#cible").html('<img id="imag" src="calculGraphs.php?graph=<?php echo $graph ?>" />');
});
</script>

3°) la page calculGraphs crée le graphique dynamiquement en vue de son affichage dans la balise image.

Cette page, je te laisse y réfléchir pour comprendre le principe.

Si vraiment tu continue de sécher... fais moi signe

Bonne journée

[remy42]

Bonjour,

Merci pour tes explications et ton code. Je vais essayer cela dès que possibile.

Une personne m'a communiquer la solution a mon problème. Un problème comme souvent idiot.

Il suffisait de basculer le script

Code :

1
2
3
4
5
6
 
<script>
  $(document).ready(function() {
    $("#tabs").tabs();
  });
  </script>

après les scripts de création de graphs.

merci encore pour ton aide. je vais tester ta solution également.