Probleme avec getElementById

**nabab** · 05/02/2007, 14h40

Bonjour,

J'essaie de faire qqs tests en Ajax, et je cale sur un truc bete, mais je commence a m'arracher les cheveux...
Pouvez-vous m'aider?
C'est un script provenant de http://www.xml.com/pub/a/2005/02/09/...p-request.html que j'essaie d'adapter mais je garde une erreur sur mon getElementById (no properties), alors que j'ai mis une alert juste en dessous avec le meme getElementById et qui fonctionne...
2 fichiers; le probleme se situe dans la fonction checkName...

ajax.php

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
 
<!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>Ajax</title>
 
<script type="text/javascript">
var req;
 
function loadXMLDoc(url) 
{
	// branch for native XMLHttpRequest object
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send(null);
		// branch for IE/Windows ActiveX version
	} 
	else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req) {
			req.onreadystatechange = processReqChange;
			req.open("GET", url, true);
			req.send();
		}
	}
}
 
function checkName(input, response, id)
{
  if (response != ''){ 
    // Response mode
    message   = document.getElementById('nameCheckFailed');
    if (response == '1'){
      message.className = 'error';
      document.getElementById(id).value = '';
      document.getElementById(id).focus();
    }
		else {
      message.className = 'hidden';
    } 
  }
	else {
    // Input mode
    url = 'ajax2.php?q=' + input;
    loadXMLDoc(url);
  }
			alert(document.getElementById(id).value);
 
}
 
function processReqChange() 
{
	// only if req shows "complete"
	if (req.readyState == 4) {
		// only if "OK"
		if (req.status == 200) {
			// ...processing statements go here...
			response = req.responseXML.documentElement;
			method = response.getElementsByTagName('method')[0].firstChild.data;
			result = response.getElementsByTagName('result')[0].firstChild.data;
			eval(method + '(\'\', result)');
		} 
		else {
			alert("There was a problem retrieving the XML data:\n" + req.statusText);
		}
	}
}
</script>
<style type="text/css">
<!--
span.hidden{
  display: none;
}
 
span.error{
  display: inline;
  color: black;
  background-color: pink;  
}
-->
</style>
</head>
 
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<input id="username" name="username" type="text" onblur="checkName(this.value,'','username')" />
<span class="hidden" id="nameCheckFailed">
  This name is in use, please try another.
</span><br />
<br />
<input id="test" name="test" type="text" />
</form>
</body>
</html>

ajax2.php

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
 
<?php
header('Content-Type: text/xml');
 
function nameInUse($q)
{  
  if (isset($q)){
    switch(strtolower($q))
    {
      case  'drew' :
          return '1';
          break;
      case  'fred' :
          return '1';
          break;
      default:
          return '0';
    }
  }
        else{
    return '0';
  }
  
}
?>
<?php echo '<?xml version="1.0" encoding="UTF-8"
  standalone="yes"?>'; ?>
<response>
  <method>checkName</method>
  <result><?php 
    echo nameInUse($_GET['q']) ?></result>
</response>

Merci de votre aide!

**E.Bzz** · 05/02/2007, 14h54

Bonjour,
input, response et id sont des mots réservés : évite !
(=> the_input, the_response, the_id par ex)

A+

**nabab** · 05/02/2007, 15h20

J'ai mis des the_ avant chacune de ces variables, mais le probleme reste le meme, cad getElementById(the_id) has no properties...
Merci quand meme

**grimsk** · 05/02/2007, 15h36

Regarde quel type d'object tu recoit

Code :

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

1
2
      obj =     document.getElementById(id);
      alert( obj );

et c'est bien ton input?
tout est bien définie?

**nabab** · 05/02/2007, 15h49

object HTMLInputElement

Merci

**nabab** · 05/02/2007, 15h51

Je crois que tout est bien defini.
Ce que je ne comprends vraiment pas c'est que

alert(document.getElementById(the_id).value);

qui est dans la meme fonction me renvoit bien la valeur.

**grimsk** · 05/02/2007, 15h55

Si tu initialise l'attribut 'value' directement dans ta source html sa fonctionne toujours pas?

Code :

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

<input value="" id="username" name="username" type="text" onblur="checkName(this.value,'','username')" />

de mon côté tout fonctionne bien ... alors je n'ai aucune idée ou que sa accroche...

essaye ..

Code :

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

alert( typeof( document.getElementById( id ).value ) );

.. ca va p-e te donner une piste

**nabab** · 05/02/2007, 16h07

Alors j'ai toujours la meme reaction, a savoir le calque apparait bien, mais ce qui plante c'est ca:

document.getElementById( id ).value = '';
document.getElementById( id ).focus();

Par contre si je fais directement ca dans la fonction:

document.getElementById('username').value = '';
document.getElementById('username').focus();

Ca marche. Donc ca vient de ma variable id qq part

Pour toi, la reinitialisation du champ et le focus fonctionnent?

Je vais essayer ce que tu viens de poster.

Merci

**nabab** · 05/02/2007, 16h08

Ca me renvoit: string

**grimsk** · 05/02/2007, 16h29

es que ta variable the_input va toujours être setter?

essaye avec the_input.value ...

**nabab** · 05/02/2007, 16h37

Envoyé par grimsk

es que ta variable the_input va toujours être setter?

essaye avec the_input.value ...

Je suis desole, je comprends pas... setter? Ou veux-tu que je mette the_input.value?

**nabab** · 05/02/2007, 18h04

Ca y est je l'ai eu!

En fait c'est la fonction XML qui renvoit les variables pour la fonction.

Ainsi voici le meme code, mais qui marche de bout en bout cette fois, mais il a fallu changer ajax2.php:

ajax.php:

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
 
<!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>Ajax</title>
 
<script type="text/javascript">
var req;
 
function loadXMLDoc(url) 
{
	// branch for native XMLHttpRequest object
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send(null);
		// branch for IE/Windows ActiveX version
	} 
	else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req) {
			req.onreadystatechange = processReqChange;
			req.open("GET", url, true);
			req.send();
		}
	}
}
 
function checkName(the_input, the_response)
{
  if (the_response != ''){ 
    // Response mode
    message   = document.getElementById('nameCheckFailed');
    if (the_response == '1'){
      message.className = 'error';
			document.getElementById( the_id ).value = '';
			document.getElementById( the_id ).focus();
    }
		else {
      message.className = 'hidden';
    } 
  }
	else {
    // Input mode
    url = 'ajax2.php?q=' + the_input;
    loadXMLDoc(url);
  }
}
 
function processReqChange() 
{
	// only if req shows "complete"
	if (req.readyState == 4) {
		// only if "OK"
		if (req.status == 200) {
			// ...processing statements go here...
			response = req.responseXML.documentElement;
			method = response.getElementsByTagName('method')[0].firstChild.data;
			result = response.getElementsByTagName('result')[0].firstChild.data;
			the_id = response.getElementsByTagName('the_id')[0].firstChild.data;
			eval(method + '(\'\', result)');
		} 
		else {
			alert("There was a problem retrieving the XML data:\n" + req.statusText);
		}
	}
}
</script>
<style type="text/css">
<!--
span.hidden{
  display: none;
}
 
span.error{
  display: inline;
  color: black;
  background-color: pink;  
}
-->
</style>
</head>
 
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<input value="" id="username" name="username" type="text" onblur="checkName(this.value,'')" />
<span class="hidden" id="nameCheckFailed">
  This name is in use, please try another.
</span><br />
<br />
<input id="test" name="test" type="text" />
</form>
</body>
</html>

ajax2.php:

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
 
<?php
header('Content-Type: text/xml');
 
function nameInUse($q)
{  
  if (isset($q)){
    switch(strtolower($q))
    {
      case  'drew' :
          return '1';
          break;
      case  'fred' :
          return '1';
          break;
      default:
          return '0';
    }
  }
        else{
    return '0';
  }
  
}
?>
<?php echo '<?xml version="1.0" encoding="UTF-8"
  standalone="yes"?>'; ?>
<the_response>
  <method>checkName</method>
  <result><?php 
    echo nameInUse($_GET['q']) ?></result>
  <the_id>username</the_id>
</the_response>

Merci quand meme pour votre aide!

Probleme avec getElementById

JavaScript

Discussions similaires

Partager

Partager