Afficher une div avec un traitement Ajax

**arthuro45** · 15/05/2010, 16h12

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 :

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

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 :

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
<!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 :

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

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 :

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

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

Merci pour votre aide.

**takitano** · 15/05/2010, 23h37

ok, et bien procedons par etapes ...

1. dabord Extjs puis YUI ...

Code :

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

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 javascript :

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

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 javascript :

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

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

**arthuro45** · 16/05/2010, 08h11

Code :

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

 alert('test 1');

Ne donne rien ni ce bout de code :

Code :

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

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 :

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

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

**takitano** · 16/05/2010, 22h32

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

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
 
    <!-- 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>

Afficher une div avec un traitement Ajax

Ext JS / Sencha

Discussions similaires

Partager

Partager