Discussion :

[charlottebardet]

Bonjour

Dans le cadre d'un stage de fin de DUT je dois modifier une appplication à l'aide d'Ajax.

Cette application fonctionne sur le principe des onglets (onglet1, onglet2, onglet3 ...). A l'intérieur de chacun de ces onglets se situent des petits tableaux "+" "-" présentant différentes gdesParties.

On peut ainsi ouvrir ou fermer gdePartie1, gdePartie2, gdePartie3 ... en cliquant sur des plus ou des moins.

Pour ce qui est de l'affichage instantané (sans rechargement de toute la page) lorsqu'on clique sur un "+" ou de la disparition lorsqu'on clique sur un "-" je l'ai fait en php à l'aide des display:block; display:none;

Mais à l'intérieur de ses gdesParties se situent également des sousParties que l'on peut également ouvrir ou fermer avec des "+ et "-".

L'affichage de ces sousParties ne peut s'effectuer de la même façon que l'affichage des gdesParties car elles nécessitent des calculs qui font appel à des fonctions php.
Pour cette partie j'utilise donc l'Ajax.

Malheureusement il existe déjà un fichier Ajax que le développeur précedent à créé pour les onglets.

Ci-dessous vous trouverez sa fonction pour la création de l'objet XmlHttpRequest, puis ma fonction Test à moi que je n'arrive pas à faire fonctionner.

Je ne sais pas du tout quoi passer comme paramètres lors de l'appel de sa fonction de création de l'objet XmlHttpRequest car moi la fonction que je pensais écrire pour la création de cet objet était sans paramètre .

J'obtient donc toujours la même erreur : "page_request has no properties"

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
 
--------------------------------------------------------------------------
FONCTION DEJA EXISTANTE
--------------------------------------------------------------------------
 
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadstatustext="<img src='img/loading.gif' /> Chargement en cours..."
 
////NO NEED TO EDIT BELOW////////////////////////
var loadedobjects=""
var defaultcontentarray=new Object()
var bustcacheparameter=""
 
function ajaxpage(url, containerid, targetobj){
var page_request = false
if (window.XMLHttpRequest) // Firefox et autres
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // Internet Explorer
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else{ // XMLHttpRequest non supporté par le navigateur 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
return false
}
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var i=0; i<ullist.length; i++)
ullist[i].className=""  //deselect all tabs
targetobj.parentNode.className="selected"  //highlight currently clicked on tab
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
return
}
document.getElementById(containerid).innerHTML=loadstatustext
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)
}
 
-------------------------------------------------------------------------
MA FONCTION
-------------------------------------------------------------------------
 
function go(){
	var page_request = ajaxpage(/*????????????????????????*/)
	// On défini ce qu'on va faire quand on aura la réponse
	page_request.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(page_request.readyState == 4 && page_request.status == 200){
		       alert(page_request.responseText);
		}
	}
	page_request.open("GET","ajax.php",true);
	page_request.send(null);
}
 
--------------------------------------------------------------------------

Je suis complètement perdue!
Merci d'avance pour l'aide que vous pourrez m'apporter

[Neji44]

J'ai l'impression que ton url correspond au nom de l'onglet sur lequel tu te situes, containerid égale l'id de la grande partie et targetobj égale l'objet qui va contenir ta sous-partie.

Mais je ne suis pas sûr...à vérifier!!

[charlottebardet]

Je vais regarder ça

Merci merci pour votre réponse! Je déséspérée !

[charlottebardet]

Re

Je ne vois pas vraiment comment procéder..
Un exemple d'une fonction déjà existante utilisant la fonction de création de l'objet XmlHttpRequest :


function expandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)
var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]
if (thetab.getAttribute("rel")){
ajaxpage(thetab.getAttribute("href"), thetab.getAttribute("rel"), thetab)
loadobjs(thetab.getAttribute("rev"))
}
}


ou encore


function startajaxtabs(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
return false
}
if (ulist[x].className=="selected"){
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currenly selected tab content
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files
}
}
}
}
}


Tout deux utilisent une variable préalablement déclarée (je ne comprends pas très bien à quoi sert la variable).

Je vous remet mon petit bout de code Test...

function go(){
var page_request = ajaxpage(/*????????????????????????*/)
// On défini ce qu'on va faire quand on aura la réponse
page_request.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(page_request.readyState == 4 && page_request.status == 200){
alert(page_request.responseText);
}
}
page_request.open("GET","ajax.php",true);
page_request.send(null);
}