Discussion :

[sliderman]

Bonjour,

Je souhaite utiliser DOM pour modifier un élément HTML, tout en le gardant en mémoire.
L'élement que je souhaite changer est en fait une liste déroulante. Elle est rempli par Ajax au chargement de la page.
Donc voici la feuille js qui le fais

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
93
94
95
96
97
window.onload=init;
var companyHTML = null;
var type='<p id="temp"> <p id="comp-type"><label class="csslabel" for="type">Company type</label>'+
	'Customer : <input type="radio" value="client" name="typeCompany" checked="checked" />'+
	'Partner : <input type="radio" name="typeCompany" />'+
	'OEM : <input type="radio" name="typeCompany" /></p>'+
	'<p id="comp-cont"><label class="csslabel" for="contract">'+
	'Contract type</label>US : <input type="radio" value="us" name="contract"'+
	'checked="checked" />EU : <input type="radio" value="eu" name="contract" />'+
	'</p><p id="comp-add"><label class="csslabel" for="addressCompany">Adress'+
	'</label><input type="text" name="addressCompany" /></p><p id="comp-code">'+
	'<label class="csslabel" for="zipCodeCompany">Zip code</label>'+
	'<input type="text" name="zipCodeCompany" /></p><p id="comp-prov">'+
	'<label class="csslabel" for="provinceCompany">Province</label>'+
	'<input type="text" name="provinceCompany" /></p></p^>';
var para_country='<p id="para_country">'+
			'<label class="csslabel" for="country">Country : </label>'+
			'<select id="country" name="country">'+
			'<option value="">Select your country</option>'+	
			'</select>'+
		'</p>';
function init()
{
	var xhr = null;
	if (window.XMLHttpRequest)
	{
	  xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) 
	{
 		try 
  		{ 
    		xhr = new ActiveXObject("Msxml2.XMLHTTP");
  		} 
  		catch (e) 
  		{
     		try 
     		{ 
        		xhr = new ActiveXObject("Microsoft.XMLHTTP");
     		} 
     		catch (e) 
     		{
       			window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
     		}
  		} 
	}
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState==4)
		{
			if (xhr.status==200)
			{
				var array = xhr.responseXML.firstChild.childNodes;
				for(var i = array.length - 1 ; i >=0; i--)
   				{
					var id = array[i].getAttribute('id');
	  			  	var name = array[i].getAttribute('name');
	 		  		var option = document.createElement("option");
	  			 	option.setAttribute("value",id);
	   				var companyName = document.createTextNode(name);
	   				option.appendChild(companyName);
	   				$('nameCompany').appendChild(option);
				}
			}
		}
	}
	xhr.open("GET",'./web-services/list-companies.php',true)
	xhr.send(null);
	$('switcher').onclick = twist;
}
function twist()
{
	if($('switcher').name=="add")
	{
		var attributes=new Array();
		attributes["type"]="text";
		attributes["id"]="nameCompany";
		attributes["name"]="nameCompany";
		companyHTML = replaceElement('nameCompany','input',attributes);
		Element.insert($('para_company'),{after : type});
		Element.insert($('para_company'),{after : para_country});
		$('switcher').value="Select an existing company";
		$('switcher').name="select"
	}
	else if($('switcher').name=="select")
	{
		var t = $('para_company').removeChild('nameCompany');
		$('comp-add').remove();
		$('comp-code').remove();
		$('comp-prov').remove();
		$('comp-type').remove();
		$('comp-cont').remove();
		$('para_country').remove();
		$('switcher').value="Add a company";
		$('switcher').name="add";
	}
}

et voici ma fonction pour remplacer un élement

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function replaceElement(id,typeOf,array)
{
	var elementBefore = document.getElementById(id);
	var newElement = document.createElement(typeOf);
	for(var i in array)
	{
		var attribute = document.createElement(array[i]);
		newElement.setAttribute(i,attribute);
	}
	document.removeChild(id);
	return elementBefore;		
}

mais voila, firefox (le plus récent de la version 2) me pête un cable. Il me dit (enfin firebug)

Code :

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

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost/skyline/javascript/skyrecon.js :: replaceElement :: line 61" data: no]

et cette ligne correspond à

Code :

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

document.removeChild(id);

[DoubleU]

Code :

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

replaceElement('nameCompany','input',attributes);

J'aurais tendance a dire que c'est parce que tu files à removeChild un string et pas un noeud DOM ^^

[sliderman]

Code :

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

replaceElement('nameCompany','input',attributes);

J'aurais tendance a dire que c'est parce que tu files à removeChild un string et pas un noeud DOM ^^

c'est vrai c'est aussi simple que cela

Code :

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

document.removeChild(document.getElementById(id));