canvas et affichage dynamique en AJAX

**hortensebass** · 30/03/2011, 11h16

salut !

voila mon probleme, je dois faire un site avec un contenu qui change sans rechargement de la page d'où l'ajax. ( donc j'ai une page "principale" dans laquelle j'affiche d'autre pages "contenu")
Or dans ce contenu je dois pouvoir afficher un canvas. Le probleme est la, le canvas n'apparait pas lorsque je regarde la contenu via la page "principale", mais lorsque je l'affiche directement "contenu.htm " je vois bien le canvas .

Voici mon code :

principale.htm :

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
 
<!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=UTF-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
 
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
 
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
 
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
 
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
 
</script>
 
</head>
 
<body>
 
<a href="javascript:ajaxpage('contenu1.htm', 'contentarea');">contenu1</a>
<a href="javascript:ajaxpage('contenu2.htm', 'contentarea');">contenu2</a>
<br>
<div id="contentarea"></div>
</body>
</html>

et voici la page contenu1.htm

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
 
<!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=UTF-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
 
var context;
var contenu = new Image();
 
window.addEventListener('load', function () {
         
        // On récupère l'objet canvas
        var elem = document.getElementById('layer0');
        if (!elem || !elem.getContext) {
                return;
        }
        
        // On récupère le contexte 2D
        context = elem.getContext('2d');
        if (!context) {
                return;
        }
        
        
        // Boucle de rafraichissement du contexte 2D
        idInterv = setInterval(refresh, 5);
        
        
        
 
},false);
 
 
function refresh() {
        
        //clearContexte(context2, 0,300, 0,300);
 
 
        context.globalAlpha = 1;
        context.fillStyle = "#FFFF22";
        context.fillRect(0,0,100,150);
        
        
}
 
function clearContexte(ctx, startwidth, ctxwidth, startheight, ctxheight) {
        ctx.clearRect(startwidth, startheight, ctxwidth, ctxheight);
}
 
 
</script>
</head>
 
<body>
CONTENU 1<br />
<canvas id="layer0" width="300" height="300" style="position: absolute; left: 0; top: 0; z-index: 0;">
    Texte si le navigateur ne supporte pas le HTML Canvas
</canvas>
</body>
</html>

**Vil'Coyote** · 30/03/2011, 12h11

est tu sur que l'utilisation est bonne ?
car j'ai l'impression que ta page principale.htm va via ajax chercher ta page contenu1.htm pour la mettre dans le div <div id="contentarea"></div> et ce sans retravailler cette derniere.
donc en gros tu va charger une page contenant un head, un body dans une page qui en contient déja donc ton script javascript de caneva présent dans ta seconde page ne devrais pas pouvoir fonctionner.

enfin c'est comme ça que j'interprète le code donné.

**hortensebass** · 30/03/2011, 12h17

effectivement c'est ca le soucis! merchi , mais du coup comment traiter la page pour qu'elle puisse etre interpreté completement ( head , body )?

**Vil'Coyote** · 30/03/2011, 12h48

le mieux serait de regrouper tes fonction dans un fichier js exterieur charger une seule fois dans ta première page et dans la seconde qui doit être intégrer ne mettre que les élément devant se placer entre les balise <body></body> (sans ses dernière bien sur).

**hortensebass** · 30/03/2011, 13h47

je viens de déplacer la partie javascript de contenu.htm dans la page principale, mais le résultat est le même

deplus avec cette methode je perds l'intérêt qui était de tout mettre sur une autre page bien indépendante de la page principale

**hortensebass** · 30/03/2011, 14h58

c'est etrange parceque je viens de mettre la partie javascript dans le <body> et normalement ca devrait fonctionner mais ca n'est pas le cas ... donc le probleme semble venir d'ailleurs

**Vil'Coyote** · 31/03/2011, 01h08

passe par firefox et regarde la console d'erreur s'il n'y a pas de souci avec ton jvs.

canvas et affichage dynamique en AJAX

HTML

Discussions similaires

Partager

Partager