CGI,Javascript et CSS

Version imprimable

Bonjour,

J'ai écris un bout de code pour afficher/masquer une div à l'aide de javascript et css.
Le css est trouvé dans le code cgi perl mais je ne pense que le javascript s'exécute(pas d'effet affichage/masquage). Ma question : Pouquoi?? Qu'est ce qui cloche.

Si quelqu'un a une idée...
Merci et bonne journée.

test.pl

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
#!/usr/bin/perl -w
use CGI::Pretty ":standard";
use CGI;
use strict;
use DBI;
use CGI::Carp qw(fatalsToBrowser warningsToBrowser);
warningsToBrowser(1);
 
my $cgi = new CGI;
print $cgi->header;
print $cgi->start_html(
	-title=>'Welcome',
 	-style => { -src => '/fastdb2/tableau.css',-type => 'text/css', -media => 'all' },
 	-script=>{-type => 'javascript',-src=>'/fastdb2/effet.js'});
print "<div class='clicTitre'>";
print "  <a href='javascript:afficheId('contenu')'>Nous contacter</a>";
print "</div>";
print "<div class='contenant' id='contenu'>";
print "  <div class='clicCacher'>";
print "    <a href='javascript:cacheId('contenu');'>Fermer</a>";
print "  </div>";
print "NOTRE TEXTE";
print "</div>";
print $cgi->end_html;

tableau.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.clicTitre
  {
  border-color: #000000;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 2px dashed;
  background-color: #eeeeee;
  }
 
.clicCacher
  {
  top: -20px;
  position: relative;
  text-align:right;
  }
 
.contenant
  {
  display : block;
  border: 1px solid #000000;
  }

Effet.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }
 
function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
 
cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.

Ce n'est pas un souci Perl mais HTML. Ton code HTML est mal conçu avec des simples quote se mélangeant au double quote. Pour détecter ce genre d'erreur :

Code:

print " <a href='javascript:afficheId('contenu')'>Nous contacter</a>";

Il faut lire le code source de ta page HTML générée et tu verras :

Code:

<a href='javascript:afficheId('contenu')'>Nous contacter</a>

doit être

Code:

<a href="javascript:afficheId('contenu')">Nous contacter</a>

etc

Voici ton code Perl corrigé et je viens de tester et ça fonctionne :
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 #!/usr/bin/perl use warnings; use CGI::Pretty ":standard"; use CGI; use strict; use DBI; use CGI::Carp qw(fatalsToBrowser warningsToBrowser); warningsToBrowser(1); my $cgi = new CGI; print $cgi->header; print $cgi->start_html( -title=>'Welcome', -style => { -src => '/fastdb2/tableau.css',-type => 'text/css', -media => 'all' }, -script=>{-type => 'javascript',-src=>'/fastdb2/effet.js'} ); print <<"CODECGI"; <div class="clicTitre"> <a href="javascript:afficheId('contenu')">Nous contacter</a> </div> <div class="contenant" id="contenu"> <div class='clicCacher'> <a href="javascript:cacheId('contenu');">Fermer</a> </div> NOTRE TEXTE </div> CODECGI print $cgi->end_html;

20/05/2010, 10h55
Jane Home

Ok super merci, et une dernière question au passage.
C'est plus sur le javascript...
Le script s'éxecute mais il affiche directement le contenu de ma div.
J'aimerai qu'elle soit masquée dans un premier pour que l'utilisateur puisse ensuite l'afficher (et non l'inverse).

Et encore merci pour la rapidité de ta réponse :-)
20/05/2010, 11h05
djibril
Il suffit de ne pas afficher le contenu de ta balise div dans ta feuille de style par défaut. Le changement est à effectuer dans le feuille de style :
Code:

1 2 3 4 .contenant { display : none; border: 1px solid #000000; }
Par défaut, le div ne sera pas affiché.
20/05/2010, 11h17
Jane Home

Génial
Jte remercie :-)