[HTML] click lien sur une cellule et page qui s'ouvre dans une autre cellule

Version imprimable

21/05/2006, 22h15
mariogarcia

[HTML] click lien sur une cellule et page qui s'ouvre dans une autre cellule

bonjour, j'aimerai faire le suivant, j'ai un button dans une cellule d'un tableau et j'aimera que le lien qui appelle ce button s'ouvre dans une autre cellule qui serait comment la cellule principale? est-ce possible? ou les tableau ne sont pas une bonne idée, j'ai fait des tableau ainsi j'évite les frames. pas bon pour le référencement.
merci d'avance.
mario
21/05/2006, 23h27
Kerod

Utilises des calques (div) et etc...

Pour ta question tu voudrais mettre tout le code directement dans le td sans iframe et fenetre de ce genre8O
21/05/2006, 23h43
Swoög

Les tableaux ne sont pas tip top non plus, le mieux est le CSS (cf lien dans ma signature) (sauf données tabulaires évidemment ;) )

sinon, si tu veux que seule une partie de la page soit modifiée, il te faudra utiliser AJAX (cf tutos dans la section JavaScript ;) ) mais ce n'est pas top non plus pour le référencement

sinon il n'y a pas d'autres moyens pour le moment de simuler l'effet des frames...

le mieux serait que tu fasses une fonction (en JS, grâce à AJAX) qui prenne en paramètre la page à afficher (son URL) et l'id du div dans le quel tu veux afficher la page...

Ensuite, tu modifies ton site, (grâce à PHP par exemple) pour pouvoir avoir quelque chose qui fasse que tu fournis ou non les éléments de design avec tes pages... exemple :

http://www.monsite.com/mapage.php ==> fournit la page complète, avec balise head, body, la totale

http://www.monsite.com/mapage.php?only_contenu=on ==> fournit uniquement les données de la page (la partie qui change par rapport au design des autres pages, ce que tu appelles la cellule principale ;) )

comme ça ensuite, tes liens auront cette forme :

Code:

<a href="lapage.php" onclicke="return ! fonction_AJAX(this.href + '?only_contenu=on', 'id_du_div_principal');">cliquer ici</a>

et la fonction retourne true si AJAX marche bien, et false sinon...

comme ça si AJAX marche pas le lien fonctionnera quand même, et pour les moteurs de recherche, c'est tout bénèf puisqu'ils suivront le lien et référenceront quand même la page ;)

si c'est pas super clair après avoir lu les tutos sur AJAX, héiste pas à poser des questions ;)
22/05/2006, 23h27
mariogarcia
en effet j'aurais un menu horizontale, avec quatre onglets chaque onglet se refere a une partie differente de mon site, et j'aimerai que quand je clique sur un onglet; le menu qui se trouve a gauche change.
maintenant, peut je faire une référence vers une page html externe? je m'explique, j'ai des pages écrites en html et je me demande s'il y a un autre moyen de faire afficher les pages dans un div que celui de copier et coller le code de ma page externe vers mon nouveau bloc
Code:

1 2 <div class="qqch"> </div>
merci je continue mes recherches sur ajax.
22/05/2006, 23h48
Swoög

oui, il y a moyen, avec la solution que je t'ai indiquée

bonjour, j'ai lu les tutoriaux sur ajax mais tous semblent se pencher vers l'autocompletion. je ne sais pas si ce que j'ai besoin ici est du domaine de l'auto completion,
pour ajax j'ai commence a écrire l'objet xhr car dans tous les tutoriaux on commence pour écrire ceci..
mes connaissances en js sont assez nulles, car j'ai jamais fait auparavant, d'ailleurs celui ci serait mon premier site demi-dynamique. j'ai crée ce que je crois être l'équivanlent de ce que swoög a propose: mapage.php. avec les div et tout le reste.
j'ai des pages separées qui devront aller dans les div, mais je vois pas vraiment d'exemple ou de tutoriaux en ce domaine concernant ajax. et je ne comprend pas comment faire pour créer la fonction js qui prenne en parametre l'url (fichier php ou htm) et l'id du div correspondant et l'affiche en ce div.
voici le code que j'ai eu,

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
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="test" type="text/css" rel="stylesheet" href="navstyle.css">
<title>colombia la bella</title>
<script type="text/javascript">
    function getXhr(){
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest(); 
                else if(window.ActiveXObject){ // Internet Explorer 
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur 
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                   xhr = false; 
                } 
            }
</script>
<style type="text/css">
    .window {
        height: 768px;
        width: 1024px;
        background-color:#FFFFFF;
    }
    .maincontainer{
        padding-top: 39px;
        padding-left: 39px;
        padding-right:39px;
        padding-bottom: 39px;
    }
    .mainwindow {
     height: 690px;
     width:  946px;
     background-color:#CCCCCC;
    }
    .header{
    padding-left: 0px;
    height:90px;
    width: 946px;
    background-color:#00148E;
    }
    .bannercolombia{
        float:right;
        }
     .logosite{ 
         float:left;
        }
    .menu{
        height: 576px;
        width: 180px;
        background-image:url(images/bgmenu.gif);
        background-color: #DA0010;
        float:left;
        }
     .main{
        height: 576px;
        width: 766px;
        background-color:#FFFFFF;
        float:left
        }
        .navbar{
          height: 39px;
          width: 766px;
          background-color:#FFFFFF;
          }
</style>
 
</head>';
 
<body bgcolor="#FFFFFF">
<div class="window"> 
    <div class="maincontainer">
        <div class="mainwindow">
            <div class="header">
             <img class="bannercolombia" src="images/bannercolombia.gif" alt="bannercolombia" />
             <img class="logosite" src="images/logosite.gif" alt="logosite" />
            </div>
            <div class="menu">
            </div>
            <div class="main">
                <div class="navbar">
                </div>
            </div>
      </div>
    </div>
</div>
</body>
</html>

ici la page est encore en html.. je dois la convertir en php? si oui il existe de fonctions php pour ce faire?
merci et excusez moi pour autant des questions.

j'ai avancé un petit peu, en ce qui concerne la fonction

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
 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}function ShowPage(page)
{
getXhr()
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax1.php?page="+page,true);
xhr.send(null);
}

la fucntion showpage est celle qui devrai prendre l'url mais comment faire pour le div id ? ou div class?
je vois vraiment pas.

24/05/2006, 09h31
<romain/>
Pour commencer je rejoins Swoög dans le fait que les tableaux c'est pas tip top. C'est pas fait pour faire ça. Porquoi ne pas utiliser les paragraphes, listes et autres bloc fournient par (x)html dont c'est la véritable fonction?

Ensuite tu semble partie pour faire du javascript, c'est bien mais sache que environs 10% des internautes ont leur javascript de désactivé, en faisant ca tu les "exclu" de ton site...

Je te conseil de faire un peu de php, rien de bien méchant et pourtant ca correspond exactement a ce que tu veux faire (du moins ce que j'ai compris ;))

il te suffit d'avoir des url de ce type la par exemple:
www.monsite.fr/index.php?lien=1

Et ensuite dans le bloc ou tu veux inserer tes liens (ou bien la cellule si tu gardes l'option tableau...) tu aura quelque chose comme ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <?php if ($_GET['lien']=='1') { include ('lien1.htm'); } else if ($_GET['lien']=='2') { include ('lien2.htm'); } | | | etc. ?>
24/05/2006, 10h09
mariogarcia

j'ai voulu faire du ajax... il parait que c'est très bien...
oui j'ai maintenant compris grace au site que j'ai mis auparavant que c'est possible,
je n'utilise plus les tableaux si tu vois bien dans mon code il n'y a plus il n'y a que des blocs <div>
et j'ai reussi a faire une partie de ce que tu propose, le probleme que vient maintenat et comment faire pour qu'une page ne depase pas les dimensions du <div> et qu'a la place il aie des ascenceurs?
merci beaucoup, ton aide est le bienvenue en ce moment surtout.
24/05/2006, 10h14
Swoög

pour ce qui est des acenseurs dans le div, c'est du CSS : fixe la taille du div (avec height et width) puis ajoute la propriété "overflow : auto" ;)

pour ce qui est du div, pour l'identifier utilise plutôt une id (comme ça, getElementById et hop on en parle plus ;) )

@<romain/> : la solution que j'ai proposé plus haut permet justement d'utiliser AJAX et JS pour les utilisateurs chez qui c'est compatible, et recharger entièrement la page pour les autres (ce qui a en plus pour effet d'être aprécié par les moteurs de référencement, etc... ;) )
24/05/2006, 10h18
<romain/>

@mariogarcia :oups oui dsl j'avais pas vu ;) (pas trop réveillé surement)
Pour les ascenceur normalemment c'est automatique...dès que le site est plus grand que la page. Enfin je suis pas sur de bien comprendre...:oops:

@Swoög=> je savais pas qu'on pouvait faire ca... je me coucherait moins con ce soir lol ;)
24/05/2006, 10h20
Swoög

lol, en développement web, tout ce qui est réellement pratique est possible ou presque (sauf faille de sécu ;) ) parfois directement :D parfois par des moyens détournés ;)

pour ce qui est des scroll, je pense qu'il voulait dire "uniquement sur un div" (comme si c'était une iframe quoi ;) ) [dans ce cas : taille fixe + overflow ^^]
24/05/2006, 10h40
mariogarcia

j'ai change les class par Id et mis dans la feuille de style #id au lieu de .id
car j'ai vu beaucoup d'exemples qui c'était comme cela
mais je n'arrive toujours pas a faire ce que tu as propose dans ton premier(swoög) post. et je peux pas etre blâme de ne pas avoir essayé.
j'ai trouve overflow auto.. cela fonctione.. merci de ce cote là..
24/05/2006, 10h45
Swoög

il faut que tu indiques l'id du div là :

Code:

document.getElementById('').innerHTML=xhr.responseText;

ensuite, que n'arrives-tu pas à faire ?

j'ai mis l'id la dans mon code;.
j'ai une page qui s'appelle "menu navigation tab.htm' j'aimerai qu'elle apparaise dans le div class navbar; cela j'ai fait avec require 'menu navigationtab.htm';
je veux que quand je clique sur un des 'buttons de ce menu navigationtab la page qui se trouve dans le div id menu1 change vers une autre page par exemple menu1.htm;-->menu2.htm.. etc
et que ces pages menu1.htm..etc sont evidement des menus, j'aimerai que quand je clique sur des buttons de menus il y ai des autres pages externes qui se chargent dans le dvd Id main..
voilà c'est en gros ce que je dois faire

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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="test" type="text/css" rel="stylesheet" href="navstyle.css">
<title>colombia la bella</title>
<script type="text/javascript">
    <script type='text/JavaScript'>
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
function ShowPage(page)
{
getXhr()
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('main').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}
 
</script>
<style type="text/css">
    .window {
        height: 768px;
        width: 1024px;
        background-color:#FFFFFF;
    }
    .maincontainer{
        padding-top: 39px;
        padding-left: 39px;
        padding-right:39px;
        padding-bottom: 39px;
    }
    .mainwindow {
     height: 690px;
     width:  946px;
     background-color:#CCCCCC;
    }
    .header{
    padding-left: 0px;
    height:90px;
    width: 946px;
    background-color:#00148E;
    }
    .bannercolombia{
        float:right;
        }
     .logosite{ 
         float:left;
        }
    #menu1{
        height: 576px;
        width: 180px;
        background-image:url(images/bgmenu.gif);
        background-color: #DA0010;
        float:left;
        }
     #main{
        height: 576px;
        width: 766px;
        background-color:#FFFFFF;
        float:left;
        overflow:auto;
        }
        .navbar{
          height: 39px;
          width: 766px;
          background-color:#FFFFFF;
          padding-bottom: 0px;
          float:left;
          }
         .menu {
list-style-type: none;
margin: 0;
padding: 0;
}
 
.menu a {
  display: block;
  width: 9em;
    height: 1.5em;
    font-family: verdana,helvetica,arial,sans-serif;
  font-size: 70%;
  font-weight: bold;
    background-color: #ffe800;
    text-align: center;
    color: #000;
  text-decoration: none;
    margin: 20px 0;
}
.menu a:link, .menu a:visited {
  border-top: 1px solid #cecece;
  border-bottom: 2px solid #4a4a4a;
  border-left: 1px solid #cecece;
  border-right: 2px solid #4a4a4a;
}
.menu a:hover {
  border-bottom: 1px solid #cecece;
  border-top: 2px solid #4a4a4a;
  border-right: 1px solid #cecece;
  border-left: 2px solid #4a4a4a;
}
 
 
a.test {text-decoration: none;
color: #222;
}
a.test:hover{text-decoration: underline;
}
-->
</style>
 
</head>
 
<body bgcolor="#FFFFFF" onLoad="ShowPage(1)">
<div class="window"> 
    <div class="maincontainer">
        <div class="mainwindow">
            <div class="header">
             <img class="bannercolombia" src="" alt="bannercolombia" />
             <img class="logosite" src="" alt="logosite" />
            </div>
            <div id="menu1">
            </div>
            <div id="main">
 
            </div>
        mario garcia 2006
      </div>
</div>
</body>
</html

et ton problème est ? tu n'appelles jamais ta fonction AJAX...

exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function ShowPage(page)
{
getXhr();
if(!xhr) return false;
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('main').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
return true;
}

Code:

1
2
3
4
                    <li><a href="index.php?page=bienvenus" onclick="return !ShowPage('bienvenus');">Bienvenus</a></li>
                    <li><a href="index.php?page=generalinfo" onclick="return !ShowPage('generalinfo');">generalités</a></li>
                    <li><a href="index.php?page=diversite" onclick="return !ShowPage('diversite');">diversité</a></li>
                    <li><a href="index.php?page=changement" onclick="return !ShowPage('changement');">changement</a></li></ul></center>

24/05/2006, 11h12
mariogarcia

ce code je dois le mettre ou?
dans index.php? dans menu.html? ou dans la page que je veux que cela soit charge? ou la ou se trouvent les buttons..
merci, mille et une fois.
24/05/2006, 11h20
Swoög

tu dois reconnaitre en partie ton code existant, il suffit de le remplace par la version modifiée
24/05/2006, 11h39
mariogarcia

je reconnais ce code... mais comment je l'ai deja dit, j'ai ces menu dans des pages externes..
il y a une page principale avec body, header et les divs, puis il y a une page menunavigationbar et une autre menu.. pour que cela fonctionne je dois copier tous ce qui il y a dans les pages externes dans la page index.php.. il faut dans ce cas faire des boucles selon..
car si je mets ce que tu m'as donné dans la page externe menu.html et en guise de text fait un require dans la page index.php l'id main reste vide et vierge
m'ai je fait comprendre?
merci.

tu as une erreur JS qui s'affiche ?

essaie de mettre (pour voir si c'est le serveur qui retourne une erreur ;)) :
Code:

1 2 3 4 5 if(xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); document.getElementById('main').innerHTML=xhr.responseText; } else { alert(xhr.readyState); alert(xhr.status); }

j'ai ma page "menu.html" qui se rassemble a ceci.

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
 
<script type="text/javascript">
    <script type='text/JavaScript'>
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
function ShowPage(page)
{
getXhr()
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('main').innerHTML=xhr.responseText;
     }else { alert(xhr.readyState); alert(xhr.status); }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}
 
</script>
 
</head>
<body>
    <center><ul class="menu">
 <li><a href="index.php?page=bienvenus" onclick="return !ShowPage('bienvenus');">Bienvenus</a></li>
 <li><a href="index.php?page=generalinfo" onclick="return !ShowPage('generalinfo');">generalités</a></li>
 <li><a href="index.php?page=diversite" onclick="return !ShowPage('diversite');">diversité</a></li>
 <li><a href="index.php?page=changement" onclick="return !ShowPage('changement');">changement</a></li></ul></center>
 
</body>
</html>

j'ai mis l'alerte mais je n'ai pas de boite de message type alert.
ma page ajax.php ressemble a ceci..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!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>ajax.php</title>
</head>
 
<body>
<?php
$page=$_GET['page'];
     if($page==bienvenus)require 'colombiapres.htm';
else if($page==generalinfo)require 'generalinfo.html';
else if($page==diversite)require 'diversite.php';
else require 'changement.php';
?>
</body>
</html>

24/05/2006, 11h59
Swoög

coucou ^^

Pas la peine de regénérer toute la page, la suite de if/elseif avec les includes est suffisante ^^
24/05/2006, 12h19
mariogarcia

tu veux dire de poster ici toute la page? ou dans mes liens?
je n'ai pas tres bien compris ce que tu voulais dire?
excuse moi!

pas la peine de tout mettre dans ajax1.php, ceci suffit :

Code:

1
2
3
4
5
6
7
<?php
$page=$_GET['page'];
     if($page==bienvenus)require 'colombiapres.htm';
else if($page==generalinfo)require 'generalinfo.html';
else if($page==diversite)require 'diversite.php';
else require 'changement.php';
?>

24/05/2006, 13h31
mariogarcia

donc je n'ai pas beson des fichiers ajax*.php je dois tout simplement mettre ceci un a la suite de l'autre dans les balises <div></div>?
c'est ce que j'ai compris du moins, corrigez moi si j'ai tort.
merci
24/05/2006, 14h27
Swoög

non, car sinon il te faudra recharger toute la page à chaque fois pour regénérer le contenu...
24/05/2006, 14h37
mariogarcia

eh bien.. la seule façon que cela marche ici est en copiant le contenu des fichiers ajax*.php à l'intérieur des div..de la page index.php sinon, c'est impossible.. et je ne sais pas d'ou vient le problème...