JS qui permet de modifier une div dans ma page à partir d'un clic

**sheira** · 27/09/2010, 17h47

Bonjour,

Voilà en gros j'ai 2 zones d'authentification (2 Div) dans ma page couvertes par 2 images si je clic sur l'image de droite, l'image de gauche affiche un formulaire de connexion et vis-versa.
Maintenant j'aimerai ajouter sur le formulaire de connexion (de gauche) des liens qui vont alimenter ma zone de droite.
Mais je n'y arrive pas.

Voici le code de ma page d'accueil:

Code :

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

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<div id="candArea" class="col_2 maxheight withbgphoto"><?php
      $this->user = Zend_Auth::getInstance()->getIdentity();
      if (@$this->user->role == 'candidat') {?>
        <div onclick="window.location = 'candidats/account/dashboard';" class="indent maxheight"><?php
      }else{?>
        <div onclick="pushDivContent2div('loginCand','recruArea','no','loginCandidat');" class="indent maxheight"><?php
      }?>
        <div class="block1 maxheight">
          <div class="maxheight bgphoto">
          <img class="maxheight" style="-ms-interpolation-mode: bicubic;" src="<?= DEFAULT_SKIN_PATH;?>images/candidat2.jpg" />
          </div>
          <div style="position:relative">
            <div class="inner withbgphoto" id="contentCand">
              <div class="title_block">
                <a href="<?= $this->baseUrl();?>/candidats/auth/login"><h2>Candidat</h2></a>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p>Optimisez vos chances de trouver l'<strong><a href="<? $this->baseUrl();?>index/recherche?cr=poste">emploi</a></strong> dont vous avez besoin. Avec <?=SITE_DOMAIN;?>, vous rentrez en contact avec des centaines de recruteurs sur tout le territoire et dans tous les secteurs.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- [end] Col2-->
    <!-- [start] Col3-->
    <div id ="recruArea" class="col_3 maxheight withbgphoto"><?php
      $this->user = Zend_Auth::getInstance()->getIdentity();
      if (@$this->user->role == 'client' || @$this->user->role == 'admin' || @$this->user->role == 'agence') {
                          switch (@$this->user->role) {
                            case 'agence':
                              $redir = 'manager/clients/dashboard/ag_id'.$this->user->nodes_access;
                              break;
                            case 'client':
                              $redir = 'manager/clients/dashboard/cli_id/'.$this->user->nodes_access;
                              break;
                            case 'admin':
                              $redir = 'manager/index/dashboard';
                          }?>
        <div onclick="window.location = '<?= $redir;?>';" class="indent maxheight"><?php
      }else{?>
        <div class="indent maxheight" onclick="pushDivContent2div('loginRecru','candArea','no','login')" style="cursor: pointer"><?php
      }?>
        <div class="block1 maxheight">
          <div class="maxheight bgphoto">
            <img class="maxheight" style="-ms-interpolation-mode: bicubic;" src="<?= DEFAULT_SKIN_PATH;?>images/recruteur2.jpg" />
          </div>
            <div style="position:relative">
              <div class="inner" id="contentRecr">
                <div class="title_block">
                  <a href="<?= $this->baseUrl();?>/recruteurs"><h2>E.T.T.</h2></a>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p>Maximisez vos chances de trouver le meilleur candidat pour vos clients. Avec <?=SITE_DOMAIN;?>, des milliers de candidats vous proposent leurs services et consultent chaque jour vos <strong><a href="<? $this->baseUrl();?>index/recherche?cr=poste">offres</a></strong>.</p>
              </div>
            </div>
          </div>
        </div>
 
<div class="clear"></div>
<div id='loginCand' style="display:none"><?php
  print $this->action('login2','auth','candidats');?>
</div>
<div id='loginRecru' style="display:none"><?php
  print $this->action('index2','recruteurs','default');
 
 
<script><!--
backupDivContent('recruArea');
backupDivContent('candArea');
backupDivContent('col1n2');<?php
switch ($this->link) {
 
  case 'call':
    print 'pushDivContent2div(\'call\',\'candArea\');pushDivContent2div(\'callpix\',\'recruArea\',\'no\',\'intitule\');';
    break;
  case 'candidats':
    print 'pushDivContent2div(\'loginCand\',\'recruArea\',\'no\',\'loginCandidat\');';
    break;
  case 'recruteurs':
    print 'pushDivContent2div(\'loginRecru\',\'candArea\',\'no\',\'login\');';
    break;
  case 'contact':
    print 'pushDivContent2div(\'contact\',\'col1n2\');';
    break;
  case 'about':
    print 'pushDivContent2div(\'about\',\'col1n2\');';
}?>
//--></script>?>
</div>

Voici le JS:

Code :

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

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
function pushDivContent2div(divSender,divReceiver,backup,focus) {
  if (backup && backup!='no') {backupDivContent(divReceiver)};
  divSenderHl=document.getElementById(divSender);
 
 
  divReceiverHl=document.getElementById(divReceiver);
  targetFocus=document.getElementById(focus);
 
  height = divReceiverHl.offsetHeight;
  width = divReceiverHl.offsetWidth;
  divReceiverHl.innerHTML=divSenderHl.innerHTML;
  alert(divReceiverHl.innerHTML);
  divReceiverHl.style.height = height;
  divReceiverHl.style.width = width;
  if (focus) {
      alert(focus);
    targetFocusS=document.getElementsByName(focus);
    targetFocus = targetFocusS.item(0);
    targetFocus.focus();
    targetFocus.select();
  }
  if (!isIE) new ElementMaxHeight();
}
 
function backupDivContent(divId) {
  divHl=document.getElementById(divId);
    alert("lala" + divHl.innerHTML);
  divBackup[divId] = divHl.innerHTML;
}
 
function restoreDivContent(divId) {
  if (divBackup[divId]) {
    divHl=document.getElementById(divId);
    divHl.innerHTML = divBackup[divId];
    if (!isIE) new ElementMaxHeight();
  }

Et voici ma page avec les 3 liens (MPD oublié, nos tarifs et nous contacter) sur lesquels j'aimerai effectuer le traitement (index2.phtml):

Code :

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

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
<div id="loginarea" class="FR_simpleDesign" style="text-align: left;padding: 1em;">
    <h1 style="text-align:center;padding:1.5em 0 1.5em 0">Identification Recruteur</h1>
    <form method="post" action="<?= $this->baseUrl(); ?>/manager/auth/auth" class="formstyled">
        <?php echo $this->formHidden('redirectUrl',$this->layout()->redirectUrl); ?> 
 
        <?= $this->partial('index/messenger.phtml','default',
            array('erreurs' => $this->layout()->erreurs)
        ); ?>
 
        <div id="loginform">
            <div>
                <label for="login" style="width: 40%;display:block;float:left;text-align:right;padding-right: 2%">Identifiant : </label><?php echo $this->formText('login',$this->layout()->login); ?>
            </div>
            <div style="margin-top:5px">
                <label for="pwd" style="width: 40%;display:block;float:left;text-align:right;padding-right: 2%;">Mot de passe : </label><?php echo $this->formPassword('pwd',$this->layout()->pwd); ?>
            </div>
            <div style="margin-left:42%;margin-top:6px">            
                <label for="rememberme"><?= $this->formCheckbox('rememberme', "remember", array('checked' => false));?> Se souvenir de moi
            </div>
            <div style="margin-left:42%;padding: 5px 0 10px">
                </label> <input type="submit" class="inputsubmit" name="identifier" value="Connexion" />
            </div>
            <div style="text-align:center">
                            <a  onclick="pushDivContent2div('candArea','loginRecru','no','login')">Mot de passe oubli&eacute; ?</a>
                            &nbsp;<a  onclick="pushDivContent2div('candArea','loginRecru','no','login')">Nos tarifs ?</a>
                            &nbsp;<a  onclick="pushDivContent2div('candArea','loginRecru','no','login')">Nous contacter ?</a>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        document.getElementById('login').focus();
</script>
</div>

Merci d'avance pour votre aide...

**sheira** · 28/09/2010, 10h53

Ca me redige vers une autre page:

J'ai changé mon code :

index2.phtml

Code :

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

1
2
3
<div style="text-align:center" onclick="pushDivContent2div('lostpassArea','recruArea','yes','lostPass');" >Mot de passe oubli&eacute;</div>
                         <div style="text-align:center" onclick="pushDivContent2div('loginCand','recruArea','no','loginCandidat');" >Nos tarifs</div>
                         <div style="text-align:center" onclick="pushDivContent2div('loginCand','recruArea','no','loginCandidat');" >Nous contacter</div>

Mon JS:

Code :

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

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
unction pushDivContent2div(divSender,divReceiver,backup,focus) {
  if (backup && backup!='no') {
  backupDivContent(divReceiver); 
  var vrai = new Boolean(true);
  };
  divSenderHl=document.getElementById(divSender);
divReceiverHl=document.getElementById(divReceiver);
  targetFocus=document.getElementById(focus);
 
 
  height = divReceiverHl.offsetHeight;
  width = divReceiverHl.offsetWidth;
  divReceiverHl.innerHTML=divSenderHl.innerHTML;
 
  divReceiverHl.style.height = height;
  divReceiverHl.style.width = width;
  if (focus) {
 
    targetFocusS=document.getElementsByName(focus);
    targetFocus = targetFocusS.item(0);
    targetFocus.focus();
    targetFocus.select();
 
  }
  if (!isIE) new ElementMaxHeight();
 
}
 
function backupDivContent(divId) {
  divHl=document.getElementById(divId);
  divBackup[divId] = divHl.innerHTML;
}

accueil.phtml:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id ="lostpassArea" class="col_3 maxheight withbgphoto">
   <?
$passClick = "<script language='Javascript'>document.write(vrai);</script>";
 
//echo "passClic :".$passClick;
if ($passClick===true){?>
<h2>Des probl&egrave;mes pour acc&eacute;der &agrave; votre compte ?</h2>
<p>Vous avez oubli&eacute voter mot de passe ? Saisissez votre adresse email pour y recevoir un nouveau mot de passe.</p>
<form id='form' name='form' action="<?php echo $this->baseUrl(); ?>/candidats/auth/lost" method="post" class="form" >
    <?php if ($this->message != ""): ?>
        <p><strong><font color='red'><?php echo $this->message; ?></font></strong></p>
    <?php endif; ?>
    <label for="email">Votre email</label> : 
    <br />
    <?php echo $this->formText('email',$this->email,array('class'=>'inputmed')); ?>
    <?php echo $this->formSubmit('send','Envoyer', array('class'=>'buttonSubmit')); ?>
</form>
<?php } ?></div>

J'aimerai récupérer la valeur de ma variable JS "vrai" dans mon code php mais je n'y arrive pas.
Mon

Code :

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

$passClick = "<script language='Javascript'>document.write(vrai);</script>";

ne fonctionne pas.

Merci d'avance pour votre aide

JS qui permet de modifier une div dans ma page à partir d'un clic

JavaScript

Discussions similaires

Partager

Partager