Afficher une div avec un traitement Ajax

Version imprimable

Bonjour,

Je débute avec cette librairie et je cherche à faire un test : afficher le contenu d'une div avec un traitement Ajax, mais rien ne se passe au clique sur le bouton.
Pouvez-vous m'aider à trouver mon erreur ? :

Dans la console d'erreurs de Firefox j'ai cette erreur au chargement de la page :

Code:

1
2
3
4
5
6
7
8
9
10
11
Erreur*: Ext.EventManager is undefined
Fichier Source*: file:///C:/www/sites/extJS/ext-3.2.1/adapter/ext/ext-base.js
Ligne*: 7
 
Erreur*: o is undefined
Fichier Source*: file:///C:/www/sites/extJS/ext-3.2.1/ext-all.js
Ligne*: 7
 
Erreur*: Ext.onReady is not a function
Fichier Source*: file:///C:/www/sites/extJS/ext-3.2.1/ExtStart.js
Ligne*: 1

ExtStart.html :

Code:

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
<!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>
    <title>Test Ajax</title>
 
    <!-- Include YUI utilities and Ext: -->
    <script type="text/javascript" src="adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="adapter/yui/ext-yui-adapter.js</script>
    <!-- <script type="text/javascript" src="ext-all-debug.js"></script> -->
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ExtStart.js"></script>
 
    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="resources/css/ytheme-vista.css">
    <!-- <link rel="stylesheet" type="text/css" href="ExtStart.css"> -->
</head>
<body>
 
<div id="msg" style="visibility: hidden"></div>
 
Name: <input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />
 
</body>
</html>

ExtStart.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
Ext.onReady(function(){
 
	Ext.get('okButton').on('click', function(){
		var msg = Ext.get("msg");
		msg.load({
			url: ['traitement.php'], // <-- replace with your url
			params: "name=" + Ext.get('name').dom.value,
			text: "Updating..."
		});
		msg.show();
	});
 
});

traitement.php :

Code:

1
2
3
4
<?php if(isset($_POST['name'])) {
                echo 'From Server: '.$_POST['name'];
        }
?>

Merci pour votre aide.

ok, et bien procedons par etapes ...

1. dabord Extjs puis YUI ...

Code:

1
2
3
4
5
6
7
8
9
    <!-- Include YUI utilities and Ext: -->
 
    <!-- <script type="text/javascript" src="ext-all-debug.js"></script> -->
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ExtStart.js"></script>
 
    <script type="text/javascript" src="adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="adapter/yui/ext-yui-adapter.js</script>

apres tu testes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Ext.onReady(function(){
 
          alert('test 1');
	/*Ext.get('okButton').on('click', function(){
		var msg = Ext.get("msg");
		msg.load({
			url: ['traitement.php'], // <-- replace with your url
			params: "name=" + Ext.get('name').dom.value,
			text: "Updating..."
		});
		msg.show();
	});*/
 
});

2. le code ...

Code:

1
2
3
4
5
6
7
8
9
 
var msg = Ext.get("msg");
                         alert(Ext.get('name').dom.value);// si rien dans l'alert, alors pb !!!
		msg.load({
			url: 'http://www.toto.com/traitement.php', // pas de crochet
			params:{ name:Ext.get('name').dom.value},
			text: "Updating..."
		});
		//msg.show();<= inutile

Code:

alert('test 1');

Ne donne rien ni ce bout de code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
Ext.onReady(function(){
 
var msg = Ext.get("msg");
                         alert(Ext.get('name').dom.value);// si rien dans l'alert, alors pb !!!
		msg.load({
			url: 'traitement.php', // pas de crochet
			params:{ name:Ext.get('name').dom.value},
			text: "Updating..."
		});
		//msg.show();<= inutile
 
});

J'ai l'impression que les fichiers Extjs ne sont pas accessibles, dans la console d'erreurs de firefox j'ai systèmatiquement cette erreur :

Code:

1
2
3
4
5
6
7
Erreur*: Ext is not defined
Fichier Source*: http://domicile/ext-3.2.1/ext-all.js
Ligne*: 7
 
Erreur*: Ext.onReady is not a function
Fichier Source*: http://domicile/ext-3.2.1/ExtStart.js
Ligne*: 1

Bonsoir,

si tu n'arrive pas a avoir l'alerte, c'est un pb ... du chemin de tes fichier ext.
le onReady s'execute à la fin du chargement de tous les fichiers ext.js

ps ...apparament, ta lib Ext se trouve dans le meme repertoire que ton fichier html ...

tu devrais le mettre dans un repertoire extjs au moins ... ca sera mieux:ccool:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="resources/css/ytheme-vista.css">
    <!-- <link rel="stylesheet" type="text/css" href="ExtStart.css"> -->
 
 
 
  <!-- Include YUI utilities and Ext: -->
     <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
 
    <!-- <script type="text/javascript" src="ext-all-debug.js"></script> -->
    <script type="text/javascript" src="ext-all.js"></script>
 
 
 
    <script type="text/javascript" src="adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="adapter/yui/ext-yui-adapter.js</script>
 
    <script type="text/javascript" src="ExtStart.js"></script>