11550 sujets

JavaScript, DOM et API Web HTML5

Salut,

Toujours sur la même application (pour ceux qui suivent), cela avance mais j'ai maintenant un souci avec la fonction replace de Prototype.

En effet je désire recréer un élément de mon dom après retour d'une requête vers une page php.
Cet élément est composé de input et représente un formulaire de mise à jours. Ces inputs sont donc remplis suivant les infos d'une table et lorsque je valide la mise à jours je voudrais envoyer ma requête et récupérer les nouvelles données pour recharger les champs du formulaire.
Le but de la manœuvre est plus complexe mais en gros c'est un moyen d'assurer à l'utilisateur que les données ont bien été changées dans la base.

Voici le code javascript minimal:

var MaClasse = Class.create();
MaClasse.prototype = {

	initialize: function() {
                ...
                this.updateForm = new Element('div');
                this.element.insert(this.updateForm);

                this._getInfos();
        },

        _buildForm: function(type) {
                var form = new Element('div',{'class':form});
		...
                //créé le form
                ...
                Event.observe(
                                button, 
                                'click', 
                                function(event){
                                                this._update(form, type);
                                }.bind(this));
                return form;
        },

        _update: function(form, type) {
                ...
                //ici la fonction n'est pas faite pour le test, elle ne fait que recharger les données
                this._getInfos();
        },

        _getInfos: function() {
                ...
                //récupère des données xml avec un Ajax.Request et lance _updateInfos()
        },

        _updateInfos: function() {
                ...
                //recréé le formulaire avec les données de la base
		this.updateForm.replace(this._buildForm('update'));
        }

};


Pour reprendre le code, lorsque j'initialise MaCLasse, je créé un formulaire qui n'est qu'un simple div, puis avec la fonction _getInfos j'envoie une demande des données xml et une fois les données reçus je reconstruit mon formulaire.
Dans mon formulaire j'ai un event sur un bouton qui lance à nouveau la fonction _getInfos() (par l'intermédiaire de _update()).

Quand j'exécute le code, mon div est bien changé par un formulaire. La où ça coince c'est au moment où je fait un clique sur le bouton: mes données ne sont pas réinitialisées depuis les données xml Smiley sweatdrop .

Par contre si je fait un "form.replace(this._buildForm(type))" dans la fonction _update le replace marche (seulement je veux faire le replace qu'après retour des nouvelles données).

J'espère que j'ai été clair.
Modifié par Glopp (18 May 2009 - 16:34)
salut ::

1. que te donne la console FireBug ?

console.log(this.updateForm + this._buildForm('update') + this.updateForm.replace(this._buildForm('update')) );

2. as tu tenté un alert(this._buildForm('update')); ?? et contient-il tout ton contenu ... ?

@+
salut,

Avant tout merci Nours312 pour ton intérêt et désolé de ne pas avoir pu répondre plutôt (pas d'internet durant une semaine) Smiley cligne .

Alors pour le :
console.log(this.updateForm + this._buildForm('update') + this.updateForm.replace(this._buildForm('update')) );

Firebug me renvoi [object HTMLDivElement][object HTMLDivElement][object HTMLDivElement].

Et si je fais un console.log(this._buildForm('update'));
J'ai bien mon form avec tout son contenu Smiley ohwell


Par contre j'ai quelque chose de bizarre.
Si je rajoute les deux console.log dans la fonction _updateInfos() comme suit:


        _updateInfos: function() {

                ...

console.log(this.updateForm);
                //recréé le formulaire avec les données de la base

		this.updateForm.replace(this._buildForm('update'));

console.log(this.updateForm);

        }


Au premier _getInfos(), j'ai:
<div>
<div>

Puis a chaque clique du bouton j'ai un seul Firebug ne me retourne qu'un seul <div>

Donc le premier div a l'initialisation est normal (vu que j'initialise this.updateForm comme un div).
Par contre le second ne l'est déjà pas car this._buildForm('update') me retourne bien un form et sur ma page html j'ai bien mon formulaire.
En gros j'ai mon dom correctement modifié mais mon élément javascript ne l'est pas Smiley eek

Puis quand on refait un clique this.updateForm.replace(this._buildForm('update')); essaie de faire un replace sur un élément qui n'existe plus car déjà replacé par le formulaire et donc la fonction _updateInfos() est stoppée.
Finalement en faisant un replace puis une attribution du nouveau formulaire ça passe. C'est pas propre mais bon pour le moment je vais m'en contenter.

Un oubli dans la librairie Prototype?


        _updateInfos: function() {

                ...

                //recréé le formulaire avec les données de la base


                var newForm = this._buildForm('update');
		this.updateForm.replace(newForm);
		this.updateForm = newForm;

        }