[Mootools] "getElementsByTagName" avec IE (pas sous FF) [Résolu]

[badoux]

Bonjour,

Voici mon problème :

Je charge le contenu "XML" d'un fichier PHP à l'aide de XHR inclue dans Mootools:

Code JS :

1
2
3
4
5
6
7
8
9
10
11
12
new XHR({
		method: METHOD,
		onSuccess: function(txt, xml)
		{
			if(txt != 'false')
			{
				items = xml.getElementsByTagName("item");
				size_items = items.length;
				alert(size_items);
 
				if(size_items > 0)
				{...

Quand je test sous FF le nombre d'items dans l'objet XML, il me retourne 11 (juste ), mais sous IE, il me retourne 0 (faux ), j'ai debugger le script et ça doit venir de l'attribue "getElementsByTagName". !?

Je souhaiterai connaitre votre avis sur l'utilisation de "getElementsByTagName" avec IE ?

Je souhaiterai également savoir si vous auriez une alternative à me proposer ?

Merci beaucoup

Chris

[E.Bzz]

Bonjour,

Envoyé par badoux

Quand je test sous FF le nombre d'items dans l'objet XML, il me retourne 11 (juste ), mais sous IE, il me retourne 0 (faux ), j'ai debugger le script et ça doit venir de l'attribue "getElementsByTagName". !?

ça serait plus pratique avec le script entier

A+

[badoux]

Wouaaa, super rapide !!! Impressionnant !

Désolé du retard, j'ai légerement mit le code au propre (instruction), pour que cela soit plus propre pour vous ! Désolé ci ce n'est pas le code le plus soignié qui soit !!!

Voici le script qui est appelé après avoir cliqué sur le bouton "add_your_feed"

Code JS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
Ext.onReady(function(){
	/* verifie si on click sur l'id "add_your_feed" */
	Ext.get('add_your_feed').on('click', function(e) /* si l'action "click" est détéctée, on lance une boite "prompt" qui demande un url (XML) */
	{
		Ext.MessageBox.prompt(" <?php echo $lang['add:url_feeds:titre']; ?>", " <?php echo $lang['add:url_feeds:description']; ?>", function(btn, text){
			if (btn == 'ok') /* si le bouton "ok" du prompt est cliqué */
			{
				var file = "<?php echo $racine; ?>scripts/php/check_xml_client.ajax.php"; /* chemin au fichier php */
				var url = text; /* var contenant le retour, du prompt */
				check_XML_client(file, url); /* appel de la function "check_XML_client avec le passge des variables file et url */ 
			}
		});
	});
});

Voici le script qui récupère le contenu XML généré par le fichier PHP

Code JS :

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
function check_XML_client(FILE, URL)
{
	POST = 'URL=' + escape(URL);
	METHOD = 'POST';
 
	/* Requete XHR de Mootools */
	new XHR({
		method: METHOD,
		onSuccess: function(txt, xml)
		{
			/* Si le resutat "txt" de la requete n'est pas false */
			if(txt != 'false')
			{
				items = xml.getElementsByTagName("item");/* cible les tags "item" dans l'objet XML retourné par la requete XHR */
				size_items = items.length; /* calcule le nombre de tag correspondant à "item" */
				alert(size_items); /* Debug : check le nombre de resultat retourné par "size_items" */
 
				if(size_items > 0) /* si "size_items" est plus grand que 0 (résultats) */
				{
					/* Appel de la function "LayoutExample", celle-ci affiche un layout "Window" généré par le Frameworks EXTjs */
					Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);
 
					/* cible sur les variable sur le tags */
					var title = xml.getElementsByTagName("title");
					var description = xml.getElementsByTagName("description");
					var description_small = xml.getElementsByTagName("description_small");
					var link = xml.getElementsByTagName("link");
 
					/* 
					** Ci-dessous: l'appel du premier item, afin de l'afficher dans la div "view-center"
					** START
					*/
						var first_title = title[0].childNodes[0].nodeValue;
						var first_description = description[0].childNodes[0].nodeValue;
						var first_url = link[0].childNodes[0].nodeValue;
						first = '';
						first += '<div class="row">';
						first += 	'<div class="title">' + first_title + '</div>';
						first += 	'<div class="description">' + first_description + '</div>';
						first += 	'<div class="link"><a href="' + first_url + '" target="_blank">' + tronque_string(first_url, 30) + '</a></div>';
						first += '</div>';
						document.getElementById('view-center').innerHTML = first;
						center.setTitle(tronque_string(first_title, 100));
					/* END */
 
					/* la function "addItem sera appelé par la boucle, afin d'injecter le item à la suite */
					addItem = function(item_id, item_title, item_description, item_description_small, item_link)
					{
						var addItem_row    = new Element('div', {'class': 'row'});
						var addItem_title  = new Element('div', {'class': 'title'}).setHTML(item_title).injectInside(addItem_row);
						var addItem_desc   = new Element('div', {'class': 'description'}).setHTML(item_description_small).injectAfter(addItem_title);
						var addItem_lien   = new Element('div', {'class': 'link'}).setHTML('<a href="' + item_link + '" target="_blank">' + tronque_string(item_link, 30) + '</a>').injectAfter(addItem_desc);
 
						addItem_row.inject($('view-items'));	
					}
					/* un boucle en foinction du nombre d'items contenu dans l'objet XML */
					for(i=0; i < size_items; i++)
					{
						var item_title = title[i].childNodes[0].nodeValue;
						var item_description = description[i].childNodes[0].nodeValue;
						var item_description_small = description_small[i].childNodes[0].nodeValue;
						var item_url = link[i].childNodes[0].nodeValue;
						addItem(i, item_title, item_description, item_description_small, item_url); /* appel de la fonction addItem */
					}
				}
			} else {
				Ext.Msg.alert('Error', 'Feed is not valid !'); /* Affiche une alert si aucun resultat ou si l'url du flux n'est pas correct */	
			}
		},
		headers: {'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'}
	}).send(FILE, POST);
}

Et pour finir, le code PHP qui genère le XML, renvoyé à JS:

Code PHP :

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
 
	$class = new exactly();
 
	include	($racine.'scripts/lib/magpierss-0.5.2/rss_fetch.inc');
 
		$class->rss = fetch_rss($_POST['URL']);
 
header("content-type: application/xml");
		if(sizeof($this->rss)>0)
		{
			$xml = '';
			$xml .= '<?xml version="1.0" encoding="utf-8"?>';
			$xml .= '<items>';
 
				$xml .= '<channel>';
					$xml .= '<ch-title><![CDATA['.$this->rss->channel['title'].']]></ch-title>';
					$xml .= '<ch-description><![CDATA['.$this->rss->channel['description'].']]></ch-description>';
					$xml .= '<ch-link><![CDATA['.$this->rss->channel['link'].']]></ch-link>';
					$xml .= '<ch-auteur><![CDATA['.$this->rss->channel['webMaster'].']]></ch-auteur>';
					$xml .= '<ch-language><![CDATA['.$this->rss->channel['language'].']]></ch-language>';
				$xml .= '</channel>';
 
				foreach ($this->rss->items as $item)
				{
					$xml .= '<item>';
						$title = $item[title];
						$description = $item[description];
						$url = $item[link];
						$xml .= '<title><![CDATA['.$title.']]></title>';
						$xml .= '<description><![CDATA['.$description.']]></description>';
						$xml .= '<description_small><![CDATA['.$this->tronque_string($description, 150).']]></description_small>';
						$xml .= '<link><![CDATA['.$url.']]></link>';
					$xml .= '</item>';
				}
			$xml .= '</items>';
			echo $xml;
			unset($this->rss);
		} else {
			echo 'false';
		}

[E.Bzz]

Hum ... sans vouloir être pénible, pour trouver les erreurs JS, c'est le code généré qui est nécessaire (piqué dans la page affichée dans le nav, quoi ), pas le code PHP ...

A+

[badoux]

Le soucis, c'est qu'il n'y a rien d'afficher étant donné, qu'il ne trouve pas de tags au nom de item, pourtant quand je check le retour en txt, il m'affiche bien les balise <item>..., ce qui m'intéresse de savoir, c'est pourquoi ca marche avec FF et pas avec IE, pourquoi la fonction "getElementsByTagName" ne trouve pas de tags au nom de "item" ? pense-tu que cela vienne d'une erreur généré dans le XML ?

Exemple du XML généré par le fichier PHP avec l'adresse du flux rss de techcrunch:

Code XML :

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
 
<items>
<channel>
<ch-title>CrunchBoard France</ch-title>
<ch-description>
CrunchBoard France est site d'annonce d'emploi dédié aux nouvelles technologies de l'internet et consulés par des milliers de lecteurs de TechCrunch France.
</ch-description>
<ch-link>http://crunchboardfrance.edgeio.net/index</ch-link>
<ch-auteur/>
<ch-language>en-us</ch-language>
</channel>
<item>
<title>
Country Manager France studiQG.fr / Directeur Marketing
</title>
<description>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CrunchboardFrance?a=jSjj5QOH">
<img src="http://feeds.feedburner.com/~f/CrunchboardFrance?i=jSjj5QOH" border="0"/>
</a>
<a href="http://feeds.feedburner.com/~f/CrunchboardFrance?a=p6C8MAvp">
<img src="http://feeds.feedburner.com/~f/CrunchboardFrance?i=p6C8MAvp" border="0"/>
</a>
</div>
</description>
<description_small>
Coordonnées: lfreyburger@ [...]
</description_small>
<link>
http://feeds.feedburner.com/~r/CrunchboardFrance/~3/114785896/7073764-Country-Manager-France-studiQGfr-Directeur-Marketing
</link>
</item>
...
...
...</items>

[badoux]

Voila, j'ai trouvé la réponse à mon problème. C'était la meta UTF-8 du fichier XML (celui-ci généré par PHP) qui ne passait pas sur IE 7, je l'ai donc remplacé par une meta ISO, maintenant IE m'affiche correctement le nombre de tags "item"

Ci-dessous la réponse: (pour les prochaines personnes ayant le même problème)

Changer

Code XML :

<?xml version="1.0" encoding="utf-8"?>

Par:

Code XML :

<?xml version="1.0" encoding="ISO-8859-1"?>

A plus merci encore