Discussion :

[mariogarcia]

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

[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 genre

[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 :

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

<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

[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 :

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

1
2
<div class="qqch">
</div>

merci je continue mes recherches sur ajax.

[Swoög]

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

[mariogarcia]

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 :

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
<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.

[mariogarcia]

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

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
 
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.