[Ajax] Création dynamique div en utilisant le DOM

Version imprimable

Bonjour,
J'ai un souci concernant la création dynamique d'un div en passant par le dom après avoir lancer une requête ajax via prototype.

Le problème est le suivant.
J'ai un formulaire quand je rentre un artiste; celui ci s'affiche dans un div en dessous avec la possibilité de le modifier ou de le supprimer. Si je valide sans entrer d'information j'ai un message d'erreur qui s'affiche toujours dans le div en dessous.

Lors du premier affichage tout se passe bien, par contre si j'ajoute un autre artiste, il s'affiche correctement mais j'ai une ligne qui se rajoute en bas du div une sorte de hr et à chaque insertion suivante le phénomène se répète mais l'affichage reste correcte c'est juste que le div créé se déforme pour des raisons que j'ignore voilà la partie du code qui doit poser problème.

Au départ voilà ce à quoi j'avais penser

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 new Ajax.Request(url, {
                      method: 'post',
                      parameters : $('monForm').serialize(true),
                      onSuccess: function(transport){
                        artists.justAdded = transport.responseText.evalJSON();
                        if(!Object.isString(artists.justAdded)){
                            var div_class = new Element('div', { class: 'block'});
							var div_id = $('arts');
                            var div_id = new Element('div', { id: 'arts' });
                            div_class.insert(div_id);
							$('Content').insert(div_class);
							artists.writeArtistsTable(artists.justAdded.arts);
							$('monForm').reset();                        
							}
                        else if(Object.isString(artists.justAdded)){
							var div_class = new Element('div', { class: 'block'});
							var div_id = $('arts');
                            var div_id = new Element('div', { id: 'arts' });
                            div_class.insert(div_id);
							$('Content').insert(div_class);
                            $('arts').innerHTML = artists.justAdded;
                        }
                    }

Je me suis dit ensuite que ce n'est pas la bonne solution car à chaque appel de l'ajax je crée le div et que cela devait être le problème donc voilà les modifications que j'ai apporté

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 new Ajax.Request(url, {
                      method: 'post',
                      parameters : $('monForm').serialize(true),
                      onSuccess: function(transport){
                        artists.justAdded = transport.responseText.evalJSON();
                        var div_class = new Element('div', { class: 'block'});
							var div_id = $('arts');
                            var div_id = new Element('div', { id: 'arts' });
                            div_class.insert(div_id);
							$('Content').insert(div_class);
                        if(!Object.isString(artists.justAdded)){
              				artists.writeArtistsTable(artists.justAdded.arts);
							$('monForm').reset();                        
							}
                        else if(Object.isString(artists.justAdded)){
 
                            $('arts').innerHTML = artists.justAdded;
                        }
                    }

Mais le problème reste le même.
Je suis à votre disposition pour plus d'informations.
Je vous remercie d'avance

Salut,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
new Ajax.Request(url, {
  method: 'post',
  parameters : $('monForm').serialize(true),
  onSuccess: function(transport){
    artists.justAdded = transport.responseText.evalJSON();
    var div_class = new Element('div', { class: 'block'});
    var div_id = $('arts');
    var div_id = new Element('div', { id: 'arts' });
// Declaration multiple !
// + A chaque appel, tu crée une nouvelle div d'ID arts. Les ids doivent être uniques...
    div_class.insert(div_id);
    $('Content').insert(div_class);
    if(!Object.isString(artists.justAdded)){
      artists.writeArtistsTable(artists.justAdded.arts);
      $('monForm').reset();                        
    } else if(Object.isString(artists.justAdded)){
      $('arts').innerHTML = artists.justAdded;
      // quelle div d'id 'arts' ? tu en crée une a chaque appel 
    }
}

Avec firefox et firebug, tu peux inspecter ton DOM au fur et à mesure... ca donne quoi ?

Gwyohm ça fait plaisir de voir que je peux toujours compter sur toi.

En effet, j'avais bien compris que mon code créé à chaque appel un nouveau div. Étant novice, comme tu as pu le constater j'ai des problèmes de syntaxe.

Ce que je souhaite faire c'est une fois l'appel de mon ajax créé un div ou s'inscriront toutes mes requêtes ajax, une sorte de contrôle de l'inter-action avec la base de données.

Le plus simple est que je t'envoies dans un message l'adresse ou tu peux tester le script. J'ai testé les modifs que tu as apporté et là je n'ai plus d'affichage du tout juste l'insertion au niveau de la base de données sur fond blanc. Donc je repars, sur ma version pour que tu puisses voir le phénomène.

Au niveau de la console d'erreur voilà le message que j'ai
Code:

1 2 3 4 5 Erreur*: missing : after property id Fichier Source*: http://morethanmusicradio.com/admin_radio/scripts/art_nat2.js Ligne*: 18, Colonne*: 13 Code Source*: var div_class = new Element('div', { class: 'block'});
Merci D'avance

07/12/2009, 13h09
gwyohm

Code:

var div_class = new Element('div', { "class": 'block'});

il faut mettre class entre " : c'est un mot réservé javascript
07/12/2009, 14h33
nkordiko

Merci j'ai apporté la modif pour class.
ça nous fait déjà un soucis de moins :oops: